玩video.js ustream m3u8文件流

gri*_*one 7 javascript streaming html5 video.js m3u8

我试图在一个网页上播放一个m3u8文件流与video.js,但我不能这样做,我不知道错误在哪里

<!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>
Run Code Online (Sandbox Code Playgroud)

aer*_*tal 9

而不是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