For video-intensive applications, recommendations are a standard feature. We see recommendations seamlessly function in video apps such as Netflix and Youtube. In this article, we will be learning how we can add them to our custom applications.
Codesandbox
The final project can be viewed on Codesandbox.
You can find the full source code on my Github repository.
Nuxt.Js App Setup
The first step is to create the scaffold of our app. We are going to be using Nuxt.Js, a popular Vue.Js framework. It boasts of being performant while giving developers an enjoyable user experience.
We will be using the create-nuxt-app utility. Ensure you have yarn or npm v5.2+/v6.1+ installed. Open the terminal in your preferred working directory:
1yarn create nuxt-app nuxtjs-video-recommendations23# OR45npx create-nuxt-app nuxtjs-video-recommendations67# OR89npm init nuxt-app nuxtjs-video-recommendations
The above command will trigger a set of setup questions. Here are our recommended defaults:
Project name: nuxtjs-video-recommendations
Programming language: JavaScript
Package manager: Yarn
UI framework: Tailwind CSS
Nuxt.js modules: N/A
Linting tools: N/A
Testing framework: None
Rendering mode: Universal (SSR/SSG)
Deployment target: Server (Node.js hosting)
Development tools: N/A
Once the setup is complete, you may enter and run your project:
1cd nuxtjs-vidoe-recommendations2345yarn dev67# OR89npm run dev
The app should now be running on https://localhost:3000.
Video setup
Before we start building, we need to ensure we have the videos we will be using. We will store our videos on Cloudinary, a media management platform with a powerful set of APIs and SDKs. Storing them on Cloudinary will reduce or app size, hosting costs while delivering the files via a Content Delivery Network (CDN), thus reducing load time. If you do not have an account, create one here.
Proceed to the media library and create a folder called nuxtjs-video-recommendations
. Within the folder, add the following videos:
You should now have a folder that resembles this:
Video player setup
The stock HTML5 video
tag does not support advanced features such as video recommendations. For this reason, we will be using Cloudinary's video player.
The setup process is really simple. All we need to do is add the video player's CSS and JavaScript files globally in our project. We will be using files hosted on the UNPKG CDN network. Let's add them to the head
section of our nuxt.config.js
file.
1// nuxt.config.js23export default {45...67link: [89...1011{ rel: 'stylesheet', href: 'https://unpkg.com/cloudinary-video-player@1.5.9/dist/cld-video-player.min.css' }1213],1415script: [1617{ src: 'https://unpkg.com/cloudinary-core@latest/cloudinary-core-shrinkwrap.min.js' },1819{ src: 'https://unpkg.com/cloudinary-video-player@1.5.9/dist/cld-video-player.min.js' },2021],2223},2425...2627}
Additionally, we also want to be able to connect our Cloudinary account to our codebase. This is by configuring our cloud name globally. To do this, we shall be adding it as an environmental variable in our .env
file. First, create the file if it doesn't exist
1touch .env
Then add your Cloudinary cloud name. You can find yours in the Account Details section of the Dashboard.
1NUXT_ENV_CLOUDINARY_CLOUD_NAME=<cloudinary-cloud-name>
Displaying our video file
Before we show our video recommendations, we need to instantiate the video player with a video to play. Let us do that now.
1// pages/index.vue23<script>45export default {67name: 'IndexPage',89data(){1011return {1213cld:null,1415player:null,1617source1: {1819publicId: "nuxtjs-video-recommendations/street",2021title:'Night Street',2223subtitle:'Street at night with traffic and pedestrians',2425description:'Street at night with traffic and pedestrians'2627},2829};3031},3233mounted(){3435this.cld = cloudinary.Cloudinary.new({3637cloud_name: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,3839secure: true,4041transformation: {crop: 'limit', width: 300, height:900}4243});44454647this.player = this.cld.videoPlayer('recommendations-player',4849{5051sourceTypes: ['mp4']5253}5455);56575859this.player.source(this.source1);6061}6263}6465</script>
In the above code, we create our Cloudinary instance, create the video player based on the recommendations-player
id, configure the video source as well as ensure that the video player loads mp4 format.
Let us now add the necessary HTML.
1<template>23<div>45<video67id="recommendations-player"89controls1011muted1213class="cld-video-player cld-video-player-skin-dark w-2/3 h-96 mx-auto"1415></video>1617</div>1819</template>
We add the cld-video-player cld-video-player-skin-dark
classes to ensure it receives the necessary CSS as well as the dark theme. We should now have a functional video player.
Right now, when the video finishes playing, we do not get any recommendations. The only action we can take is to replay the current video.
Showing video recommendations
To show recommendations, let us first add the other video sources to our data
section.
1// pages/index.vue23<script>45export default {67name: 'IndexPage',89data(){1011return {1213cld:null,1415player:null,1617source1: {1819publicId: "nuxtjs-video-recommendations/street",2021title:'Night Street',2223subtitle:'Street at night with traffic and pedestrians',2425description:'Street at night with traffic and pedestrians'2627},2829source2: {3031publicId: "nuxtjs-video-recommendations/cookie",3233title:'Cookie',3435subtitle:'Decorating a Cupcake with Gingerbread Cookie',3637description:'Decorating a Cupcake with Gingerbread Cookie'3839},4041source3: {4243publicId: "nuxtjs-video-recommendations/food",4445title:'Food',4647subtitle:'Video of a Food on Table',4849description:'Video of a Food on Table'5051},5253source4: {5455publicId: "nuxtjs-video-recommendations/plant",5657title:'plant',5859subtitle:'Close-Up of Plant With Green Leaves',6061description:'Close-Up of Plant With Green Leaves'6263},6465};6667},6869...7071};7273</script>
Now that we have all the sources, we need to set them as recommendations for the first video. We do this by creating a recommendations
object in the first video with the value of an array of the recommendations.
1// pages/index.vue23<script>45export default {67...89mounted(){1011this.source1.recommendations = [1213this.source2,1415this.source3,1617this.source41819];2021...2223},2425...2627}2829</script>
Now we just need to instruct the video player to display the recommendations. We do this by setting autoShowRecommendations
to true
.
1// pages/index.vue23<script>45export default {67...89mounted(){1011...1213this.player = this.cld.videoPlayer(1415'recommendations-player',1617{1819autoShowRecommendations: true,2021sourceTypes: ['mp4']2223}2425);2627...2829}3031}3233</script>
Now when the video ends, we should see some recommendations.
Feel free to review the Video Player API to see how to achieve more with your video assets.