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.

http://videojs.github.io/videojs-contrib-hls/

 

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:

https://github.com/videojs/video.js/releases/tag/v5.14.0

 

Download also videojs-contrib-hls from:

https://github.com/videojs/videojs-contrib-hls/releases/tag/v4.0.2

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>
<html>
<head>
<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>


<script>
var player = videojs('example-video');
player.play();
</script>


</head>
<body>
<h1></h1>


<body>



 <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="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
        </video>



</body>
</html>

 

 

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/vnd.apple.mpegurl" >

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:

http://enable-cors.org/server_nginx.html

 

 

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 "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*"/>
</cross-domain-policy> 

 

 

 

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>
<html>
<head>
  <title>Demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
  <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>
</body>
</html>
© selimatmaca.com. All Rights Reserved.