使用video.js播放ustream m3u8文件流

Question

使用video.js播放ustream m3u8文件流

13

我尝试在网页上使用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>

- grigione

4个回答

4

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

- Ajay nandoriya

您能否详细阐述一下您的答案，并对您提供的解决方案进行更多描述？ - abarisone

1

Videojs播放器需要初始化...因此我将脚本的最后一段添加到body标签中。 - Ajay nandoriya

谢谢伙计，这真的很有帮助 :) 你能告诉我这个有什么问题吗？https://stackoverflow.com/questions/45924975/hls-video-not-visible-on-chrome-video-js - Fayza Nawaz

3

<!DOCTYPE html>
<html>
  <head>
    <title>Video Player Example</title>
    <link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet" />
    <script src="https://vjs.zencdn.net/7.14.3/video.min.js"></script>
  </head>
  <body>
    <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" data-setup='{"fluid": true}'>
      <source src="https://live-edge01.telecentro.net.ar/live/smil:tlx.smil/playlist.m3u8" type="application/x-mpegURL" />
    </video>
    <script>
      var player = videojs('my-video');
    </script>
  </body>
</html>

只需将链接替换为您自己的链接

  <source src="https://live-edge01.telecentro.net.ar/live/smil:tlx.smil/playlist.m3u8" type="application/x-mpegURL" />

但是在发布时，这个是有效的。

- sandroid

2

我找到了两个最强大的视频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/

结论:

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

- MostafaMashayekhi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- aergistal · Accepted Answer

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

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

主机考虑的问题

与本地HLS实现不同，HLS技术必须遵守浏览器的安全策略。这意味着组成流的所有文件必须从托管视频播放器的页面相同的域或已配置适当CORS头的服务器提供。常用Web服务器提供简单指示，并且大多数CDN应该没有问题为您的帐户开启CORS。

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

CORS如何操作：http://enable-cors.org/server.html