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-recommendations
2
3# OR
4
5npx create-nuxt-app nuxtjs-video-recommendations
6
7# OR
8
9npm 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-recommendations
2
3  
4
5yarn dev
6
7# OR
8
9npm 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.js
2
3export  default  {
4
5...
6
7link: [
8
9...
10
11{ rel:  'stylesheet', href:  'https://unpkg.com/cloudinary-video-player@1.5.9/dist/cld-video-player.min.css'  }
12
13],
14
15script:  [
16
17{ src:  'https://unpkg.com/cloudinary-core@latest/cloudinary-core-shrinkwrap.min.js'  },
18
19{ src:  'https://unpkg.com/cloudinary-video-player@1.5.9/dist/cld-video-player.min.js'  },
20
21],
22
23},
24
25...
26
27}

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.vue
2
3<script>
4
5export default {
6
7name: 'IndexPage',
8
9data(){
10
11return {
12
13cld:null,
14
15player:null,
16
17source1:  {
18
19publicId:  "nuxtjs-video-recommendations/street",
20
21title:'Night Street',
22
23subtitle:'Street at night with traffic and pedestrians',
24
25description:'Street at night with traffic and pedestrians'
26
27},
28
29};
30
31},
32
33mounted(){
34
35this.cld  =  cloudinary.Cloudinary.new({
36
37cloud_name:  process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,
38
39secure:  true,
40
41transformation:  {crop:  'limit', width:  300, height:900}
42
43});
44
45  
46
47this.player  =  this.cld.videoPlayer('recommendations-player',
48
49{
50
51sourceTypes:  ['mp4']
52
53}
54
55);
56
57  
58
59this.player.source(this.source1);
60
61}
62
63}
64
65</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>
2
3<div>
4
5<video
6
7id="recommendations-player"
8
9controls
10
11muted
12
13class="cld-video-player cld-video-player-skin-dark w-2/3 h-96 mx-auto"
14
15></video>
16
17</div>
18
19</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.vue
2
3<script>
4
5export default {
6
7name: 'IndexPage',
8
9data(){
10
11return {
12
13cld:null,
14
15player:null,
16
17source1:  {
18
19publicId:  "nuxtjs-video-recommendations/street",
20
21title:'Night Street',
22
23subtitle:'Street at night with traffic and pedestrians',
24
25description:'Street at night with traffic and pedestrians'
26
27},
28
29source2:  {
30
31publicId:  "nuxtjs-video-recommendations/cookie",
32
33title:'Cookie',
34
35subtitle:'Decorating a Cupcake with Gingerbread Cookie',
36
37description:'Decorating a Cupcake with Gingerbread Cookie'
38
39},
40
41source3:  {
42
43publicId:  "nuxtjs-video-recommendations/food",
44
45title:'Food',
46
47subtitle:'Video of a Food on Table',
48
49description:'Video of a Food on Table'
50
51},
52
53source4:  {
54
55publicId:  "nuxtjs-video-recommendations/plant",
56
57title:'plant',
58
59subtitle:'Close-Up of Plant With Green Leaves',
60
61description:'Close-Up of Plant With Green Leaves'
62
63},
64
65};
66
67},
68
69...
70
71};
72
73</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.vue
2
3<script>
4
5export default {
6
7...
8
9mounted(){
10
11this.source1.recommendations  =  [
12
13this.source2,
14
15this.source3,
16
17this.source4
18
19];
20
21...
22
23},
24
25...
26
27}
28
29</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.vue
2
3<script>
4
5export default {
6
7...
8
9mounted(){
10
11...
12
13this.player  =  this.cld.videoPlayer(
14
15'recommendations-player',
16
17{
18
19autoShowRecommendations:  true,
20
21sourceTypes:  ['mp4']
22
23}
24
25);
26
27...
28
29}
30
31}
32
33</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.

Displaying video recommendations in NuxtJS