When delivering a series of videos, say a conference track, an online class, or even just a set of videos from a party, the ability to generate a playlist of videos is a great way to engage viewers. They can see the list of available videos, and when one video ends – the next just starts up, allowing you to tell a story with the videos.

In this post, I’ll walk through the steps I used to create a video playlist for a conference track on “Lions, Tigers and Bears” using Cloudinary, and the Cloudinary video player.

Chaining talks into a playlist

I uploaded the 3 talks for my conference track, and named them “lions”, “tigers” and “bears” respectively. I also tagged each talk with the term “ltb.”

To create the playlist, I’ll be using the Cloudinary player. This requires adding some JS in the HTML head:

<html><head>
<link href="https://unpkg.com/cloudinary-video-player@1.4.0/dist/cld-video-player.min.css" rel="stylesheet">
https://unpkg.com/cloudinary-core@2.8.2/cloudinary-core-shrinkwrap.min.jshttps://unpkg.com/cloudinary-video-player@1.4.0/dist/cld-video-player.min.js

</head>

My video tag calls uses autoplay (and muted to autoplay on mobile) and adds controls

<video id="video-player" 
controls autoplay muted width = "640"
class="cld-video-player cld-video-player-skin-dark">
</video>

I can then control this player using JavaScript. I name the 3 video sources (lions tigers and bears), and give them titles and information about each video. The player.playlist function lists the 3 videos in the playlist, forces them to autoadvance and repeat. The presentUpcoming pops an image preview of the next video in the last 5 seconds of the currently playing video.

<script>
var cld = cloudinary.Cloudinary.new({ cloud_name: 'dougsillars' });
var player = cld.videoPlayer('video-player');
var lions = { publicId: 'lions', info:
{ title: 'Lions', subtitle: 'Kings and Queens of the animals' }
};
var tigers = { publicId: 'tigers', info:
{ title: 'tigers', subtitle: 'striped cats' }
};
var bears = { publicId: 'bears', info:
{ title: 'bear', subtitle: 'rowar!' }
};
// Auto advance to next video after 0 seconds, 
//repeat the playlist when final video ends,
//and present theupcoming video 5 seconds before the current
//video ends.
player.playlist([lions, tigers,bears],
{ autoAdvance: true, repeat: true, presentUpcoming: 5 }
); </script>

You can see this example here.

Tiger Video, with a preview of the bear video

 

Faster playlists

In the example above, I had to identify each video with a variable and manually add it to my playlist.This could be cumbersome when dealing with a lot of videos. By tagging each video, I can then use that tag to automatically generate a playlist for the tag “ltb”:

player.playlistByTag("ltb",{ autoAdvance: 0, repeat: true, presentUpcoming: 5 }).then(function(player) { console.log("Playlist loaded") })

The playlist is generated in the order that the tags were placed, so in this case: bears-> tigers -> lions.

There is a JSON file in my Cloudinary account called ‘ltb.json’ that could be modified to rearrange the videos:


{"resources": [{"public_id": "bears","version": 1593245959,"format": "mp4","width": 1920,"height": 1080,"type": "upload","created_at": "2020-06-27T08:19:19Z"},{"public_id": "tigers","version": 1593245947,"format": "mp4","width": 1920,"height": 1080,"type": "upload","created_at": "2020-06-27T08:19:07Z"},{"public_id": "lions","version": 1593245946,"format": "mp4","width": 1920,"height": 1080,"type": "upload","created_at": "2020-06-27T08:19:06Z"}],"updated_at": "2020-06-27T09:48:19Z"}

How do users know it is a playlist?

Having the player queue up videos that play one after another is nice, but I think it is important to let your users know that they are actually watching a playlist with multiple videos. The “next up” widget that I used above announces the next video just before the switch is one way. I also like the playlist widget – that will show video poster image of the next <defined number> of videos in the playlist:

Video playlist widget with preview images on the right

var player = cld.videoPlayer('video-player', { playlistWidget: { direction: 'vertical', total:3 } });

The widget is added when defining the player, and can be added vertically on the right, or horizontally on the bottom. Clicking the preview images allows for fast switching between videos.

Ads and monetisation

Cloudinary offers the ability to insert traditional ads before the first video or between all videos. However, if you have sponsors for your conference, you might just want to insert short videos/clips from them inside the playlist for your conference tracks – adding another way to promote their support.

If you haven’t already guessed, there’s a slight Wizard of Oz slant to this post (Lions, and tigers and bears, Oh My!). So I have added ads for Ruby Slippers and for the local candy shoppe (run by the lollipop build, of course!) in this version of my playlist:

Playlists for sharing similar videos

No matter if you are hosting videos from a conference track, or just a collection of videos from your child’s birthday party – playlists are a great way to display a group of similar video on a webpage, while only using the area of one video. Try it out with your videos and let me know what you came up with.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.