Audio/Video Playlist

Mixed audio & video playlist

Nuevo plugin for video.js framework allows to play both: audio and video media items through unique playlist developed as a part of Nuevo plugin. In order to use mixed content (audio and video media items), you must use <video> global tag.
For each playlist item you can include detailed information, like title, duration, playlist thumbnail, poster image, preview thumbs, captions, chapters, audio info (artist,song name, album name, release date).
Of course you can also have a playlist with audio items only or video items only.

Mixed playlist setup example

Code snippet


<video id="my_player" class="video-js" controls preload="auto" playsinline width="640" height="360" poster="//path-to-poster.jpg">
<script>
   var player = videojs("my_player");
   player.nuevo();
   player.playlist([
      {
        // MP3 Audio
	sources: [{
	    src: "//domain.com/track.mp3",
	    type: "audio/mp3",
	}],
	title: "Audio title",
	thumb: "//path-to-playlist-thumb-image.jpg",
	duration: "02:36",
	poster: "//path-to-poster-image.jpg",
	audioInfo: {
	   url: "//track-url.com", 
	   cover: "//track-cover.jpg",
	   title: "Track title",
	   artist: "Artist name",
	   genre: "Rock",
	   year: "2020"
	}
     }, {
        //Multiple quality MP4 video
	sources: [{
	    src: "//domain.com/video2_720p.mp4",
	    type: "video/mp4", res: "720", label: "720p"
	  }, {
	    src: "//domain.com/video2_360p.mp4",
	    type: "video/mp4", res: "360", label: "360p", default
	  }, {
	    src: "//domain.com/video2_240p.mp4",
	    type: "video/mp4', res: "240", label: "240p"
	  }],
	  tracks: [{
	    src: "//domain.com/captions_en.vtt",
	    kind: "captions", srclang:"en", label:"English", default:true
	  }, {
	    src: "//domain.com/captions_de.vtt",
	    kind: "captions", srclang:"de", label:"German"
	  }],
	  title: "Video title",
	  thumb: "//path-to-playlist-thumb-image.jpg",
	  duration: "05:20",
	  slideImage: "//domain.com/slide.jpg", // Optional progressbar thumbs slide image
	  poster: "//path-to-poster-image.jpg"
	}, {
	  // HLS m3u8 playlist file
	  sources: [{
	    src: "//path-to-playlist.m3u8",
	    type: "application/x-mpegURL"
	  }],
	  title: "video title",
	  thumb: "//path-to-playlist-thumb.jpg",
	  duration: "03:40",
	  poster: "//path-to-poster-image.jpg"
	}
   ]);
</script>