Objective

HTML allows us to easily embed video players on web pages, video playlists, however, is outside of the scope of the standard video element. This is regardless of the fact that for media-intensive applications, organizing our videos into playlists is priceless. Let us explore how we can add video playlists on our Nuxt.Js apps.

Codesandbox

The final project can be viewed on Codesandbox.

You can find the full source code on my Github repository.

App Setup

Nuxt.Js is a performant Vue.Js framework that boasts of boosting developer experience and productivity. This has led it to be amongst the most widely used Vue.Js frameworks. Today, we will also be using it. To get started ensure you have yarn or npm v5.2+/v6.1+ installed. Open your terminal in your preferred working directory.

1yarn create nuxt-app nuxtjs-video-player
2
3npx create-nuxt-app nuxtjs-video-player
4
5npm init nuxt-app nuxtjs-video-player

This will trigger a set of setup questions meant to customize your project. Here are our recommended defaults:

Project name: nuxtjs-video-playlists Programming language: JavaScript Package manager: Yarn UI framework: Tailwind CSS Nuxt.js modules: N/A Linting tools: N/A Testing frameworks: None Rendering mode: Universal (SSR/SSG) Deployment target: Server (Node.js hosting) Development tools: N/A What is your Github username? <your-github-username> Version control system: Git

This will customize the installation for you. Once the setup is complete you may enter the directory and run the project.

1cd nuxtjs-video-playlists
2
3yarn dev
4# OR
5npm run dev

You should now be able to view your project on http://localhost:3000.

Videos setup

Before rendering our playlists, we need to first store our videos on Cloudinary. Cloudinary is a media management platform that offers a comprehensive toolset of SDKs, APIs and widgets to ensure you give your app users the best media experience.

To prevent storing the video files in our own app thus increasing hosting requirements as well as video load time, we will host them on Cloudinary. If you do not have an account, feel free to create one here.

Once signed in, proceed to the media library and create a nuxtjs-video-playlist. Within the folder upload the following videos:

The resultant folder should be like this: Video player

Once the videos are uploaded, select them all and tag them as mvp-animals. We'll use this tag later.

Cloudinary video player setup

Instead of using the stock HTML5 video element, we are going to be using Cloudinary's video player.

Installation is simple, we will add the CSS and JS assets to our nuxt.config.js file. The assets will be pulled from unpkg, a fast global content delivery network for npm.

Let's add the files in the head section.

1// nuxt.config.js
2export default {
3  head: {
4      ...
5        link: [
6            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
7            { rel: 'stylesheet', href: 'https://unpkg.com/cloudinary-video-player@1.5.9/dist/cld-video-player.min.css' }
8        ],
9        script: [
10            { src: 'https://unpkg.com/cloudinary-core@latest/cloudinary-core-shrinkwrap.min.js' },
11            { src: 'https://unpkg.com/cloudinary-video-player@1.5.9/dist/cld-video-player.min.js' },
12        ],
13  },
14};

We will also need to reference our Cloudinary account from our codebase. We will do this by configuring the NUXT_ENV_CLOUDINARY_CLOUD_NAME in the .env file. This is the file used to store environmental variables we don't want to be stored in our codebase for either security or portability reasons. Create the file in the root project folder.

1touch .env

Then add your cloud name. This can be located on your Cloudinary dashboard.

1NUXT_ENV_CLOUDINARY_CLOUD_NAME=<your-cloudinary-cloud-name>

Playlist with a widget from fixed source list

We will create this playlist in a component called FixedSourcePlaylist.vue located in the components folder. We will start by adding a video tag to the template section. For easy reference, let's allocate the id fixed-source-player to it. To apply the Cloudinary video player styles, we will add the cld-video-player, cld-video-player-skin-dark classes to it. As we want the videos to autoplay and the video controls to appear, we will also add autoplay and controls to the video tag.

1<!-- components/FixedSourcePlaylist.vue -->
2<template>
3    <video
4        id="fixed-source-player"
5        controls
6        autoplay
7        class="cld-video-player cld-video-player-skin-dark w-1/2 mx-auto h-96"
8    >
9    </video>
10</template>

Within our script section, we will manually store a list of the videos we want in the playlist. Here we will also initialize the video player as well as the playlist. We specify that the playlist should show the widget vertically, autoadvance, repeat, and show the upcoming video for eight seconds.

1// components/FixedSourcePlaylist.vue
2<script>
3export default {
4    data(){
5        return {
6            cld: null,
7            player:null,
8            sources:[
9                "nuxtjs-video-playlist/production_ID_3987730.mp4",
10                "nuxtjs-video-playlist/pexels-zlatin-georgiev-7173031.mp4",
11                "nuxtjs-video-playlist/pexels-taryn-elliott-5220279.mp4",
12                "nuxtjs-video-playlist/pexels-taryn-elliott-9116112.mp4",
13                "nuxtjs-video-playlist/Pexels_Videos_1526909.mp4",
14            ]
15        }
16    },
17    mounted(){
18        this.cld = cloudinary.Cloudinary.new({ cloud_name: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME, secure: true});
19
20        this.player = this.cld.videoPlayer(
21            "fixed-source-player",
22             {
23                playlistWidget: {
24                    direction:'vertical',
25                    total:5
26                }
27             }
28        );
29
30        this.player.playlist(
31            this.sources, 
32            { autoAdvance: true, repeat: true, presentUpcoming: 8 }
33        );
34    }
35}
36</script>

Let us now import this component into our homepage. We should now be able to see the video playing with the widget.

1<!-- pages/index.vue -->
2<template>
3  <div>
4    <h1 class="text-center text-2xl leading-8 font-extrabold tracking-tight text-gray-700 m-12 ">
5      Fixed source playlist with widget
6    </h1>
7    
8    <fixed-source-playlist class="m-24"/>
9  </div>
10</template>

1// pages/index.vue 
2<script>
3import FixedSourcePlaylist from '../components/FixedSourcePlaylist.vue'
4
5export default {
6  name: 'IndexPage',
7  components: { 
8    FixedSourcePlaylist, 
9  },
10}
11</script>

Playlist with widget

Tag-specific playlist without widget

As opposed to hardcoding or fetching the images from the server, we may also configure the playlist to load from a specific tag. To do so, we initialize the playlist through playlistByTag instead of playlist.

Let us first setup the html on components/TagSpecificPlaylist.vue.

1<!-- components/TagSpecificPlaylist.vue -->
2<template>
3    <video
4        id="tag-source-player"
5        controls
6        autoplay
7        class="cld-video-player cld-video-player-skin-dark w-1/2 mx-auto h-96"
8    >
9    </video>
10</template>

Let us now initialize the player, the playlist and specify the tag nvp-animals as the source. All other settings will remain the same.

1// components/TagSpecificPlaylist.vue
2<script>
3export default {
4    data(){
5        return {
6            cld: null,
7            player:null,
8        }
9    },
10    mounted(){
11        this.cld = cloudinary.Cloudinary.new({ cloud_name: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME, secure: true});
12
13        this.player = this.cld.videoPlayer("tag-source-player");
14
15        this.player.playlistByTag(
16            "nvp-animals", 
17            { autoAdvance: true, repeat: true, presentUpcoming: 8 }
18        );
19    }
20}
21</script>

Let us now import this component on our homepage as well.

1<!-- pages/index.vue -->
2<template>
3  <div>
4    <h1 class="text-center text-2xl leading-8 font-extrabold tracking-tight text-gray-700 m-12 ">
5      Fixed source playlist with widget
6    </h1>
7    
8    <fixed-source-playlist class="m-24"/>
9    
10    <h1 class="text-center text-2xl leading-8 font-extrabold tracking-tight text-gray-700 m-12 ">
11      Tag specific playlist without widget
12    </h1>
13
14    <tag-specific-playlist class="m-24"/>
15  </div>
16</template>

1// pages/index.vue
2<script>
3import FixedSourcePlaylist from '../components/FixedSourcePlaylist.vue'
4import TagSpecificPlaylist from '../components/TagSpecificPlaylist.vue'
5
6export default {
7  name: 'IndexPage',
8  components: { 
9    FixedSourcePlaylist, 
10    TagSpecificPlaylist
11  },
12}
13</script>

We should now be able to view the difference between both playlists.

Both playlists

To view additional configurations possible, feel free to go through the Cloudinary Video Player API reference.

Embedding video playlists