How to initialize CORRECTLY the MediaPlayer Plugin?

66551

Class 7 - Our First Plugin

So far, we have been able to play our video when the page has finished to load, BUT the video is muted. Our challenge is create a button to unmute and mute again the video.

There are some ways to do this, but I am going to show you the fanciest one. When I say “fancy”, I mean “clean or understandable code”.

Add the “mute/unmute” button

The first thing we need to do is the addition of this button. To make this straigh forward, I will create a basic button.

HTML code

<main><sectionclass="main__vide-sect"><videosrc="./assets/BigBuckBunny_512kb.mp4"></video><button>Play/Stop</button><buttonclass="muteBtn">Mute/Unmute</button></section></main>

Getting access to the video

To have access to the video from the AutoPlay.js file, we need to pass the video in the config object when we initialize the AutoPlay. We do this in the main javascript file. The code in the main JavaScript file, which I named as “main.js” is the following

Main js file

const player = new MediaPlayer({ 
    el: video, 
    plugins: [
        new AutoPlay({
            media: video
        })
    ]
})

Once here, we need to make sure the AutoPlay function receives this parameter correctly. Our code in AutoPlay js file looks like this:

AutoPlay js

function AutoPlay(config){
    this.media = config.media
}

AutoPlay.prototype.run = function(){
    this.media.muted = true
    this.media.play()
}

export default AutoPlay

Adding onclick to the muteBtn

Before to add the mute/unmute action to the button, we need to create the logic to do this. This logic will be added in the AutoPlay file and looks something like this:

AutoPlay file

AutoPlay.prototype.mute = function(){
    if(this.media.muted){
        this.media.muted = false
    }else{
        this.media.muted = true
    }
}

Here I am adding a method that mute or unmute the video

The final step is the mute or unmute action to the button. We are going to do it in the main javascript file. This way, we keep consistency in the code, because all the interaction will actually happen in the main js file. Therefore, our main file looks like this:

Main js file

const muteButton = document.querySelector(".muteBtn")
muteButton.onclick = () => player.plugins[0].mute()

All the files

I am going to show you the full code for sake of a better understanding

HTML

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet"href="./styles.css"></head><body><header><h2>Platzi Media Player</h2><h3>An extensible media player</h3></header><main><sectionclass="main__vide-sect"><videosrc="./assets/BigBuckBunny_512kb.mp4"></video><button>Play/Stop</button><buttonclass="muteBtn">Mute/Unmute</button></section></main><scripttype="module"src="./main.js"></script></body></html>

Main js file

import MediaPlayer from "./js/MediaPlayer.js"import AutoPlay from "./js/Plugins/AutoPlay.js"const video = document.querySelector("video")
const button = document.querySelector("button")
const muteButton = document.querySelector(".muteBtn")


const player = new MediaPlayer({ 
    el: video, 
    plugins: [
        new AutoPlay({
            media: video
        })
    ]
})

button.onclick = () => player.play()
muteButton.onclick = () => player.plugins[0].mute()

MediaPlayer

function MediaPlayer(config){
    this.media = config.el,
    this.plugins = config.plugins

    this._initPlugins()
}

MediaPlayer.prototype._initPlugins = function(){
    this.plugins.map(plugin => {
        plugin.run()
    })
}

MediaPlayer.prototype.play = function(){
    if(this.media.paused){
        this.media.play()
    }else{
        this.media.pause()
    }
}

export default MediaPlayer

AutoPlay

function AutoPlay(config){
    this.media = config.media
}

AutoPlay.prototype.mute = function(){
    if(this.media.muted){
        this.media.muted = false
    }else{
        this.media.muted = true
    }
}

AutoPlay.prototype.run = function(){
    this.media.muted = true
    this.media.play()
}

export default AutoPlay