Как я могу воспроизвести Apple HLS в прямом эфире, используя видео тег HTML5
<video id="live" autoplay controls>
<source src="http://[WOWZA-IP]:1935/Live/mp4:[LIVESTREAMNAME]/playlist.m3u8" type="video/mp4" />
</video>
Я пытаюсь воспроизвести прямой эфир в кодировке h264 с помощью тега html5 video. Прямая трансляция транслируется медиа-сервером wowza, и при посещении ссылки src я получаю действительный файл списка воспроизведения. При попытке воспроизвести поток в браузере Android Chrome, плеер ничего не делает и показывает черный экран.
Это связано с тегом html5 video или может быть вещателем?
5 ответов
Это форматы, которые вы можете воспроизводить, используя теги html5.
Думайте о формате видео как о zip-файле, который содержит закодированный видеопоток и аудиопоток. Три формата, о которых вам следует позаботиться о вебе (webm, mp4 и ogv):
.mp4 = H.264 + AAC
.ogg/.ogv = Theora + Vorbis
.webm = VP8 + Vorbis
На самом деле есть хороший выбор решений для этого. Одним из решений будет определение возможности воспроизведения 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 на всех популярных платформах и устройствах, в том числе без поддержки Media Source Extension. В настоящее время список поддерживаемых браузеров и платформ включает в себя: Internet Explorer, Edge, Firefox, Chrome, Opera и Safari для Windows, Linux, Mac OS X, Android, iOS и Windows Phone.
В браузерах, поддерживающих Media Source Extension, вы можете использовать https://github.com/dailymotion/hls.js
Для обходных путей, использующих flash, вы можете использовать FlasHLS Chromeless Player.
Попробуйте FlowPlayer. Он обеспечивает полную поддержку HLS с наименьшими усилиями на стороне сервера!