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>