Playing with video.js ustream m3u8 file streaming

问题

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

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

回答1:

Instead of type='video/mp4' you need type='application/x-mpegURL'.

Check also if cross-domain requests are allowed (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.

Source: https://github.com/videojs/videojs-contrib-hls

CORS How-To: http://enable-cors.org/server.html

回答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-->

回答3:

I found two of the most powerful hls library for video js

1.videojs-http-streaming

This library has been generated from videojs-contrib-hls Based on the following description

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

The short description of videojs-http-streaming library is as follows

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

Github link: https://github.com/yanwsh/videojs-panorama

2.videojs-hlsjs-plugin

The short description of this library is as follows

Adds HLS playback support to video.js 5.0+ using hls.js library.

The library's strength in using it from the hls.js library

videojs-hlsjs-plugin github link : https://github.com/streamroot/videojs-hlsjs-plugin

hls.js github link : 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-plugin library is due to using a powerful hls.js library can be a great option for large projects.

来源：https://stackoverflow.com/questions/29351225/playing-with-video-js-ustream-m3u8-file-streaming

标签

javascript

html5

streaming

video.js

m3u8