Video Js live stream demo

Video Js player with Nuevo theme and plugin LIVE streaming demo

Live streaming for both: desktop and mobile devices became easy using a player like Video JS. You need to provide valid m3u8 manifest as video file. HTTP Live Streaming (or HLS) is an adaptive streaming communications protocol created by Apple. HLS can distribute both live and on-demand files and is the sole technology available for adaptively streaming to devices, and is an increasingly important target segment to streaming publishers.

Code setup:

<script type=text/javascript" src="//domain.com/videojs/video.min.js"></script>
<script type=text/javascript" src="//domain.com/videojs/nuevo.min.js"></script>

<video id="myplayer" class="video-js vjs-default-skin" poster="/cover.jpg" controls preload="auto">
  <source src="http://www.domain.com/live_manifest.m3u8" type="application/x-mpegURL">
</video>

<script>
var player = videojs('myplayer'); 
player.nuevo();
</script>



If using videojs version 6 you need to load "videojs-contrib-hls" plugin right after "video.min.js" javascript
<script type=text/javascript" src="//domain.com/video-js/videojs-contrib-hls.min.js"></script>

If you want to modify "nuevo" plugin options or add few, like logo, etc, initialize nuevo plugin like code below:

player.nuevo({
	logo://domain.com/logo.png
	logourl: '//domain.com',
	logoposition: 'RT'
});


Of course you must remember that streaming server must have CORS (Cross-Origin Resource Sharing) enabled to stream on your website and URL protocols must match each other.

Nuevo plugin detects available qualities for HLS live stream automatically. Depending on m3u8 protocol avilable qualities to switch between are presented in qualities menu as kbps or video resolution value (video height).