如何使用html5视频标记播放Apple HLS直播流

Question

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

我正在尝试使用html5视频标记播放h264编码的直播流.现场直播由wowza媒体服务器播放,当访问src链接时,我获得了一个有效的播放列表文件.当试图在Android Chrome浏览器上播放流时,播放器什么也不做,并显示黑屏.

这个html5视频标签是相关问题还是广播公司？

Answer 1

这些是您可以使用html5源标记播放的格式.

将视频格式视为包含编码视频流和音频流的zip文件.您应该关注的三种格式是(webm,mp4和ogv):

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

Answer 2

实际上有很多解决方案.一种解决方案是检测是否可以播放HLS:

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

但是,这不允许您在不支持播放的设备上播放HLS内容.此时,仅在Microsoft Edge,iOS Safari,OS X Safari和Android上支持播放(但是,由于限制,我强烈建议不要在Android上使用HLS)

在HTML5中跨所有平台播放HLS的另一个解决方案是使用HTML5 HLS播放器,例如THEOplayer.他们设法允许HLS在所有流行的平台和设备上播放,包括那些没有Media Source Extension支持的平台和设备.目前,支持的浏览器和平台列表包括:Windows,Linux,Mac OS X,Android,iOS和Windows Phone上的Internet Explorer,Edge,Firefox,Chrome,Opera和Safari.

Answer 3

在支持媒体源扩展的浏览器上，您可以使用https://github.com/dailymotion/hls.js