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-player23npx create-nuxt-app nuxtjs-video-player45npm 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-playlists23yarn dev4# OR5npm 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:
- pexels-taryn-elliott-9116112.mp4
- production_ID_3987730.mp4
- pexels-zlatin-georgiev-7173031.mp4
- Pexels_Videos_1526909.mp4
- pexels-taryn-elliott-5220279.mp4
The resultant folder should be like this:
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.js2export 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 <video4 id="fixed-source-player"5 controls6 autoplay7 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.vue2<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});1920 this.player = this.cld.videoPlayer(21 "fixed-source-player",22 {23 playlistWidget: {24 direction:'vertical',25 total:526 }27 }28 );2930 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 widget6 </h1>78 <fixed-source-playlist class="m-24"/>9 </div>10</template>
1// pages/index.vue2<script>3import FixedSourcePlaylist from '../components/FixedSourcePlaylist.vue'45export default {6 name: 'IndexPage',7 components: {8 FixedSourcePlaylist,9 },10}11</script>
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 <video4 id="tag-source-player"5 controls6 autoplay7 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.vue2<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});1213 this.player = this.cld.videoPlayer("tag-source-player");1415 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 widget6 </h1>78 <fixed-source-playlist class="m-24"/>910 <h1 class="text-center text-2xl leading-8 font-extrabold tracking-tight text-gray-700 m-12 ">11 Tag specific playlist without widget12 </h1>1314 <tag-specific-playlist class="m-24"/>15 </div>16</template>
1// pages/index.vue2<script>3import FixedSourcePlaylist from '../components/FixedSourcePlaylist.vue'4import TagSpecificPlaylist from '../components/TagSpecificPlaylist.vue'56export default {7 name: 'IndexPage',8 components: {9 FixedSourcePlaylist,10 TagSpecificPlaylist11 },12}13</script>
We should now be able to view the difference between both playlists.
To view additional configurations possible, feel free to go through the Cloudinary Video Player API reference.