El primer plugin

7/42
Recursos
Transcripci贸n

Aportes 470

Preguntas 88

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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 鈥渕ute()鈥 y 鈥渦nmute()鈥 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 馃槙

<h3>-SUBIR Y BAJAR VOLUMEN
Les dejo una extensi贸n que me pareci贸 oportuna
Practiqu茅 lo aprendido en la clase :
Espero esas mejoras ac谩 abajo 馃榿</h3> <h3>.
.
Primero el archivo HTML con los dos botones nuevos:</h3>
 <!--BOT脫N PARA Subir volumen -->
 <button id="upvolumebutton">Subir Volumen</button>

<!--BOT脫N PARA Bajar volumen -->
<button id="downvolumebutton">Bajar Volumen</button> 
 
<h3>En INDEX.JS traemos los botones y los asignamos a variables:</h3>
const upvolume = document.querySelector('#upvolumebutton')
const downvolume = document.querySelector('#downvolumebutton')
<h3>En el mismo archivo INDEX.JS,鈥淓SCUCHAMOS鈥 los eventos clicks y llamamos a las funcionalidades:</h3>
upvolume.onclick = () =>player.volumeup();
downvolume.onclick = () =>player.volumedown();
<h3>鈥減layer鈥 en este caso es la variable donde yo tengo asignado el Media Player, si lo llamaste difente, fijate que sea ese nombre.</h3> <h3>.
.
.
En el archivo Mediaplayer.js ,
Ahora creamos las funcionalidades nuevas(si usaste clases, crea los m茅todos):</h3>
 /* 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; 
  };
<h3>Ten茅 en cuenta que le podes poner el valor que quieras, yo le puse 0.03 porque me gustaba tenerlo mas gradual.</h3>

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 鈥榩lugins鈥 fuera de la carpeta 鈥榓ssets鈥. 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.