Part6 - VideoJS Player for HLS Streaming

Well, We have a working HLS streaming solution but how can we present the stream to the users in an effective way. The most common way is to publish your stream on a web site by using a html video player. VideoJS is an open source project and with its additional hls module (videojs-contrib-hls) it works perfect with hls. It can also flashback on the browser where hls is not natively supported. For a working example of VideoJS with HLS you can check the link below.


You can run your stream and web publishing  on the same Nginx Server but it is not recommended. So I installed another nginx server on Ubuntu to host my html video player. 

Lets download the latest version of VideoJS from:


Download also videojs-contrib-hls from:

Enter the unzipped videojs folder and copy everyting to /usr/local/nginx/html (recursively)

cp * -r /usr/local/nginx/html


Modify your index.html and include video-js.css, video.js and videojs-contrib-hls in the head portion of the html file.

 <!DOCTYPE html>
<meta charset=utf-8 />
<title>Welcome to nginx!</title>
<link href="/video-js.css" rel="stylesheet">
<script src="/video.js"></script>
<script src="/videojs-contrib-hls.js"></script>

var player = videojs('example-video');;



 <video poster="/logo.png" id="example-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{}'>

<source src="http://10.20.x.x/hls/test.m3u8" type="application/x-mpegURL">
        <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that
 <a href="" target="_blank">supports HTML5 video</a></p>




UPDATE: The above code can not play hls stream on Internet Explorer but if you change the type attribute in source tag as  type="application/" >

Internet Explorer also works!





Enabling CORS:

Since the video Player is an HTML5 JavaScript-based player, the video streams it handles should be accessible by JavaScript. This is controlled by the cross-origin resource sharing (CORS) mechanism. You need to configure your streaming server to enable CORS requests. To enable CORS on NGINX, you need to use the add_header directive and add it to the appropriate NGINX configuration file. We already enabled this setting in nginx.conf in the previous hls article.

# # Wide-open CORS config for nginx #

Location /hls { add_header Access-Control-Allow-Origin *; }  

You can also check the following CORS example:



Cross-Domain Restrictions:


We might need to take care of what is called "cross-domain" restrictions, which would otherwise shut down your ability to stream to a webpage/website. Create a crossdomain.xml file in your nginx/html folder and put instructions in it to allow data to flow between domains: 



sudo touch crossdomain.xml ( in folder /usr/local/nginx/html)
sudo nano /usr/local/nginx/html/crossdomain.xml


Just copy the below code into the crossdomain.xml file and save it.


<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "">
<allow-access-from domain="*"/>




I also need a iframe code to publish my video stream on another web site. You most probably dont need that but I will add this here just in case.  



<!DOCTYPE html>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <iframe src="http://10.20.x.x/index.html" id="cw" name="cw" width="100%" height="1000px;" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>