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

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

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

Является ли этот тег html5 связанным с видео темой или, возможно, вещателем?

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

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

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

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

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

Ответ 4

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

Ответ 5

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