Question

我曾尝试在网页上播放带有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>

Answer 1

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

还检查是否允许跨域请求（CORS）。

托管注意事项

与原生HLS实施不同，HLS技术必须遵守   浏览器的安全策略。这意味着所有的文件   组成流必须从与页面相同的域提供   托管视频播放器或从具有适当CORS的服务器托管   标头配置。流行的简单说明   网络服务器和大多数CDN应该没有问题转向CORS   你的帐户。

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

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

Answer 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-->

Answer 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库将HLS播放支持添加到video.js 5.0 +。

该库在 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库对于大型项目而言是一个不错的选择。

玩video.js ustream m3u8文件流

3 个答案: