播放 video.js ustream m3u8 文件流答案

【问题标题】：Playing with video.js ustream m3u8 file streaming播放 video.js ustream m3u8 文件流
【发布时间】：2015-06-03 18:20:55
【问题描述】：

我尝试在网页中播放带有video.js的m3u8文件流，但是我做不到，我不知道错误在哪里

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Video</title>

  <link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
  <script src="http://vjs.zencdn.net/4.12/video.js"></script>
 <script src="https://github.com/videojs/videojs-contrib-media-sources/releases/download/v0.1.0/videojs-media-sources.js"></script>
  <script src="https://github.com/videojs/videojs-contrib-hls/releases/download/v0.11.2/videojs.hls.min.js"></script>

</head>
<body>
  <h1>Video</h1>

  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{}'>
    <source src="http://iphone-streaming.ustream.tv/uhls/3064708/streams/live/iphone/playlist.m3u8" type='video/mp4'>
  </video>

  <script>
  </script>

</body>
</html>

【问题讨论】：

标签： javascript html streaming video.js m3u8

【解决方案1】：

你需要type='application/x-mpegURL'，而不是type='video/mp4'。

还要检查是否允许跨域请求 (CORS)。

托管注意事项

与原生 HLS 实现不同，HLS 技术必须遵守浏览器的安全策略。这意味着所有的文件组成流必须从与页面相同的域提供托管视频播放器或来自具有适当 CORS 的服务器头配置。简单的说明可用于流行网络服务器和大多数 CDN 应该可以轻松打开 CORS 您的帐户。

来源：https://github.com/videojs/videojs-contrib-hls

CORS 方法：http://enable-cors.org/server.html

【讨论】：

我也放置了 type='application/x-mpegURL 但不起作用。如何检查是否允许跨域？我认为跨域仅适用于 Flash 播放器 ....也适用于 html 播放器？
video.js 提供 Flash 后备 (video-js.swf)，因此您可能需要在服务器上添加 crossdomain.xml。控制台有错误吗？
我正在尝试 jsfiddle 我已经添加了一些我在这个例子中找到的库：github.com/videojs/videojs-contrib-hls/blob/master/example.html 这是我的演示：jsfiddle.net/066hfjge/5
我用我自己的流尝试了你的原始代码，它工作正常。使用 ustream.tv 源会导致 CORS 错误 (Access-Control-Allow-Origin)。我会用说明更新答案。
啊好的，但我无法访问 ustream 服务器，我必须在其中插入 Header set Access-Control-Allow-Origin "*" 因此是不可能的 .... 使用 ustream

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Video</title>

  <link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
  <script src="http://vjs.zencdn.net/4.12/video.js"></script>
 <script src="https://github.com/videojs/videojs-contrib-media-sources/releases/download/v0.1.0/videojs-media-sources.js"></script>
  <script src="https://github.com/videojs/videojs-contrib-hls/releases/download/v0.11.2/videojs.hls.min.js"></script>

</head>
<body>
  <h1>Video</h1>

  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{}'>
    <source src="http://iphone-streaming.ustream.tv/uhls/3064708/streams/live/iphone/playlist.m3u8" type='application/x-mpegURL'>
  </video>

  <script>
  var player = videojs('my_video_1');
  </script>

</body>
</html>

<!-- Replace current .m3u8 and check..current file has access issue-->

【讨论】：

能否请您详细说明您的答案，添加更多关于您提供的解决方案的描述？
Videojs 播放器需要初始化...因此我在 body 标签中添加了脚本的最后一段
谢谢哥们。这真的很有帮助:) 你能告诉我，这有什么问题吗？ stackoverflow.com/questions/45924975/…

【解决方案3】：

我找到了两个最强大的视频 js hls 库

1.videojs-http-streaming

这个库是从videojs-contrib-hls根据以下描述生成的

注意：这个项目将被弃用，由 videojs-http-streaming 继承。 VHS 支持 HLS 和 DASH 并内置在 video.js 7 中，请参阅 video.js 7 博客文章

videojs-http-streaming库的简短描述如下

使用 video.js 播放 HLS、DASH 和未来的 HTTP 流式传输协议，即使它们本身不受支持。默认包含在 video.js 7 中！

Github 链接：https://github.com/yanwsh/videojs-panorama

2.videojs-hlsjs-plugin

这个库的简短描述如下

使用 hls.js 库向 video.js 5.0+ 添加 HLS 播放支持。

从 hls.js 库中使用该库的优势

videojs-hlsjs-plugin github 链接：https://github.com/streamroot/videojs-hlsjs-plugin

hls.js github 链接：https://github.com/video-dev/hls.js/

结论

我使用了这两个库中的项目，我使用它们的经验是 videojs-hlsjs-plugin 库是由于使用强大的 hls.js 库对于大型项目来说是一个很好的选择。

【讨论】：