The representation of content in video format has grown substantially. It’s arguably the primary means of sharing moments with the rest of the world.
YouTube is one of the many platforms online that accepts the streaming and upload of videos, making it easy to watch on any device.
This article highlights how to build a YouTube-like application using Cloudinary in Nuxt.js. A video plays muted on mobile and allows the user to listen to the audio by clicking the unmute button.
The working demo is in a CodeSandbox. Fork and run it to quickly get started.
Check out the complete [source code](https://github.com/Terieyenike/nuxt-youtube-like) for reference.
## Prerequisites
We need to have the following for this post:
- A Cloudinary account — sign up [here](https://cloudinary.com/users/register/free) for free!
- Familiarity with Vue.
- Basic knowledge of JavaScript.
## Getting started
To begin, run the following command to create a new Nuxt.js app.
npx create-nuxt-app unmute-feature
The process above presents a series of prompts that should look like this:
create-nuxt-app v4.0.0
✨ Generating Nuxt.js project in unmute-feature
Project name: accept the default, press Enter
Programming language: JAVASCRIPT
Package manager: Npm
UI framework: Tailwind CSS
Nuxt.js modules: N/A
Linting tools: N/A
Testing framework: None
Rendering mode: Universal (SSR / SSG)
Deployment target: Static (Static/Jamstack hosting)
Development tools: jsconfig.json
What is your GitHub username? <your-github-username>
Version control system: GIT
With the boilerplate files and folders in place, run the command to start the development environment accessible on `http://localhost:3000`.
# change directory to project folder
cd unmute-feature
# start the development environment
npm run dev
## Creating the YouTube-like video
Before building the YouTube unmute video feature, we'll use the Cloudinary Video Player, a JavaScript-based HTML5 video player. Navigate to the `nuxt.config.js` file and include the video player package files from the Unpkg CDN in the head object section.
export default {
...
head: {
link: [
{
href:"https://unpkg.com/cloudinary-video-player@1.9.0/dist/cld-video-player.min.css", rel:"stylesheet"
}
],
script: [
{
src:"https://unpkg.com/cloudinary-video-player@1.9.0/dist/cld-video-player.min.js",
type:"text/javascript"
}
]
}
Next, in the `pages/index.vue` file, remove the component `<Tutorial />` and add the following code.
<template>
<div>
<div class="relative">
<video id="doc-player" muted class="cld-video-player cld-fluid"></video>
<button class="absolute bg-blue-700 text-white top-0 left-0 px-3 py-2">Unmute</button>
</div>
</div>
</template>
<script>
export default {
name: 'IndexPage',
data() {
return {
player: null,
videoId: 'video-player/early_morning'
}
},
mounted() {
this.player = cloudinary.videoPlayer('doc-player', {
cloud_name: 'terieyenike',
autoplay: true,
controls: true
})
this.player.source(this.videoId)
}
}
</script>
In the code block above, we rendered the Cloudinary Video Player with the `video` tag and a `button` that allows for the unmute/mute click event. The muted attribute on the video tag mutes the video.
For the `data` object property, we pass a set of reactive data such as the `player` variable set to null and the `videoId` set to the uploaded video asset with a public ID, `early_morning`, placed in a folder called `video-player`.
Finally, we call the lifecycle hook `mounted` function after the app is mounted on the document object model (DOM). Also included within the `mounted` function is our Cloudinary cloud name and the video features such as autoplay and the player controls set to true.
Our app should look like the image below.
## Adding Button to Listen to Audio
Now that we have successfully set up the video on our browser, we need to create a function that conditionally changes the text from unmute to mute on the `button` tag based on the user interaction. Doing this will allow us to hear the video.
Let's update our code and include the `ref` parameter to the `video` and `button` tags, which will allow us to reference the HTML element attributes.
<template>
<div>
<div class="relative">
<video @click.prevent="unmuteVideo" id="doc-player" ref="video" muted class="cld-video-player cld-fluid"></video>
<button @click.prevent="unmuteVideo" ref="text" class="absolute bg-blue-700 text-white top-0 left-0 px-3 py-2">Unmute</button>
</div>
</div>
</template>
<script>
export default {
name: 'IndexPage',
...
methods: {
unmuteVideo() {
const vid = this.$refs.video
if (!vid.muted) {
this.$refs.text.textContent = "Unmute"
} else {
this.$refs.text.textContent = "Mute"
}
vid.muted = !vid.muted
}
},
}
</script>
From the code above, we have:
- `@click.prevent`: a `v-on` that listens to DOM events and prevents the reloading of the page
- The `unmuteVideo` function defined on the Vue instance triggers the `muted` attribute on the video tag, enabling us to toggle between listening to the audio or not using the refs and changing the button text on each click
- `refs`: an object that contains a property for each element pointed by the `ref` attribute defined in the `template`
With the YouTube-like video app completed, here's how it should look:
## Conclusion
This post showed us the implementation of a YouTube-like app with the "click to unmute" feature on videos, giving users control over whether to listen to the audio.
## Resources
- [Video player studio](https://studio.cloudinary.com/)
- [JavaScript video embed element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)
[](https://cloudinary.com/documentation/vue_video_manipulation#referencing_the_html_video_element)- [Referencing the HTML video element](https://cloudinary.com/documentation/vue_video_manipulation#referencing_the_html_video_element)
- [Setup video player](https://cloudinary.com/documentation/cloudinary_video_player#installation_and_setup)