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

Question

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

Я пытаюсь воспроизвести h264 закодированный прямой эфир с помощью тега html5 video. Прямой эфир транслируется сервером wowza media, а при посещении ссылки src я получаю действительный файл списка воспроизведения. Когда вы пытаетесь воспроизвести поток на браузере Chrome, он ничего не делает и отображает черный экран.

Возможно, это связанная с видео тегами html5 или, возможно, вещательная компания?

Answer 1

Это те форматы, в которые вы можете играть, используя теги источника html5.

Подумайте о видеоформате в виде zip-файла, который содержит кодированный поток видео и аудиопоток. Эти три формата, вы должны заботиться о для полотна (WebM, MP4 и О):

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

Answer 2

Для обходных с использованием вспышки, вы можете использовать FlasHLS Chromeless плеера.

Answer 3

в браузерах, поддерживающих Media Source Extension вы можете использовать https://github.com/dailymotion/hls.js

Answer 4

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

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

Однако, это не позволит воспроизводить контент HLS на устройствах, которые не поддерживают воспроизведение. На данный момент, воспроизведение поддерживается только на Microsoft Edge, IOS Safari, OS X Safari и Android (however, I strongly advise against using HLS on Android due to limitations)

Другое решение играть HLS на все платформы в HTML5 является использование игрока HTML5 HLS, таких как THEOplayer. Им удалось разрешить играть HLS на all popular platforms and devices, в том числе без поддержки Media Source Extension. В настоящее время список поддерживаемых браузеров и платформ включает в себя: Internet Explorer, Edge, Firefox, Chrome, Opera и Safari для Windows, Linux, Mac OS X, Android, iOS и Windows Phone.

Answer 5

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