How to initialize CORRECTLY the MediaPlayer Plugin?

Curso Profesional de JavaScript

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

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>
        <section class="main__vide-sect">
            <video src="./assets/BigBuckBunny_512kb.mp4"></video>
            <button>Play/Stop</button>
            <button class="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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <header>
        <h2>Platzi Media Player</h2>
        <h3>An extensible media player</h3>
    </header>

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

    <script type="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