Videojs live stream test

Videojs live stream with Nuevo plugin and skin

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 snippet

<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="/path-to-poster.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>


Since version 7.4 videojs offers experimental Live DVR support. Nuevo plugin and skins fully support such feature.
For live DVR stream you need to enable videojs liveui option.
Code snippet
<script>
var player = videojs('myplayer',{liveui=true}); 
player.nuevo();
</script>
Or
Code snippet
<script>
videojs.options.liveui=true;
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
Code snippet
<script type=text/javascript" src="//domain.com/video-js/videojs-contrib-hls.min.js"></script>

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).

Some users have trouble with network connectivity after live stream paused for some time. Nuevo plugin has easy function to reconnect video. In example above you can see Reconnect button that you can test. Read more about 'reconnect' function on our blog.