Live stream example through Videojs with Nuevo plugin
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
<link href="//domain.com/videojs/skins/nuevo/videojs.min.css" rel="stylesheet"><script type=text/javascript" src="//domain.com/videojs/video.min.js"></script><script type=text/javascript" src="//domain.com/videojs/nuevo.min.js"></script>
<link href="//domain.com/videojs/skins/nuevo/videojs.min.css" rel="stylesheet"><video id="myplayer" class="video-js vjs-fluid" poster="/path-to-poster.jpg" controls preload="auto"><source src="//www.domain.com/live_manifest.m3u8" type="application/x-mpegURL"></video>
<script>var player = videojs('myplayer'); player.nuevo();</script>Since version 7.4 of the video.js player, it offers experimental Live DVR support. Nuevo plugin and skins fully support such feature.
For live DVR stream you need to enable the videojs liveui option.
Code snippet
<script>var player = videojs('myplayer',{liveui:true}); player.nuevo();</script>Code snippet
player.reconnect();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 quality menu as kbps or as the video resolution value (video height). HD, FullHD, 4K icons are populated automatically for appropriate video resolution.