Playing with video.js ustream m3u8 file streaming

grigione picture grigione · Mar 30, 2015 · Viewed 43.6k times · Source

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>

Answer

aergistal picture aergistal · Mar 31, 2015

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