Javascript 播放 video.js ustream m3u8 文件流
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29351225/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Playing with video.js ustream m3u8 file streaming
提问by grigione
I have tried to play in a web page a m3u8 file streaming with video.js, But I could not do it, I do not know where the mistake is
我曾尝试在网页中播放带有 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>
回答by aergistal
Instead of type='video/mp4'you need type='application/x-mpegURL'.
而不是type='video/mp4'你需要type='application/x-mpegURL'。
Check also if cross-domain requests are allowed (CORS).
还要检查是否允许跨域请求 (CORS)。
Hosting Considerations
Unlike a native HLS implementation, the HLS tech has to comply with the browser's security policies. That means that all the files that make up the stream must be served from the same domain as the page hosting the video player or from a server that has appropriate CORS headers configured. Easy instructions are available for popular webservers and most CDNs should have no trouble turning CORS on for your account.
托管注意事项
与本机 HLS 实现不同，HLS 技术必须遵守浏览器的安全策略。这意味着构成流的所有文件必须从与托管视频播放器的页面相同的域或从配置了适当 CORS 标头的服务器提供。为流行的网络服务器提供了简单的说明，大多数 CDN 为您的帐户打开 CORS 应该没有问题。
Source: https://github.com/videojs/videojs-contrib-hls
来源：https: //github.com/videojs/videojs-contrib-hls
CORS How-To: http://enable-cors.org/server.html
CORS 操作方法：http: //enable-cors.org/server.html
回答by Ajay nandoriya
<!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-->
回答by MostafaMashayekhi
I found two of the most powerful hls library for video js
我找到了两个最强大的视频js hls 库
1.videojs-http-streaming
1.videojs-http-streaming
This library has been generated from videojs-contrib-hlsBased on the following description
这个库是从videojs-contrib-hls生成的，基于下面的描述
Notice: this project will be deprecated and is succeeded by videojs-http-streaming. VHS supports HLS and DASH and is built into video.js 7, see the video.js 7 blog post
注意：此项目将被弃用，并由 videojs-http-streaming 接替。VHS 支持 HLS 和 DASH 并内置于 video.js 7 中，请参阅 video.js 7 博客文章
The short description of videojs-http-streaminglibrary is as follows
videojs-http-streaming库的简短描述如下
Play HLS, DASH, and future HTTP streaming protocols with video.js, even where they're not natively supported. Included in video.js 7 by default!.
使用 video.js 播放 HLS、DASH 和未来的 HTTP 流协议，即使它们本身不受支持。默认包含在 video.js 7 中！
Github link: https://github.com/yanwsh/videojs-panorama
Github 链接：https: //github.com/yanwsh/videojs-panorama
2.videojs-hlsjs-plugin
2.videojs-hlsjs-插件
The short description of this library is as follows
这个库的简短描述如下
Adds HLS playback support to video.js 5.0+ using hls.js library.
使用 hls.js 库向 video.js 5.0+ 添加 HLS 播放支持。
The library's strength in using it from the hls.jslibrary
库在使用hls.js库方面的优势
videojs-hlsjs-plugin github link : https://github.com/streamroot/videojs-hlsjs-plugin
videojs-hlsjs-plugin github 链接：https: //github.com/streamroot/videojs-hlsjs-plugin
hls.js github link : https://github.com/video-dev/hls.js/
hls.js github 链接：https: //github.com/video-dev/hls.js/
conclusion
结论
I used projects from both of these libraries and my experience in using them is that videojs-hlsjs-pluginlibrary is due to using a powerful hls.jslibrary can be a great option for large projects.
我使用了这两个库中的项目，我使用它们的经验是videojs-hlsjs-plugin库是由于使用强大的hls.js库可以成为大型项目的绝佳选择。
