3 Ways to Add a Video Player in NuxtJS

Teri Eyenike

Interactive media plays a significant role in a user’s experience on a website. This experience significantly improves when videos load fast and play optimally.

This article will demonstrate how to add a video player to a Nuxt.js website in three different ways:

  • The native HTML video element
  • Open-source Video.js library
  • The Cloudinary Nuxt package

Sandbox

We completed this project in a CodeSandbox, and you can fork it to run the code.

The source code for the video player is available on GitHub.

Prerequisites

This video player tutorial suits all developers who use Vue.js and Nuxt.js as their frontend framework. The tutorial also requires the following:

  • NodeJS version 10 or above and its package manager NPM. In our terminal, verify the version number with command, node -v
  • Cloudinary account. Signup is free
  • A text editor. We recommend VS Code

Getting Started

In a directory of our choice, we run the following command to create the files and folders required to scaffold the project.

1yarn create nuxt-app video-player
2
3# OR
4
5npm init nuxt-app video-player
6
7# OR
8
9npx create-nuxt-app video-player

The above command starts a series of prompts. We can answer the questions as shown below:

1Project name: accept the default, press Enter
2
3
4Programming language: JAVASCRIPT
5
6
7Package manager: Npm
8
9
10UI framework: None
11
12
13Nuxt.js modules: N/A
14
15
16Linting tools: N/A
17
18
19Testing framework: None
20
21
22Rendering mode: Universal (SSR / SSG)
23
24
25Deployment target: Static (Static/Jamstack hosting)
26
27
28Development tools: jsconfig.json
29
30
31What is your GitHub username? <github-username>
32
33
34Version control system: GIT

Run the following command to start a local development server in the project directory.

1cd video-player
2
3yarn dev
4
5# OR
6
7npm run dev

Host videos on Cloudinary

On our Cloudinary account, we upload mp4 videos in a video-player folder using the upload button.

Also, we obtain our cloud name, API key and secret from our Cloudinary dashboard.

Setup Cloudinary in Nuxtjs

To configure Cloudinary, we need to install the package @nuxtjs/cloudinary with the command:

1yarn add @nuxtjs/cloudinary
2
3# OR
4
5npm install @nuxtjs/cloudinary

Next, add @nuxtjs/cloudinary as a module in the modules section of the file nuxt.config.js with Cloudinary configuration.

nuxt.config.js

1modules: [
2 "@nuxtjs/cloudinary"
3],
4
5// add this section
6cloudinary: {
7 cloudName: "<your-cloud-name>",
8 apiKey: "<API-Key>", // add api key in .env
9 apiSecret: "<API-Secret>", // add api secret in .env
10 useComponent: true,
11}

useComponent set to true enables the use of ready-made video Vue components.

Integrate Cloudinary Nuxt Video Player

For the first way to add a video to a Nuxt website, we create a video player using the cld-poster and cld-video Cloudinary components.

We do this by updating index.vue to include this:

pages/index.vue

1<template>
2 <div class="video-section">
3 <h1>Video Players</h1>
4 <cld-video publicId="video-player/grass-moving" controls width="450">
5 <cld-poster
6 publicId="image-placeholders/ht"
7 width="450"
8 crop="scale"
9 quality="auto"
10 />
11 </cld-video>
12 </div>
13</template>
14
15<style>
16*,
17*::before,
18*::after {
19 box-sizing: border-box;
20}
21/* Reset margins */
22body,
23h1,
24p {
25 margin: 0;
26}
27h1,
28p {
29 font-weight: 400;
30}
31body {
32 line-height: 1.5;
33 min-height: 100vh;
34}
35video {
36 max-width: 100%;
37 display: block;
38}
39.video-section {
40 padding: 1.5em 0;
41}
42</style>

The above code within the media cld-cloud component includes:

  • The publicId from the stored video in Cloudinary with the controls attribute and width transformation for the video size
  • A publicId of the video on Cloudinary
  • The cld-poster specifies a thumbnail for the video

When we run the code, we should notice a video on the browser.

This method affords us the performance benefits of media delivery with Cloudinary and also the ability to include transformations.

Integrate Video Player with the Native HTML Video Element

Next, we use the native HTML element to create the video player with JavaScript controlling the action for playing and pausing the video using refs.

We create a new file, NativeVideo.vue in the components folders, having the following content.

components/Native.vue

1<template>
2 <div class="video-section player">
3 <p>Native HTML Vdeo</p>
4 <video
5 width="450"
6 height="150"
7 ref="video"
8 poster="https://picsum.photos/450/150"
9 >
10 <source :src="src" type="video/mp4" />
11 Sorry, your browser doesn't support embedded videos.
12 </video>
13 <button title="Toggle Play" @click.prevent="togglePlay" ref="toggle">
14
15 </button>
16 </div>
17</template>
18<script>
19export default {
20 data() {
21 return {
22 src:
23 "https://res.cloudinary.com/terieyenike/video/upload/v1643266141/video-player/gushing-waterfall.mp4",
24 };
25 },
26 methods: {
27 togglePlay() {
28 const player = this.$refs.video;
29 const icon = this.$refs.video.paused ? "❚ ❚" : "►";
30 if (player.paused) {
31 player.play();
32 } else {
33 player.pause();
34 }
35 this.$refs.toggle.textContent = icon;
36 },
37 },
38};
39</script>

From the above snippet:

  • We created a data object in the Vue instance that points to the video source in the mp4 format
  • Next, we bind the video to the source element with a type of mp4. In addition, we create a togglePlay function to control the video playback using a button
  • Finally, we included a conditional statement that shows the pause/play icon on the video when clicked.

We import the created video player component to the home component. We have the following in pages/index.vue:

pages/index.vue

1<template>
2 <div class="video-section">
3 <h1>Video Players</h1>
4 <cld-video publicId="video-player/grass-moving" controls width="450">
5 <cld-poster
6 publicId="image-placeholders/ht"
7 width="450"
8 crop="scale"
9 quality="auto"
10 />
11 </cld-video>
12 <Native /> // add this
13 </div>
14</template>

Third-Party Integration with Video.js

Lastly, Video.js is a free and open-source HTML5 video player that takes care of browser incompatibility and handle responsive videos that fit different screen sizes. To use Video.js, we can either use the Content Delivery Network (CDN) or install it as a dependency using a node package manager (npm).

Next, create a new file, OpenSource.vue, in the components folder to build the video player utilizing the Video.js library.

Creating the Video Player The Video.js library works with elements of <video> and <audio>. We limit the scope of this article to cover only video elements. We proceed to add the assets provided by Video.js globally in our app. We will import the CSS and script files in the head section of nuxt.config.js.

nuxt.config.js

1export default {
2 // other file attribute
3
4 head: {
5 // other attribute here
6 link: [
7 {
8 rel: "stylesheet",
9 href: "https://vjs.zencdn.net/7.17.0/video-js.css",
10 },
11 ],
12 script: [{ src: "https://vjs.zencdn.net/7.17.0/video.min.js" }],
13 },
14}

Next, we add the following to OpenSource.vue.

components/OpenSource.vue

1<template>
2 <div class="video-section">
3 <p>Video.js open-source player</p>
4 <video
5 id="my-video"
6 class="video-js vjs-big-play-centered"
7 controls
8 preload="auto"
9 width="450"
10 height="150"
11 poster="https://picsum.photos/450/150"
12 data-setup="{}"
13 >
14 <source
15 src="https://res.cloudinary.com/hackit-africa/video/upload/v1639378752/nuxtjs-floating-video-player/pexels-lisa-9963201.mp4"
16 type="video/mp4"
17 />
18 <p class="vjs-no-js">
19 To view this video please enable JavaScript, and consider upgrading to a
20 web browser that
21 <a href="https://videojs.com/html5-video-support/" target="_blank"
22 >supports HTML5 video</a
23 >
24 </p>
25 </video>
26 </div>
27</template>

The above snippet renders a video player with a thumbnail. We also use one of the hosted videos on Cloudinary. Learn more on Video.js here.

Next, we update pages/index.vue to include the OpenSource.vue component.

1<template>
2 <div class="video-section">
3 <h1>Video Players</h1>
4 <cld-video publicId="video-player/grass-moving" controls width="450">
5 <cld-poster
6 publicId="image-placeholders/ht"
7 width="450"
8 crop="scale"
9 quality="auto"
10 />
11 </cld-video>
12 <Native />
13 <OpenSource /> // add this
14 </div>
15</template>

Conclusion

This post discussed three ways of adding a video player to a Nuxt.js website.

Each video player offers unique capabilities, and choosing one depends on the website or product requirements.

Further Reading

Teri Eyenike

Software Developer

Teri Eyenike is a software developer interested in making things simple and usable.