[Howto] use videojs with HLS (videojs-contrib-hls.js)

posted in: computer | 0

checkout the live-example from http://jsbin.com/liwecukasi/edit?html,output

The live-example code is:

<!DOCTYPE html>
<html>

<head>
 <meta charset=utf-8 />
 <title>videojs-contrib-hls embed</title>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.10.2/alt/video-js-cdn.css" rel="stylesheet">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.10.2/video.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/3.0.2/videojs-contrib-hls.js"></script>
</head>

<body>
 <h1>Video.js Example Embed</h1>
 <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{}'>
   <source src="http://solutions.brightcove.com/jwhisenant/hls/apple/bipbop/bipbopall.m3u8" type="application/x-mpegURL">
 </video>
</body>

</html>

 

my minimal working code is: (note: my js-scripts are locally saved on the webserver, so you must change the paths to your custom setup)

<link href="./video-js.css" rel="stylesheet">

<script src="./video.js"></script>
<script src="./videojs-contrib-hls.js"></script>

<video width="640" height="480" class="video-js vjs-default-skin" controls preload="auto" data-setup='{}'>
  <source src="http://example.org/test.m3u8" type="application/x-mpegURL">
  <p class="vjs-no-js">To view this video please enable JavaScript</p>
</video>