html5-video - 如何在 videojs 上播放 HLS Wowza Live Stream (m3u8)

Question

我正在尝试使用 html5 视频标签播放 h264 编码的直播流。直播由 wowza 媒体服务器广播，当访问 src 链接时，我得到一个有效的播放列表文件。尝试在 android chrome 浏览器上播放流时，播放器不执行任何操作并显示黑屏。

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

Answer 1

目前的 videojs 仅支持 safari 和 iOS 上的 m3u8/HLS。Android 应该支持 HLS 或 Cupertino 流媒体，但我听说它有问题。要使 HLS 和 m3u8 在 vi​​deojs 中工作，您需要为 videojs 提供支持 HLS 的闪存回退。

看看这个例子http://flashls.org/videojs/flash_demo.html

要自己实现它...按照本指南 或下载此swf 然后将此代码添加到您的 videojs 页面。

<script>
  videojs.options.flash.swf = "[YourHosted]/video-js.swf"
</script>

...

<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="360" data-setup='{"techOrder": ["flash"]}'>
  <source src="http://[Wowza Ip]/live/mp4:mystream/playlist.m3u8" type='video/mp4'/>
</video>

Answer 2

需要添加一个额外的库来支持 HLS (LiveStream)。

VideoJS HLS库。对于现场示例Live Example。