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-fluid" 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>

Many videojs users report trouble with resuming live stream playback once it was paused for a while. For this reason nuevo plugin from version 6.4 force the player to reconnect live stream after it is paused. It's exactly same like notable JWPlayer. By default the player with nuevo plugin always reconnects right after resuming live stream. However you may set nuevo plugin option liveTimeout to reconnect live stream once the player is paused longer than some option value. The code below use 5 seconds delay.
Code snippet
<script>
var player = videojs('myplayer'); 
player.nuevo({ liveTimeout: 5 });
</script>
If you prefer to keep default videojs behavior when resuming live stream (not reconnect stream), set Nuevo plugin option liveReload to false.
Code snippet
<script>
var player = videojs('myplayer'); 
player.nuevo({ liveReload:false });
</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 and DASH live stream automatically. Depending on hls/dash playlist protocol, available qualities to switch between are presented in qualities menu as kbps or as video resolution value (video height).