Как я могу играть в Apple HLS live stream с помощью тега html5 video

<video id="live"  autoplay controls>
    <source src="http://[WOWZA-IP]:1935/Live/mp4:[LIVESTREAMNAME]/playlist.m3u8" type="video/mp4" />
</video>

Я пытаюсь воспроизвести H264 закодированный живой поток, используя html5 video tag. Live stream транслируется Wowza media server, и при посещении src link я получаю действительный файл списка воспроизведения. При попытке воспроизвести поток в браузере Android chrome игрок ничего не делает и показывает черный экран.

это проблема, связанная с html5 video tag, или, может быть, broadcaster?

23
html5 live-streaming video wowza

5 ответов

это форматы, которые вы можете играть с помощью исходных тегов html5.

подумайте о видеоформате как о zip-файле, который содержит закодированный видеопоток и аудиопоток. Три формата, которые вы должны заботиться о веб (webm, mp4 и ogv):

.mp4 = H.264 + AAC
.ogg/.ogv = Theora + Vorbis
.webm = VP8 + Vorbis
8

существует на самом деле хороший диапазон решений для этого. Одним из решений было бы определить, можно ли воспроизводить HLS:

document.createElement('video').canPlayType('application/vnd.apple.mpegURL') !== ''

однако это не позволит вам воспроизводить содержимое HLS на устройствах, которые не поддерживают воспроизведение. На данный момент воспроизведение поддерживается только на Microsoft Edge, iOS Safari, OS X Safari и Android (однако я настоятельно рекомендую не использовать HLS на Android из-за ограничений)

другое решение для воспроизведения HLS во всех платформы в HTML5 должны использовать HTML5 HLS-плеер, такой как THEOplayer. Им удалось разрешить HLS играть на все популярные платформы и устройства, в том числе без Расширение Источника Мультимедиа поддержка. В настоящее время список поддерживаемых браузеров и платформ включает: Internet Explorer, Edge, Firefox, Chrome, Opera и Safari на Windows, Linux, Mac OS X, Android, iOS и Windows Phone.

5

в браузерах, поддерживающих Расширение Источника Мультимедиа вы можете использовать https://github.com/dailymotion/hls.js

3

для обходных путей с помощью flash, вы можете использовать FlasHLS chromeless игрок.

2

попробовать FlowPlayer. Он обеспечивает полную поддержку HLS с наименьшими усилиями на стороне сервера!

2