播放 video.js ustream m3u8 文件流

Posted 2023-05-07

技术标签:

【中文标题】播放 video.js ustream m3u8 文件流【英文标题】：Playing with video.js ustream m3u8 file streaming 【发布时间】：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"   
  data-setup=''>
    <source src="http://iphone-streaming.ustream.tv/uhls/3064708/streams/live/iphone/playlist.m3u8" type='video/mp4'>
  </video>

  <script>
  </script>

</body>
</html>

【问题讨论】：

【参考方案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"   
  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 标签中添加了脚本的最后一段谢谢哥们。这真的很有帮助:) 你能告诉我，这有什么问题吗？ ***.com/questions/45924975/…【参考方案3】：

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

1.videojs-http-streaming

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