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（however, I strongly advise against using HLS on Android due to limitations）支持播放

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

Answer 3

在支持Media Source Extension的浏览器上，您可以使用https://github.com/dailymotion/hls.js

Answer 4

对于使用Flash的变通方法，您可以使用FlasHLS无边框播放器。

Answer 5

试试FlowPlayer。它在服务器端以最少的工作量提供完整的HLS支持！

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

5 个答案: