El primer plugin

Me da la impresion que lleva un ritmo muy acelerado en las clases para explicar el contenido, saltandose explicaciones necesarias para los que venimos a aprender desde 0 y habiendo echo toda la ruta de cursos basicos de JS. Es muy dificil aprender a programar desde 0 asi… pff

MediaPlayer.prototype.toggleMute = function() {
  this.media.muted = !this.media.muted
}

Práctica: plugin

‌

Antes de comenzar a diseñar nuestro plugin vamos a ver una estrategia para poder adjuntar muchos otros plugins.

‌

Vamos al código

‌

Nos dirigiremos a la función que ya hicimos llamada MediaPlayer, en ella agregaremos los plugins por el objeto de configuración.

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

‌

Debería poder funcionar este código incluso cuando no hay plugin, No está de más dar un valor inicial.

this.plugins = config.plugins ||  [];

‌

Para colocar las dos plecas verticales || usamos la combinación Alt+124.

‌

Si ya añadimos los plugins en la configuración entones ya lo podemos usar en index.js. Ya podemos parle los plugins por la instancia a la función que creamos.

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

‌

El primer plugin que vamos a agregar va a ser el que nos va a solucionar el problema del autoplay. Este plugin no existe, pero lo vamos a crear.

import AutoPlay from "./plugins/AutoPlay.js";

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

‌

No estamos seguros si nuestro plugins va a recibir parámetros pero luego vemos. Vamos a crear la carpeta y el archivo inexistente que instanciamos. Cuando usamos script con type movil tenemos que ser específicos y usar la extensión .js.

‌

En el archivo nuevo escribiremos el siguiente código:

function AutoPlay() { }

export default AutoPlay;

‌

Con esto nuestro código no tiene errores, pero tampoco tiene funcionalidades nueva. Ya lo tenemos preparado para empezar a integrar un nuevo plugin.

‌

En MediaPlayer vamos a necesito un tipo de inicialización.

function MediaPlayer(config) {
  this.media = config.el;
  this.plugins = config.plugins || [];
  this._initPlugins();
}

MediaPlayer.prototype._initPlugins = function() {
  this.plugins.forEach(element => {
    element.run()
  });
}

‌

De esta forma iteramos en cada plugin y lo inicializamos con una función llamada run(). Esta función tenemos que declararla en nuestro plugin.

function AutoPlay() { }

AutoPlay.prototype.run = function() {

}

export default AutoPlay;

‌

Necesitamos que esta función le de Play al video, pero tenemos que darle acceso. Para esto le pasamos una instancia del MediaPlayer, en el cual ejecutaremos las siguientes funciones.

AutoPlay.prototype.run = function (player) {
    player.mute()
    player.play()
}

‌

Para que la función run reciba player tenemos que pasársela en MediaPlayer usando this que representará MediaPlayer.

MediaPlayer.prototype._initPlugins = function() {
  this.plugins.forEach(element => {
    element.run(this)
  });
}

‌

No tenemos la función mute de MediaPlayer, por ende no funcionará. Vamos a crearla.

MediaPlayer.prototype.mute = function () {
  this.media.muted = true;
}

‌

Ahora crearemos un botón para que el usuario pueda mutear y desmutear cuando quiera. Para esto tenemos que crear un segundo botón en el cual llamemos por una ID ya que no será el único botón. El botón anterior también le pondremos una ID.

<button id="playPause">Play/Pause</button>
<button id="unmuteMute">Mute/Unmute</button>

‌

Llamamos correctamente a estos dos botones.

const button = document.querySelector("#playPause");
const muteUnmute = document.querySelector('#unmuteMute')

‌

Cuando le demos click llamará a la nueva función que crearemos para que haga mute y unmute.

muteUnmute.onclick  =  ()  => player.unmuteMute();

‌

El objeto player es una instancia de MediaPlayer, allí crearemos la función unmuteMute.

MediaPlayer.prototype.unmuteMute = function () { 
  this.media.muted ? this.media.muted = false : this.media.muted = true;
};

‌

De esta forma ya tendremos la funcionalidad de mutear y desmutear.

Mi versión usando ES6:

// MediaPlayer
class MediaPlayer {
  constructor({ video, plugins }) {
    this.media = video
    this.plugins = plugins || []
    this._initPlugins()
  }
  _initPlugins() {
    this.plugins.forEach(plugin => {
      plugin.run()
    })
  }
  toogleMuteUnmute() {
    this.media.muted = !this.media.muted
  }
  tooglePlayPause() {
    this.media.paused
      ? this.media.play()
      : this.media.pause()
  }
}

export default MediaPlayer

// index
import MediaPlayer from './MediaPlayer.js'
import AutoPlay from './plugins/AutoPlay.js'

const video = document.querySelector('video')
const buttonPlay = document.getElementById('play-pause')
const buttonMute = document.getElementById('mute-unmute')

const player = new MediaPlayer({ video, plugins: [ new AutoPlay(video) ] })
buttonPlay.onclick = () => player.tooglePlayPause()
buttonMute.onclick = () => player.toogleMuteUnmute()

// AutoPlay
class AutoPlay {
  constructor(video) {
    this.player = video
  }
  run() {
    this.player.muted = true
    this.player.play()
  }
}

export default AutoPlay

Si alguien tiene un error como este en la consola del navegador

Uncaught SyntaxError: Cannot use import statement outside a module

Es por que se les olvido añadir el type="module" dentro de la etiqueta script

En mi caso así queda:

El index.html lo he puesto así:

Y el llamado lo he actualizado así en el index.js

Por el momento lo he probado en los siguientes navegadores:

Google Chrome 81.0.4044.122
Mozilla Firefox 75.0
Microsoft Edge 44.19613.1000.0
Microsoft Edge Canary Chromium 84.0.495.0

Va muy rápido el curso. Si bien no es para principiantes, no se detiene a explicar mucho cada línea de código, en el editor no se alcanza a ver completo lo que escribe, y hay código que ya está antes de iniciar cada clase y toca parar el vídeo para poder incluir las líneas que te faltan.
Se vuelve tedioso de seguir cada clase.

De los peores profesores de platzi

Me parece que Richard es muy buen profesor, está claro que para iniciar este curso ya hay que tener experiencia.
Quiza no esta en un buen lugar dentro de la ruta de la carrera (el curso) pero en tan sólo 7 videos he repasado y aprendido varias cosas

Este profesor es tenaz. He intentado tomar 2 cursos con él y me frustro, siempre usa cosas que nadie sabe de donde salen, explica temas básicos haciendo uso de herramientas avanzadas, va a MIL, super acelerado, no explica las cosas con detenimiento. Me lo había guardado en un curso anterior, pero este tenía que soltarlo. No me ha pasado con ningún otro curso de Platzi.

Con todo respeto, pero el instructor del curso va muy muy rápido, este curso debería de volverse a realizar pero con otro instructor, que vaya un poco más despacio. Explica los conceptos muy por encima como si todos supieramos.

Lo tengo que pones en 0.5x para poder sobrellevar el curso, alguien mas le pasa?

Index.js

En el index.js se obtienen los elementos y se importa de otros archivos js la logica o codigo, en este caso de los prototipos de los objetos que usaremos .
Creamos una constante donde se guardara la instancia del prototipo MediaPLayer. Este Prototipo recive un objeto como argumento: un elemento video y un array de Plugins, que en este caso contiene una instancia de un nuevo Prototipo llamando Autoplay.
Por ultimo los botones mediante los eventos click llamaran a ciertas funcionalidades que tiene este objeto player.

import MediaPlayer from "./MediaPlayer.js";
import AutoPlay from './plugins/AutoPlay.js';

const video = document.querySelector("video"); 
const playButton = document.getElementById('playButton');
const muteButton = document.getElementById('muteButton');

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


playButton.onclick = () => player.togglePlay(); 
muteButton.onclick = () => player.toggleMute();

Prototipo MediaPlayer

Este prototipo recive como argumento un objeto configuracion, al momento de crear una instancia enviamos en ese objeto un elemento video y una nueva instancia de otro prototipo.

Al momento de crearse player se ejecuta el metodo inicializarPlugins que recorre el array de instancias y ejecuta en este caso el metodo run que afectara a la propia instancia player.

Finalmente se exporta el codigo al index.js para que sea leido el codigo.

function MediaPlayer(config){ 
    this.media = config.el 
    this.plugins = config.plugins || []; 


    this._initPlugins(); 
  }
  //---------------plugins initializing method----------------//
  MediaPlayer.prototype._initPlugins = function (){
      this.plugins.forEach(plugin =>{
          plugin.run(this); 
      })
  };

  //------------------play and pause method---------------//
  MediaPlayer.prototype.play = function(){ 
    this.media.play();
  };
  MediaPlayer.prototype.pause = function(){ 
    this.media.pause();
  };
  MediaPlayer.prototype.togglePlay = function(){
      if(this.media.paused){
          this.play();
      }else{
          this.pause();
      }
  };

  //-------------------Mute method-------------------//
  MediaPlayer.prototype.mute = function(){
      this.media.muted = true;
  };
  MediaPlayer.prototype.unmute = function(){
      this.media.muted = false;
  };
  MediaPlayer.prototype.toggleMute = function (){
      if(this.media.muted === true){
          this.media.muted = false;
      }else{
          this.media.muted = true;
      }
  };

Prototipo Autoplay

La instancia de este prototipo se crea en MediaPlayer al momento de crearse player y no recive ningun parametro, de momento.
En mediaPlayer se llama al metodo run de esta instancia, que lo que hace es llamar a los metodos de MediaPlayer “mute()” y “unmute()” para que sean ejecutados al momento de crearse player.

function AutoPlay(){

}
  //----------------run method-------------------//
AutoPlay.prototype.run = function (player){ 
    player.mute(); .
    player.play(); 
};

Se pueden omitir los metodos Mute y Unmute

function AutoPlay(){

}
AutoPlay.prototype.run =(player)=>{
    player.toggleMute()
    player.play()
}

export default AutoPlay;

Haciendo una negacion del estado de media.muted

MediaPlayer.prototype.toggleMute = function() {
    this.media.muted = !this.media.muted
}

Hola! Comparto mi solución:

Index.js

import MediaPlayer from './mediaPlayer.js';
import AutoPlay from './plugins/AutoPlay.js';

const video = document.querySelector('.video__item');
const buttonPlay = document.querySelector('#button__play__pause');
const buttonStop = document.querySelector('#button__stop');
const buttonMute = document.querySelector('#button__mute');
const iconPlay = document.querySelector('#icon-play');
const iconMute = document.querySelector('#icon-mute');

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

function changeStatusVideo({ media }) {
  if (media.paused) {
    iconPlay.classList.remove('icon-pause');
    iconPlay.classList.add('icon-play2');
  } else {
    iconPlay.classList.remove('icon-play2');
    iconPlay.classList.add('icon-pause');
  }
}

function changeSoundVideo({ media }) {
  if (media.muted) {
    iconMute.classList.add('icon-mute');
    iconMute.classList.remove('icon-unmute');
  } else {
    iconMute.classList.add('icon-unmute');
    iconMute.classList.remove('icon-mute');
  }
}

changeStatusVideo(player);
changeSoundVideo(player);

buttonPlay.onclick = () => {
  player.toggle();

  if (iconPlay.classList.contains('icon-play2')) {
    changeStatusVideo(player);
  } else {
    changeStatusVideo(player);
  }
};

buttonStop.onclick = () => {
  player.stop();
  changeStatusVideo(player);
};

buttonMute.onclick = () => {
  player.toggleMute();
  changeSoundVideo(player);
};

AutoPlay.js

function AutoPlay() {}

AutoPlay.prototype.run = function (player) {
  player.mute();
  player.play();
};

export default AutoPlay;

mediaPlayer.js

function MediaPlayer(config) {
  this.media = config.el;
  this.plugins = config.plugins || [];

  this.initPlugins();
}

MediaPlayer.prototype.initPlugins = function () {
  this.plugins.forEach((plugin) => {
    plugin.run(this);
  });
};

MediaPlayer.prototype.play = function () {
  this.media.play();
};

MediaPlayer.prototype.stop = function () {
  this.media.load();
};

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

MediaPlayer.prototype.mute = function () {
  this.media.muted = true;
};

MediaPlayer.prototype.toggleMute = function () {
  if (this.media.muted) {
    this.media.muted = false;
  } else {
    this.media.muted = true;
  }
};

export default MediaPlayer;

Fue un poco complejo pero lo logré, con innerHtml logré hacer las dos funciones con botones interactivos:
Reproduciendo con Sonido

Reproduciendo sin sonido

Video Pausado

Codigo:

HTML

<div class="controls">
        <div id="play"><i  id="pauseI" class="far fa-pause-circle icon"></i></div>
        <div id="mute"><i class="fas fa-volume-mute icon"></i></div>
</div>

index.js

  const buttonPlay = document.querySelector('#play');
  const buttonMute = document.querySelector('#mute');
  buttonPlay.onclick = () => player.togglePlay();
  buttonMute.onclick = () => player.toggleMute();

mediaplayer.js

  MediaPlayer.prototype.mute = function(){this.media.muted = true;}
  MediaPlayer.prototype.unmute = function(){this.media.muted = false;}
  MediaPlayer.prototype.toggleMute = function(){
    if(this.media.muted == true){
      console.log("x")
      document.querySelector('#mute').innerHTML = '<i class="fas fa-volume-off icon"></i>'
      this.unmute();
    }else{ 
      console.log("z")
      document.querySelector('#mute').innerHTML = '<i class="fas fa-volume-mute icon"></i>'
      this.mute();
    } 
  }

Siento que este curso no tiene ni pies ni cabeza, no se sabe explicar bien, comienza con código ya hecho y da por hecho que tienes el proyecto, es siempre preferible que se vea como construye el proyecto de 0 tomándose el tiempo de explicar e ir paso a paso, no es muy buen curso desde mi punto de vista

Quiero defender el curso pues me encantó, eso sí llevo ya 2 años en javascript. Este curso es excelente para gente que lleva ya un tiempo de experiencia, que en la práctica programa en nivel intermedio, no es para hacer de forma seguida los cursos de basico hasta este de profesional. Es necesario se den un tiempo para ganar experiencia para que este curso les sirva. Saludos

Compañeros creo que algunos quienes empezamos de 0 los curso de la escuela de JavaScript. Quizá en este punto donde nos encontramos un profesor que da por sentado que todos ya tenemos un manejo de todos los conceptos, puede ser dificil. Pues la manera como explica es muy avanzada, lo cual no desmerita sus capacidades. Por otra parte, estos cursos los que están haciendo de nosotros es el que seamos mas autodidatas, y si no entendemos deberemos o volver a ver el video, buscar recursos en internet o iniciar el curso desde la primera clase.

He tenido que iniciar la clase con esta dos veces, estoy acostrumbrado a los prefesores de los antiguos cursos, que van explicando linea por linea, que significa cada escrito del codigo que van dando, y a ellos agradecerles de todo corazón por su forma de explicar. Para este caso y donde todo se va poniendo mas complejo, este es un nuevo reto, de quiza salir de esa metodología y tratar de entender lo que este profesor dicta. Este curso es de mas o menos 2019, y si permanece acá es por que de seguro es muy bueno. Entonces hagamos un esfuerzo por entender quiza en clases mas adelante, la cosa se pone mucho mejor para nosotros.

Saludos y metamole toda la moral que vamos a ser uno excelentes desarrolladores. Un abrazo y fuerza que falta poco!

Reto botón de mute:

index.js

const muteButton = document.querySelector('#btn-mute');
muteButton.onclick = () => player.toggleMute();

MediaPlayer.js

MediaPlayer.prototype.toggleMute = function () {
  this.media.muted ? this.unmute() : this.mute()
}

Les dejo el mismo código pero escrito con clases. Si lo se, las clases en JS son solo una forma linda de escribir los prototipos. Aun así me parece mas correcto hacerlo con clases por convención y porque queda un código mas legible para terceros, mas limpio

MediaPlayer.js:

class MediaPlayer {
  constructor(config) {
    this.media = config.el;
    this.plugins = config.plugins || [];
    this._initPlugins();
  }
  _initPlugins() {
    this.plugins.forEach(plugin => {
      plugin.run(this);
    });
  }
  play() {
    this.media.play();
  }
  pause() {
    this.media.pause();
  }
  togglePlay() {
    this.media.paused ? this.play() : this.pause();
  }
  mute() {
    this.media.muted = true;
  }
  unmute() {
    this.media.muted = false;
  }
  toggleMuted() {
    this.media.muted ? this.unmute() : this.muted();
  }
}

AutoPlay.js:

class AutoPlay {
    constructor() {
    }
    run(player) {
        player.mute();
        player.play();
    }
}

export default AutoPlay;

Sigo viendo el curso porque esta en la ruta de javascript , de react,de angular ,etc. pero el profesor no motiva y siento que se enreda explicando.

Porqué el método “_initPlugins” se inició con un guión bajo?

Siento tener que decir, que creo q el profesor puede ser un gran profesional de javascript pero llevo hechos todos los cursos de la escuela de javascript hasta ahora, y desde luego supone un salto cuántico el contenido d este curso.

He sido profesional de la formación informática durante muchos años y tengo critero para decir q el formador peca de lo q pecan las personas q dominan una materia pero q no entienden q enseñar no consiste en saber mucho y hacer una demostración de conocimientos. Eso está bien para hacer una prueba de trabajo, pero no para ser formador.

Desgraciadamente, faltan desde mi punto de vista:

-progresión en la escuela de javascript cuando se aborda este curso.

-ser mas didáctico por parte del formador:
->explicar más despacio: MUY IMPORTANTE PARA
DEDICARSE A LA FORMACIÓN.

->explicaciones más en profundidad de las estructuras q 
    utiliza no vistos en otros cursos anteriores.
	ejemplo:
		objetos con funciones....

-> No se puede saltar de un lado a otro del código cuando 
        uno da clases comentando y descomentando código y a 
        esa velocidad si se quiere ser didáctico.

en resumen:

se puede hacer un curso profesional de javascript pero eso no significa que el nivel de dificultad implique marcar una distancia entre formador y alumno y que mas que ser un curso, sea un alarde de conocimientos.

un saludo.

Los Plugins (o plug-ins) son pequeños fragmentos de software que interactúan con el navegador para proporcionar algunas funciones que en la mayoria de los casos son muy especificas. Ejemplos tipicos de plugins son los usados para mostrar los distintos formatos gráficos, o para reproducir ficheros multimedia. Los plugins son ligeramente diferentes de las Extensiones, que modifican o se añaden a funcionalidades ya existentes.

Ya veo, para que un plugin pueda tener acceso al elemento, hay que pasarle dicho contexto.

Podriamos pedir que el curso se actualice y lo haga Oscar Barajas?

Siento que me está costando más trabajar con los distintos archivos, export, import, que con la lógica del código en sí

Entiendo que sea un curso profesional, pero estamos siguiendo la ruta de desarrollo web de platzi y no estamos tan preparados para todas estas cosas.

No me gusta la forma de desarrollo de: creamos todo y nos saca 100 errores y luego solucionamos, prefiero : crear y luego importar 😕

 <!--BOTÓN PARA Subir volumen -->
 <button id="upvolumebutton">Subir Volumen</button>

<!--BOTÓN PARA Bajar volumen -->
<button id="downvolumebutton">Bajar Volumen</button> 
 

const upvolume = document.querySelector('#upvolumebutton')
const downvolume = document.querySelector('#downvolumebutton')

upvolume.onclick = () =>player.volumeup();
downvolume.onclick = () =>player.volumedown();

 /* FUNCIÓN PARA  SUBIR VOLUMEN */
  MediaPlayer.prototype.volumeup = function () { 
    this.media.volume += 0.03; 
  };
 /* FUNCIÓN PARA  BAJAR VOLUMEN */
  MediaPlayer.prototype.volumedown = function () { 
    this.media.volume -= 0.03; 
  };

Saludos!

Así lo resolví yo

const buttonToggleMute = document.querySelector('#toggleMute');
buttonToggleMute.onclick = () => player.toggleMute();

MediaPlayer.prototype.toggleMute = function() {
  this.media.muted = !this.media.muted
}

Aquí el reto

Botón

<button id="btnSound">Mute/Unmuted</button>

index.js

const buttonSound = document.querySelector('#btnSound')
buttonSound.onclick = () => player.toggleMute()

MediaPlayer.js

MediaPlayer.prototype.toggleMute = function () {
  this.media.muted = !this.media.muted
}

Cualquier sugerencia para mejorar el código es bienvenida.

Le falta mucho a este, como docente

Fue un largo tiempo y difícil comprender lo que hizo. Pero se logró! Lo que me llama la atención del curso es que puedes escribir lo que hizo y después desentrañar poco a poco y entender cada palabra del código. Eso me ayuda a interiorizar muchas cosas.

Aquí la solución al reto:

Nuevo botón con id en el index.html:

<button id="play">Play/Pause</button>
<button id="mute">Mute/Unmute</button> 

Agrego el botón al index.js con su respectivo id

const buttonPlay = document.querySelector("#play");
const buttonMute = document.querySelector("#mute");
 

Agrego funcionalidad al botón al final del index.js

buttonPlay.onclick = () => player.togglePlay();
buttonMute.onclick = () => player.toggleMute();
 

El de play ya está definido. Defino el de mute, unmute en el MediaPlayer.js

MediaPlayer.prototype.toggleMute = function () {
  this.media.muted ? this.unmute() : this.mute();
  // this.media.muted = !this.media.muted; // Esta es otra forma de hacerlo que ví en los comentarios
}; 

No entiendo nada 😡

¡Reto aceptado!

index.html

<button id="container__boton--mute">Mute</button>

index.js

const buttonMute = document.querySelector('#container__boton--mute')
buttonMute.onclick = () => player.toggleMute()

MediaPlayer.js

MediaPlayer.prototype.toggleMute = function() {
  if (this.media.muted) {
    this.unmute()
  } else {
    this.mute()
  }
};

Hola, un saludo.
Espero que alguien de Platzi pueda leer esto. Me uno a los comentarios que otros compañeros/as en los cuales se expresa loa rapidez, la falta de estructura y la poca pedagogía del curso. Es verdad que es un cursos profesional y que seguro personas con experiencia lo pueden seguir, pero aquellos que comenzamos puede ser resultar abrumador, sobre todo por la falta de pedagogía ya mencionada.
Este curso debería estar fuera de la ruta para los que apenas nos iniciamos.
Lo dicho solo expresa una postura que quiere evitar el desánimo. De igual forma agradezco a la comunidad de compañeros que hacen todo lo posible por apoyar con sus comentarios.
saludos

Pienso que es necesario explicar un poco mas a fondo cada metodo de los planteados en los videos, es muy tedioso tratar de entender cuando hay que devolver el video cada 3 segundos, escribir el codigo (Que el escribe bastante rapido) y entenderlo, porque richard da la clase a MIL.

Siguiendo el código usando las Clases

Index.html

<button id="muted-button">Muted</button>

Index,js

const muted = document.querySelector('#muted-button');
muted.onclick = () => player.toggleMute();

MediaPlayer.js

class MediaPlayer {
    constructor(videoConfig) {
      this.video = videoConfig.element;
      this.plugins = videoConfig.plugin || [];

      this._initPlugins();
    }

    _initPlugins(){
      this.plugins.forEach(plugin => {
        plugin.run(this.video);
      });
    }

    play() {
      this.video.play();
    }

    pause() {
      this.video.pause();
    }

    togglePlay() {
      this.video.paused
        ? this.video.play()
        : this.video.pause()
    }

    toggleMute(){
      this.video.muted
        ? this.video.muted = false
        : this.video.muted = true
    }
}

export default MediaPlayer;

AutoPlay.js

class AutoPlay{
    run(player){
        player.muted = true;
        player.play();
    }
}

export default AutoPlay;

reto cumplido 😄

en index.html

<button class="mute">Mute/Unmute</button>

en index.js

const mute = document.querySelector(".mute");

 mute.onclick = () => player.toggleMute();

en MediaPlayers.js

toggleMute(){
      if(this.media.muted){
        this.media.muted = false;
      } else {
        this.media.muted = true;
      }
    }

Solucion al reto:

En MediaPlayer.js reemplazar el metodo de mute y unmute y crear un metodo toogleMute:

MediaPlayer.prototype.toogleMute = function () {
  this.media.muted = !this.media.muted;
};

En index.html agregar el nuevo boton y agergarle un ID para poder buscarlo despues:

      <button id="tooglePlay">Play/Pause</button>
      <button id="toogleMute">Mute/Unmute</button>

En index.js buscar los botones y ejecutar el metodo correcto en cada uno de los eventos .onClick

const tooglePlayButton = document.getElementById('tooglePlay')
const toogleMuteButton = document.getElementById('toogleMute')

const player = new MediaPlayer({ el: video, plugins: [new AutoPlay()]});
tooglePlayButton.onclick = () => player.tooglePlay();
toogleMuteButton.onclick = () => player.toogleMute();

INDEX.HTML

<button name="mute">Mute/Unmute</button>

INDEX.JS

const button = document.querySelector("button[name='play']")
const button2 = document.querySelector("button[name='mute']")
button.onclick = () => player.togglePlay();
button2.onclick = () => player.toggleMute();

MEDIAPLAYER.JS

MediaPlayer.prototype.toggleMute = function () {
  if (this.media.muted == true) {
    this.unmute();
  } else {
    this.mute();
  }
}

Agrego una porción de código que resume el mute y unmute en una sola función por si ah alguien se le hace útil

**

Mi recomendacion es que tomen el curso 2 veces, que traten de entender lo que se explica y tomar nota y la segunda vez que lo tomen podran ver las cosas con un panorama mas amplio y entendible. Saludoss!

Mi reto:
index.js

import MediaPlayer from './MediaPlayer.js';
import AutoPlay from './plugins/AutoPlay.js';

const video = document.querySelector('video');
const btnplay = document.getElementById('play');
const btnmuted = document.getElementById('muted');

const player = new MediaPlayer({
  el: video, plugins: [
    new AutoPlay()
] });
btnplay.onclick = () => player.play();
btnmuted.onclick = () => player.muted();

Método Mutend y unMutend de VideoPlayer:

MediaPlayer.prototype.muted = function () {
  this.media.muted ?
    this.unmuted() :
    this.media.muted = true;
}

MediaPlayer.prototype.unmuted = function () {
  this.media.muted = false;
}

Este estilo de desarrollo es la esencia de TDD

index.js

const btnMuted = document.querySelector('#muteButton');
btnMuted.onclick = () => player.toggleMuted();

MediaPlayer

function MediaPlayer(config) {
  this.media = config.el;
  this.plugins = config.plugins || [];

  this._initPlugins();
}

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

MediaPlayer.prototype.play = function() {
  this.media.play();
}

MediaPlayer.prototype.pause = function() {
  this.media.pause();
}

MediaPlayer.prototype.togglePlay = function() {
  this.media.paused ? this.play() : this.pause();
}

MediaPlayer.prototype.mute = function() {
  this.media.muted = true;
}

MediaPlayer.prototype.unmute = function() {
  this.media.muted = false;
}

MediaPlayer.prototype.toggleMuted = function() {
  this.media.muted ? this.unmute() : this.mute();
}

export default MediaPlayer;

Si agregan la tercer linea de codigo el video se va a reproducir con sonido al cargar la pagina

AutoPlay.prototype.run = function(player) {
    player.mute();
    player.play();
    document.addEventListener("DOMContentLoaded", (event) => player.unmute());
}

Yo insisto en que, cuando versionen este curso, utilicen de una vez clases, asi como Sacha, en el curso de js basico

He seguido la ruta web y vengo desde cero, me resisti de hacer comentarios las clases pasadas, trate de entender lo mas que pude y gracias a la comunidad y cursos pasados lo hice pero estas clases si necesitan organizacion, espero se pueda hacer algo para que sean mas claras!

Frustración, genera este curso, no porque el profesor no sepa, sino porque la metodología es dificil y mas para personas que apesar de ir en esta ruta no tenemos la experticia del señor, genera que uno se cuestione mucho, sobre si aprendio o no, pero cuando se ve los comentarios abajo, se nota que es sensacion de todos si alguien de platzi ve esto deberian ajustarlo, llevo mas de 48h en solo unos cuentos videos, leer y repetir mil veces hasta medio aceptar algo.

Mi resolución del desafío.
Puedo modificar el símbolo del botón cuando lo presiono (Play/Pausa, Mute/unMute).

index.html

    <video class="movie">
        <source src="./assets/BigBuckBunny.mp4" />
      </video>
      <button id="playButton">Play ></button>
      <button id="muteButton">🔇</button>

index.js

import MediaPlayer from "./MediaPlayer.js";
import AutoPlay from "./plugins/autoplay.js";

const video = document.querySelector("video");
const buttonPlay = document.getElementById("playButton");
const buttonMute = document.getElementById("muteButton");

const player = new MediaPlayer({
  media: video,
  btnPlay: buttonPlay,
  btnMute: buttonMute,
  plugins: [new AutoPlay()],
});

buttonPlay.onclick = () => player.play();
buttonMute.onclick = () => player.mute();

MediaPlayer.js

//VSCode me sugirió usar clases, así que las apliqué :)

class MediaPlayer {
  constructor(config) {
    this.media = config.media;
    this.buttonPlay = config.btnPlay;
    this.buttonMute = config.btnMute;
    this.plugins = config.plugins || []; //Si no viene nada, lo inicia vacio []
    this.initPlugins();
  }
  play() {
    if (this.media.paused) {
      this.media.play();
      this.buttonPlay.innerHTML = "⏸";
    } else {
      this.media.pause();
      this.buttonPlay.innerHTML = "▶";
    }
  }

  mute() {
    if (this.media.muted == true) {
      this.media.muted = false;
      this.buttonMute.innerHTML = "🔇";
    } else {
      this.media.muted = true;
      this.buttonMute.innerHTML = "🔊";
    }
  }

  initPlugins() {
    this.plugins.forEach((plugin) => {
      plugin.run(this);
    });
  }
}

export default MediaPlayer;

autoplay.js

class AutoPlay {
  constructor() {}
  run(player) {
    player.mute();
    player.play();
  }
}

export default AutoPlay; 

Mi solución al reto:
1.Agrego un botón y un id para identificarlo en el index.html

<button id="btn-mute">mute</button>

Dentro del archivo index.js
2. Declaro e inicializo una constante con el objeto del documento:

const btnButton = document.querySelector('#btn-mute');

1. Creo la funcion onclick:

btnButton.onclick = () => player.toggleMute();

Dentro de MediaPlayer.js
4. Creo el prototipo de MediaPlayer con un operador ternario (similar al if condicion ? se cumple : no se cunple)

MediaPlayer.prototype.toggleMute = function() {
    this.media.muted ? this.media.muted = false : this.media.muted = true;
    
}

Siento que acabo de comprimir años de estudio en 6 minutos y medio, es impresionante el nivel de este curso

Les brindo una pequeña contribución,

Podemos simplificar algunas líneas de código en la parte de play y en mute del prototype:

mediaPlayer.prototype.play = function(){

    this.video.paused ? this.video.play() : this.video.pause();
    this.boton.innerHTML = this.video.paused ? 'Play' : 'Pause';
}

mediaPlayer.prototype.mute = function(){

    this.video.muted = !this.video.muted;
    this.muteButton.innerHTML = this.video.muted ? 'Unmute' : 'Mute';
}

Lo único adicional es que también estoy cambiando el texto del botón a play/pause y mute/unmute

para hacer eso, en el config debemos pasar el boton y boton mute para hacer la referencia y claramente cambiar los textos anteriormente mencionados

Wow, esto me está gustando, la forma de agregar plugins es increíble!

Hoy el lenguaje ha avanzado muchisimo, pero este curso no deja de ser una joyita, podemos aplicar todo lo aprendido aqui usando las nuevas extensiones del lenguaje y mejores practicas. Es un excelente profesor, bastante profesional. Tomense su tiempo a practicar y construir apps sencillas con JS antes de pasar a este, no se trata de solo ir sacando los cursos y sus certificados.

Si tenéis problemas para seguir este curso seguramente es que venís de la escuela de javascript.

Para entender bien este curso, lo mejor es hacer antes los cursos de ECMAS 6, motor v8 y asincronismos, disponibles en la escuela de desarrollo web.

Al menos a mi me sirvió.

Yo hice el curso de JavaScript básico, pero se me ha hecho difícil entender estas clases, hay muchas cosas que para el profesor ya uno sabe pero en el básico no se explico de esa manera. Me a tocado googlear y algunos compañeros que explican las con notas.

Despues de estar leyendo, relacionando y entendiendo el codigo de los diferentes modulos pude darme cuenta de que para que se me pueda iniciar el video y para que inície en mute debí poner player._initPlugins() justo despues de haber declarado player.
fue curioso porque primero pude completar el reto pero mi segundo reto fue hacer que se inicie automaticamente y en mute asi como al profe pero con lo que comenté arriba lo pude solucionar. adjunto mis codigos.
HTML

<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>PlatziMediaPlayer.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link
      rel="stylesheet"
      href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
    />
    <link rel="stylesheet" href="./assets/index.css" />
  </head>

  <body>
    <header>
      <h1>PlatziMediaPlayer.js</h1>
      <p>An extensible media player.</p>
    </header>

    <main class="container">
      <video class="movie">
        <source src="./assets/BigBuckBunny.mp4" />
      </video>

      <button class="play-button">Play/Pause</button>
      <button class="mute-button">Mute/Unmute</button>
    </main>

    <script type="module" src="/assets/index.js"></script>
  </body>
</html>
 

index.js

import MediaPlayer from './MediaPlayer.js'
import AutoPlay from './plugins/AutoPlay.js'
const video = document.querySelector("video")
const playButton = document.querySelector(".play-button")
const muteButton = document.querySelector(".mute-button")


const player = new MediaPlayer({el: video, plugins:[new AutoPlay()]})
player._initPlugins()
playButton.onclick = function(){
    player.play()

}
muteButton.onclick = function(){
    player.mute()
} 

MediaPlayer.js

class MediaPlayer{
    constructor(config){
        this.media = config.el
        this.plugins = config.plugins || []

    }
    play(){
        if (this.media.paused){
            this.media.play()
        }else{
            this.media.pause()
        }
    }
    _initPlugins(){
        this.plugins.forEach(plugin => {plugin.run(this)})
    }
    mute(){
        if (this.media.muted == true) {
            this.media.muted = false
        } else {
            this.media.muted = true
        }
    }
}
export default MediaPlayer

AutoPlay.js

class AutoPlay {
    constructor() {}
    run(player){
        player.mute()
        player.play()
    }
}
export default AutoPlay;

No sé que impresión tengan los demás compañeros, pero me parece que el curso está algo desactualizado, repasando conceptos que se les puede dar una mejor solución a partir de mejoras agregadas a Ecmascript. Recomendaría utilizar este curso para repasar y aprender de las clases donde se explican conceptos, pero no centrarse tanto en las prácticas de código

Un pequeño concepto:Los Plugins (o plug-ins) son pequeños fragmentos de software que interactúan con el navegador para proporcionar algunas funciones que en la mayoría de los casos son muy específicas. Ejemplos típicos de plugins son los usados para mostrar los distintos formatos gráficos, o para reproducir ficheros multimedia.

Fuente: MDN

Mi codigo:
HTML

<video class="movie" width="700" height="400">
  <source src="./assets/video.mp4"/>
</video>

<button id="play">Play/Pause</button>
<button id="mute">Mute/Unmute</button>

index.js

import MediaPlayer from './MediaPlayer.js'
import AutoPlay from './plugins/AutoPlay.js'

const video = document.querySelector('.movie')
const btnPlay = document.querySelector('#play')
const btnMute = document.querySelector('#mute')

const player = new MediaPlayer({el: video, plugins: [new AutoPlay()]})
btnPlay.onclick = () => player.togglePlay()
btnMute.onclick = () => player.toggleMute()

MediaPlayer.js

class MediaPlayer {
  constructor(config) {
    this.media = config.el
    this.plugins = config.plugins || []

    this._initPlugins()
  }

  _initPlugins = () =>
    this.plugins.forEach(plugin => plugin.run(this))

  play = () => this.media.play()
  pause = () => this.media.pause()
  mute = () => this.media.muted = true
  unmute = () => this.media.muted = false
  
  togglePlay = () => (this.media.paused) ? this.play() : this.pause() 
  toggleMute = () => (!this.media.muted) ? this.mute() : this.unmute()
}

export default MediaPlayer

AutoPlay.js

export default class AutoPlay {
  run = player =>  {
    player.mute()
    player.play()
  }
}

Dios mio que dificil de procesar todo esto a quemarse el coco 🤯

Se nota que es un teso en javascript, de eso no cabe duda, pero de ser un gran programador a explicar lo que sabe hacer, hay una gran diferencia, y pienso que lo de explicar no se le da muy bien…

Mi solución al reto
.
HTML

    <button class="play">Play/Pause</button>
    <button class="mute">Mute/Unmute</button>

.
index.js

const button1 = document.querySelector('.play')
button1.onclick = () => player.togglePlay();
const button2 = document.querySelector('.mute')
button2.onclick = () => player.toggleMute()

.
MediaPlayer.js

MediaPlayer.prototype.play = function() {
  this.media.play();
}

MediaPlayer.prototype.pause = function() {
  this.media.pause();
}

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

MediaPlayer.prototype.mute = function() {
  this.media.muted = true
}

MediaPlayer.prototype.unmute = function() {
  this.media.muted = false
}

MediaPlayer.prototype.toggleMute = function() {
  if(this.media.muted) {
    this.unmute()
  } else {
    this.mute()
  }
}

.
Para los que no sepan como hacerlo o les cueste como a mi, espero que les sea de ayuda

Reto:

en index.html (donde está el video y el boton play) creo otro button y lo diferencio del primero con el class

<main class="container">
    <video class="movie">
      <source src="./assets/BigBuckBunny.mp4" />
    </video>

    <button class="play">Play/Pause</button>
    <button class="mute">Mute</button>
  </main>

En index.js creo la constante buttonPlay y le asigno el onclick

import MediaPlayer from './MediaPlayer.js' //importamos mediaPlayer para darle ejecución 
//import MediaPlayer , {foo} from './MediaPlayer.js' se importa dos objetos del mismo arvhico (el defaulto normal, el no-default entre llaves)
import AutoPlay from './plugins/AutoPlay.js' //primer pluggin resuelve el problema del autoplay

const video = document.querySelector("video");
const button = document.querySelector(".play");
const buttonPlay = document.querySelector(".mute");

const player = new MediaPlayer({ el: video, plugins:[ new AutoPlay ()] }); //{} todo dentro de las llaves se considera un objeto
button.onclick = () => player.togglePlay();
buttonPlay.onclick = () => player.toggleMute();

y en MediaPlayer.js añado toggleMute (pd: aqui al trabajar con booleanos simplemente se le igual a la negación de su valor inicial

//separamos el objeto mediaPlayer para mantener un orden
function MediaPlayer(config) {
    this.media = config.el;
    this.plugins = config.plugins || []; // || [] valor inicial para que de incluso cuando no hay plugins; los plugins llegan a traves de su objeto de configuracion

    this._initPlugins(); //inicializar pluggins
}


MediaPlayer.prototype._initPlugins = function () {
    this.plugins.forEach(plugin => { //recorre todos los plugins
        plugin.run(this); //ejecuta los pluggins llamando un metodo especifico (run); this hace referencia a si mismo
    })
}

MediaPlayer.prototype.play = function () { //añade metodos a la funcion MediaPlayer
    this.media.play();
}
MediaPlayer.prototype.pause = function () { //añade metodos a la funcion MediaPlayer
    this.media.pause();
}
MediaPlayer.prototype.togglePlay = function () { //evaluar si esta en pause o no
    this.media.paused
        ? this.play()
        : this.pause()
}
MediaPlayer.prototype.mute = function () { //evaluar si esta en pause o no
    this.media.muted = true;
}
MediaPlayer.prototype.unmute = function () { //evaluar si esta en pause o no
    this.media.muted = false;
}
MediaPlayer.prototype.toggleMute = function () { //evaluar si esta en mute o no
    this.media.muted = !this.media.muted
}

export default MediaPlayer; //exportamos por defecto al objeto mediaPlayer para su correcto uso
//export const foo = 'soy otro valor a exportar'; en caso de querer importar otro valor que no es por defecto

Reto solucionado:

mediaPlayer.prototype.togglePlay = function() {
  const btn = document.getElementById('playButton');
  if(this.media.paused){
    this.play();
    btn.innerHTML = "||";    
  } else {
    this.pause();
    btn.innerHTML = "|>";
  }
}

Challenge done!

Incluí:
Index.js

<main class="container">
            <video class="movie">
                <source src="./assets/BigBuckBunny.mp4">
            </video>

            <button class="play">Play/Pause</button>
            <button class="mute">Mute/Unmute</button>
        </main>

index.js

// pasamos el selector button
const button = document.querySelector("button.play")
const buttonMute = document.querySelector("button.mute")

// ejecutar el video con el boton 
button.onclick = () => player.tooglePlay();

// Mute and unmute 
buttonMute.onclick = () => player.toogleMute();

MediaPlayer.js

MediaPlayer.prototype.mute = function() {
    this.media.muted = true;
}
MediaPlayer.prototype.unmute = function() {
    this.media.muted = false;
}

MediaPlayer.prototype.toogleMute = function() {
    console.log(this.media.muted);
    
    (this.media.muted === false)
        ? this.mute()
        : this.unmute()
}

Esta clase estuvo un poco pesado

Por alguna razón el autoplay me funcionó sin mutear 🤔

Mi solución:

const muteButton = document.getElementById("muteButton");

muteButton.onclick = () =>
  player.media.muted ? player.unmute() : player.mute();

HTML:

INDEX.JS

AutoPlay.js:

Comparto mi Solución:

Reto

MediaPlayer.prototype.toggleMute = function() {
    if(this.media.muted){
        this.unmute()
    }else
        this.mute();
}```

const mute = document.querySelector(".mute-btn")```

        <button class="mute-btn">mute/unmute</button>

index.html:

<button id="toggleMute">Mute</button>

MediaPlayer.js:

MediaPlayer.prototype.toggleMute = function() {
  this.media.muted = !this.media.muted;
}

index.js:

const muted = document.querySelector('#toggleMute');
muted.onclick = () => player.toggleMute();

class AutoPlay {

    run(player) {
        player.silenciar();
        player.reproducir();

    }
}

export default AutoPlay;```

MediaPlayer.js

export default class MediaPlayer {
    constructor(config) { 
        this.media = config.el;
        this.plugins = config.plugins || [];
        
        this._initPlugins();
    };

    _initPlugins() {
        this.plugins.forEach(plugin => {
            plugin.run(this);
        });
    }
    play() {
        this.media.play();
    };
    pause() {
        this.media.pause();
    };
    togglePlay() {
        this.media.paused === false ? this.pause() : this.play();
    };
    mute() {
        this.media.muted = true;
    };
    unmute() {
        this.media.muted = false;
    }
    toggleSound() {
        this.media.muted === true ? this.unmute() : this.mute();
    }
};

index.js

import MediaPlayer from './MediaPlayer.js';
import AutoPlay from './plugins/AutoPlay.js';


const video = document.querySelector("video");
const videoButton = document.getElementById("playButton");
const audioButton = document.getElementById("muteButton");
const player = new MediaPlayer({ el: video,  plugins: [
    new AutoPlay()
]});

videoButton.onclick = () => player.togglePlay();
audioButton.onclick = () => player.toggleSound();

Código para mutear el vídeo:
HTML:

<button id="mute">Mutear</button>

JS:

const mute = document.getElementById('mute')
mute.onclick = () => player.ToggleMute()
MediaPlayer.prototype.ToggleMute = function () {
      this.media.muted ? this.unMute() : this.mute()
  }

index.html

<button id="btnMute">Mute/Unmute</button>

index.js

const buttonMute = document.querySelector("#btnMute");
buttonMute.onclick = () => player.toggleMute();

assets/plugins/MediaPlayer.js

MediaPlayer.prototype.toggleMute = function() {
  if (this.media.muted) {
    this.unmute();
  } else {
    this.mute();
  }
};

#Agregar boton de mute

• Html

 <button id="playOrPause">Play/Pause</button>
  <button id="muteOrUnmute">Mute/Unmute</button>

• MediaPlayer.js

MediaPlayer.prototype.isMuted = function() {
  return this.media.muted;
};

MediaPlayer.prototype.mute = function() {
  return (this.media.muted = true);
};

MediaPlayer.prototype.unmute = function() {
  return (this.media.muted = false);
};

• Index.js

import MediaPlayer from "./MediaPlayer.js";
import AutoPlay from "./plugins/AutoPlay.js";

const video = document.querySelector("video");
const playOrPause = document.getElementById("playOrPause");
const muteOrUnmute = document.getElementById("muteOrUnmute");
const player = new MediaPlayer({ el: video, plugins: [new AutoPlay()] });

playOrPause.onclick = () =>
  player.isPaused() ? player.play() : player.pause();
muteOrUnmute.onclick = () =>
  player.isMuted() ? player.unmute() : player.mute();

Para el reto incorporo un boton en HTML

    <button id="mute">Sonido</button>

Al mismo lo inicializo en index.js

const mute = document.getElementById('mute');
mute.onclick = () => player.mute();

Agrego la funcionalidad con un prototype

  MediaPlayer.prototype.mute = function(){
    if(this.media.muted){
      this.unmuted()
    }else{
      this.muted()
    }
  };

Y listo

Reto:
index.html

<button id="play">Play/Pause</button>
<button id="mute">mute/unmute</button>

index.js

  const playButton = document.querySelector('#play');
  playButton.onclick = () => player.togglePlay();

  const muteButton = document.querySelector('#mute');
  muteButton.onclick = () => player.toggleMute();

MediaPlayer.js

  MediaPlayer.prototype.mute = function() {
      this.media.muted = true;
  };
  MediaPlayer.prototype.unmute = function() {
      this.media.muted = false;
  };
  MediaPlayer.prototype.toggleMute = function() {
    if (this.media.muted) {
      this.unmute();
    } else {
      this.mute();
    }
  };

html

      <button id="playButton">Play/Pause</button>
      <button id="muteButton">Mute/Unmuted</button>

Index.js

import MediaPlayer from "./MediaPlayer.js";
import AutoPlay from "../plugins/AutoPlay.js";

const video = document.querySelector("video");
const playButton = document.querySelector("#playButton");
const mutedButton = document.querySelector("#muteButton");

const player = new MediaPlayer({ el: video, plugins: [new AutoPlay()] });
playButton.onclick = () => player.togglePlay();
mutedButton.onclick = () => player.toggleMuted();

MediaPlayer

MediaPlayer.prototype.mute = function() {
  this.media.muted = true;
};

MediaPlayer.prototype.unmute = function() {
  this.media.muted = false;
};

MediaPlayer.prototype.toggleMuted = function() {
  this.media.muted ? this.unmute() : this.mute();
};

Tuve que ver la clase nuevamente porque habían cosas que no comprendí muy bien, pero a la segunda ves todo fue más claro! Les recomiendo ver nuevamente la clase si no comprendieron bien ciertas cosas. Traten de aclarar su dudas antes de continuar, eso les facilitará muchísimo el comprender lo que viene.

RETO:
index.html

<button id="unmuteButton">Mute/Unmute</button>

index.js

const unmuteButton = document.querySelector('#unmuteButton')
unmuteButton.onclick = () => player.toggleMute()

AutoPlay.js

AutoPlay.prototype.run = function(player) {
  player.toggleMute()
  player.play()
}

MediaPlayer.js

MediaPlayer.prototype.toggleMute = function() {
  this.media.muted
    ?this.media.muted = false
    :this.media.muted = true
}

Les comparto el ejemplo que estoy armando hasta este punto
https://codesandbox.io/s/mediaplayer-tv8d9?file=/src/plugins/autoplay.js

reto completado despues de 1 hora de estar corrigiendo el codigo =)

MediaPlayer.prototype.toggleMute = function(){
    this.media.muted = !this.media.muted;
}

Le añadí la opción para que la clase MediaPlayer fuera la encargada de inicializar los Plugins

Hola, en mi caso salia que había fallado al exportar el primer plugin de AutoPlay, despues me dí cuenta que había creado la carpeta ‘plugins’ fuera de la carpeta ‘assets’. Ojala a alguien le ayude!

// index.js
const muteButton = document.querySelector('#mute');
muteButton.onclick = () => player.toggleMute()

// MediaPlayer.js
MediaPlayer.prototype.toggleMute = function() {
    this.media.muted = !this.media.muted
}

Lo malo que he visto en algunos cursos de platzi es que al hacer proyectos no te explican bien solo estamos replicando codigo y asi uno, pierde el tiempo y no se aprende nada, seria bueno un curso antes de este fuera de los que ya vi en la ruta.

Comparto mi codigo del reto
index.html

<button id="playButton">Play / Pause</button>
<button id="muteButton">Unmute / Mute</button>

index.js

import MediaPlayer from './MediaPlayer.js';
import AutoPlay from './plugins/AutoPlay.js';

const video = document.querySelector('video');
const player = new MediaPlayer({ el: video, plugins: [new AutoPlay()] });

const playButton = document.querySelector('#playButton');
playButton.onclick = () => player.togglePlay();

const muteButton = document.querySelector('#muteButton');
muteButton.onclick = () => {
  if (player.media.muted) {
    player.unmute();
  } else {
    player.mute();
  }
};

Reto crear el botón de mute

1. Crear botón mute y editar el botón play adicionándoles id en el archivo index.html. con el objeto de poder obtener el elemento de forma mas fácil.

<button  id="muteButton">Mute/Unmute</button>

1. En el archivo index.js obtengo los botones para añadirle funcionalidades.

const  playButton = document.getElementById("playButton")
playButton.onclick = () =>  player.togglePlay()

const  muteButton = document.getElementById("muteButton")
muteButton.onclick = () =>  player.toggleMute()

1. Por ultimo creo el metodo toggleMute() en la clase MediaPlayer.

MediaPlayer.prototype.toggleMute = function() {
(this.media.muted)
? this.unmute()
: this.mute()
}

Espero haber sido claro cualquier cosa sugerencia o pregúntamela déjala como comentario.

Html

	<main class="container">
        <!-- <video class="movie" controls> -->
        <video id="mainPlay" class="movie" >
          <source src="./assets/BigBuckBunny.mp4" />
        </video>
  
        <button id="playButton" class="playButton">Play</button>
        <button id="muteButton">Mute</button>
      </main>

Index.js

import MediaPlayer from "./MediaPlayer.js";
import AutoPlay from "./plugins/AutoPlay.js";

const $video = document.getElementById("mainPlay");
const $playBtn = document.getElementById("playButton");
const $muteBtn = document.getElementById("muteButton");
const $player = new MediaPlayer({
  el: $video,
  btnPlay: $playBtn,
  btnMute: $muteBtn,
  plugins: [ new AutoPlay() ],
});

$playBtn.onclick = () => $player.PlayAcction();
$muteBtn.onclick = () => $player.mute();

MediaPlayer.js

class MediaPlayer {
  constructor(config) {
    this.media = config.el;
    this.playbtn = config.btnPlay;
    this.mutebtn = config.btnMute;
    this.plugins = config.plugins || []

    this._initPlugins()
  }

  _initPlugins(){
    this.plugins.forEach(elementPlugin => {
      elementPlugin.run(this)
    });
  }

  PlayAcction() {
    if (this.media.paused) {
      this.media.play();
      this.playbtn.innerHTML = "Pause";
    } else {
      this.playbtn.innerHTML = "Play";
      this.media.pause();
    }
  }

  mute(){
    if (this.media.muted) {
      this.media.muted = false ;
      this.mutebtn.innerHTML = "Mute";
    } else {
      this.mutebtn.innerHTML = "Sound";
      this.media.muted = true;
    }
  }
} 

export default MediaPlayer

AutoPlayer.js

class AutoPlay{
  run(player){
    player.mute() 
    player.PlayAcction(); 
  }
}

export default AutoPlay

Si bienes desde 0 en JS es recomendable aprender un poco de clases y POO solo lo básico para no sentirse tan atrás en estos temas se explica de igual forma en este curso pero más adelante.