Inicio del proyecto

Inicio del proyecto

‌

En este curso vamos a estar desarrollando una aplicación llamada: Platzi Video. En toda plataforma de video hay un componente especial en el desarrollo, tenemos que saber implementar el MediPlayer, en este curso vamos a estar desarrollando este feature de forma modular, esto quiere decir que vamos a desarrollar plugins que vamos a implementar a nuestro reproductor, extendiéndole sus funcionalidades. Vamos a comenzar con un poco de CSS y HTML ya escrito.

‌

Primer paso

‌

Crearemos nuestros primeros archivos usando npm init -y, donde -y es una bandera que le dicta a npm que le diga sí a todas las preguntas que haga.

npm init -y

‌

Esto nos creará un archivo package.json que lo sustituiremos por el siguiente:

{
"name":  "platzi-media-player",
"version":  "1.0.0",
"description":  "Proyecto del Curso Profesional de JavaScript de la Escuela de JavaScript de Platzi.",
"license":  "MIT",
"author":  "César Augusto Barco <[email protected]>",
"keywords":  [
 "platzi"
 ],
"scripts":  {
 "start":  "live-server"
 },
"devDependencies":  {
		 "live-server":  "^1.2.1"
	 }
}

‌

Una vez tengamos todo esto listo vamos a proceder a instalar nuestro live-server para empezar a trabajar. Para instalar esto vamos a usar el siguiente comando npm i -D live-server donde i significa install y la bandera -D develoment, esto quiere decir que no lo vamos a usar en producción.

‌

Una vez instalado ya lo podremos usar con el package.json que dejé arriba. Lo usaremos con el comando start que llamará a su vez a live-server.

‌

Antes de ejecutar este vamos a implementar varios archivos. Estos serán los siguientes:

HTML

CSS

También cualquier video que tengamos en nuestra PC. Nuestras carpetas tienen que quedar de la siguiente forma:

‌

Ahora sí vamos a ejecutar nuestro pequeña aplicación.

npm start

‌

Nuestra pequeña aplicación andará en la IP que nos muestre la terminal.

‌

¿Qué sigue?

‌

Tenemos un botón que no funciona, lo vamos a poner a funcionar con un media query. Abrimos nuestras etiquetas de script.

‌

Tenemos un vídeo que debemos manipular, lo vamos a hacer con querySelector(""), a este tenemos que pasarlo un elemento, en este caso será video, es el único elemento video en nuestro HTML. Tambien debemos traer nuestro botón con `querySelector``.

const  video = document.querySelector("video")

const  button = document.querySelector("button")

‌

Cuando le demos click a nuestro botón queremos que el vídeo se reproduzca. Lo hacemos de la siguiente manera:

button.onclick = ()=>  video.play()

‌

El video.play() se saca de la API que trae el navegador, todos los elementos del DOM traen un API. Para saber cuales son las opciones de esta API podemos ir a MDN a ver toda la documentación. No podemos darle play de una vez a penas se entre en la página, esto pasa por que los navegadores tienen una seguridad que no permite que esto pase, solo se puede dar play si el usuario tiene la libertad de hacerlo.

‌

Ahora nuestro código no es muy extensible, vamos a lograr esto usando prototipado. Para hacerlo extensible se pueden usar clases, pero en este caso usaremos protitype, usaremos el siguiente código para lograrlo.

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

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

function  MediaPlayer(){}

MediaPlayer.prototype.play = function() {

 video.play()

}

const  player = new  MediaPlayer()

button.onclick = () =>  player.play();

‌

Explicación:

‌

1. Creamos una función llamada mediaPlayer que nos servirá como prototipo.

2. A mediaPlayer le asignamos una función llamada play usando prototype. Esta función le dará inicio al video.

3. Luego con el botón se acciona una función llamada player que es una instancia del prototipo mediaPlayer que creamos. La instancia se crea usando la palabra new.

‌

Hagámoslo más reutilizable

‌

Para que nuestro código sea más reutilizable debemos hacerlo de esta manera:

const  video = document.querySelector("video");
const  button = document.querySelector("button");

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

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

const  player = new  MediaPlayer({ el:  video });
button.onclick = () =>  player.play();

‌

Explicación:

‌

1. A nuestra función madre o prototipo le pasamos una configuración. Esta configuración lo que va a tener es el elemento video original. Le asignamos a this.media el elemento video.

2. A la función extendida le asignamos play() a this.media para que se ejecute cuando presionemos el botón.

3. En nuestra función especial player es una instancia del prototipo le asignaremos el valor de video para que lo reciba en configuración. Esto lo haremos con destructuración de objetos.

‌

Acá no podemos usar arrow function por que el valor de this es global. Más adelante se verá con más detalle.

‌

Para agregarle la funcionalidad de pausa y play con el mismo botón, debemos condicionar la función play de MediaPlayer de la siguiente manera:

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

 // o podemos usar lo siguiente:

 // this.media.paused ? this.media.play() : this.media.pause()

};

Que pésimo arranque del curso si no es por los aportes de la comunidad no se entiende que esta pasando

para iniciar este curso clone el repositorio y segui los siguientes pasos.
espero les sirva.

1. git clone url_repo
2. git checkout ff1badc05e00be6bb018bf3e5705ba672e20821f
3. git branch nueva_rama
4. git checkout nueva_rama 

Opinión + consulta + mi solución:

Opinión: Creo que no es nada intuitiva esta parte del curso, los contenidos iniciales deberían estar mejor especificados, porque este proyecto no parte del Platzi Video que se genera en la primera parte de la ruta de JS, y el repo de Git está muchos pasos por delante de lo que se explica aquí.

Consulta: No entiendo por qué no se utilizan directamente clases ya que se han visto en el anterior curso, no es esto volver a enredar a la gente con prácticas en desuso?

Solución al ejercicio usando clases + operadores ternarios para el reto:

const video = document.querySelector("video");
const button = document.querySelector("button");

class MediaPlayer {
    constructor(config) { 
        this.config = config;
    };
    play() {
        video.play();
    };
    pause() {
        video.pause();
    };
};

const player = new MediaPlayer();

const toggle = () => {
    video.paused === false ? player.pause() : player.play();
};

button.onclick = () => toggle();

Para los que tienen dificultad en seguir la clase, les dejo el enlace al commit de esta clase, y así puedan continuar sin problemas.
https://github.com/platzi/javascript-profesional/tree/ff1badc05e00be6bb018bf3e5705ba672e20821f

Esparragus Esparragus! 😦 , eres el profesor mas difícil cil de platzi, pero aprecio tu esfuerzo, suelen ser confusas tus clases, no todo es tan obvio!

Si alguien quiere tener específicamente los scripts que tiene el mentor en el video, puede hacer lo siguiente:

1. Clonar el repo desde aqui https://github.com/platzi/javascript-profesional.git
2. git reset --hard ff1badc05e00be6bb018bf3e5705ba672e20821f
   Así tendrás solo esta versión especifica del proyecto.

**Diferencia **entre element.onclick = function(){} y element.addEventListener('click', function(){}).

Si en nuestro código tenemos:

element.onclick = function(){ alert( 'Me he ejecutado #1 ' ); }
element.onclick = function(){ alert( 'Me he ejecutado #2 ' ); }

El navegador sólo nos devolverá ‘Me he ejecutado #2’ ya que lo que estamos haciendo es sobreescribir el primero. Esto se debe a que estamos accediendo directamente al método onclick del HTML:
<a id="element" href="#" onclick="alert('');">Click me</a>.

En cambio, si ejecutamos:

element.addEventListener('click', function(){ alert( 'Me he ejecutado #1' ); });
element.addEventListener('click', function(){ alert( 'Me he ejecutado #2' ); });

El navegador nos devolverá ‘Me he ejecutado #1’ y ‘Me he ejecutado #2’

Hola. El código del repositorio del profesor ya esta totalmente terminado y esta separado por commits, por lo cual puede ser confuso. Por esa razón hice este repositorio con el setup inicial del curso para que puedan descargar el código.
https://github.com/eltranseunteurbano/CursosPlatzi/tree/CursoProfesionalJs/Escuela de Javascript/Profesional de Javascript/proyectoFinal

Hola, ésta es una solución con una sintaxis diferente. No entiendo que quiere decir “el:” Gracias por sus comentarios.

class MediaPlayer {
    constructor(video){
        this.video = video
    }

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

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

    togglePlay(){
        if(this.video.paused){
            this.video.play()
        }else{
            this.video.pause()
        }
    }
}

const video = document.querySelector('video');
const button = document.querySelector('button');
button.onclick = () => player.togglePlay();
//const player = new MediaPlayer({ el:video }); // no entiendo esta parte: que es "el:"
const player = new MediaPlayer(video)

Solución:

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

button.onclick = () => {
  player.media.paused ? player.play() : player.pause();
};

**El peor inicio de un curso que he visto en Platzi… **

Eso fue mucha información de golpe…

Si alguien tuvo conflictos con entender esta clase, les dejo esto ❤️ Espero les sirva
https://platzi.com/tutoriales/1642-javascript-profesional/6020-clase-3-iniciando-proyecto/

Esta clase fue bastante confusa al principio, tuve que pausar el video y leer los comentarios para dar con la instalación básica 😦.

No pueden estar los cursos mejor organizados?, me rompi el (ya saben) para pagar Platzi y vengo de varios videos donde la organización es pésima y tengo que andar investigando donde estan los repos o descubriendo en que video se aplico tal cosa porque no concuerda con lo que tengo que hacer o aprender, sin contar que muchos de los videos tienen una duración de 8mins que solo recomiendan paginas web’s y la falta de ejercicios… Que decepción… Y no me vengan que la idea es investigar… Eso ya lo se, es obvio!.. Pero el video no concuerda, derepente y de golpe haces lo del video y te aparece un reproductor por hacer un npm init y instalar el live server… WTF!.. Espero que no tomen mal mi comentario pero realmente y viviendo en Argentina me costo el doble pagar la carrera ya que como es extranjera la plataforma y el peso de mi pais no vale nada por ende se dolariza todo, sin contar los impuestos, y me vale carísimo todo… De hecho es raro que comente de “forma negativa” ya que siempre tiro comentarios de aliento y positivos… pero no es la primera vez que pasa y por la decepción que tuve me puse triste y deje la cuenta abandonada mas de 30 dias. Gracias

si descargan el repo se dan cuenta que esta ya completo, para tener los archivos de esta clase solo usen el comando
git reset ff1badc05e00be6bb018bf3e5705ba672e20821f --hard

ese es el id del commit con solo los archivos que tiene el profe😉

Mi solución usando ES6, esto lo hago porque tengo bastante claro que lo estoy haciendo no es mas que azúcar sintáctico con las “clases”, lo que en realidad estoy haciendo es creando un prototipo con 2 métodos.

En lo personal me gusta más descargar el plugin de Visual Studio Code llamado Live Server.

Y con un simple click te crea tu servidor. Sin necesidad de descargar un npm para cada proyecto.

Recuerden usar este plugin en su HTML.

Ésta es mi solución, tengo 3 métodos, togglePlay() que llama a play() y pause()

    <script>
        const video = document.querySelector('video');
        const button = document.querySelector('button');

        function MediaPlayer(config) {
            this.media = config.el;
        }
        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();
            }
        };
        
        const player = new MediaPlayer({el : video});

        button.onclick = () => player.togglePlay();
        
    </script>```

Para iniciar en el camino de los pro, por que no iniciamos utilizando buenas practicas desde un inicio yo tengo algunas

1 - cuando se usa prototype es recomendable colocar nombres a las funciones como se muestra en el código anexado.
2 - Las constantes siempre tienen que ser en mayúsculas y al usar palabras compuestas es recomendable usar guión bajo
3 - Siempre es bueno comentar el código que estamos armando
4 - Siempre es bueno destructurar.

🔖**Nota: **En el código anexado se cuentan algunas de las buenas prácticas que les comento.

/**
 * Inicializando el objeto MediaPlayer.
 *
 * @param {Object} config Configuracion general para el player.
 */
function MediaPlayer(config = {}) {
    // Destructuración con validación
    const { player = "" } = config;
    this.player = player ? document.querySelector(player) : "";
}

/**
 * Permite reproducir el video.
 *
 * @return {void}
 */
MediaPlayer.prototype.play = function play() {
    const { player } = this;
    if (player) {
        player.play();
    }
};

/**
 * Permite pausar el video.
 *
 * @return {void}
 */
MediaPlayer.prototype.pause = function pause() {
    const { player } = this;
    if (player) {
        player.pause();
    }
};

/**
 * Permite reproducir o pausar el video dependiendo del estatus.
 *
 * @return {void}
 */
MediaPlayer.prototype.togglePlay = function togglePlay() {
    const { player } = this;
    if (player) {
        if (player.paused) player.play();
        else player.pause();
    }
};

/* -------------------------------------------------------------------- */

// Constantes para el menjo del selector del player y el elemenbto button
const PLAYER_SELECTOR = "video";
const BUTTOM_SELECTOR = document.querySelector("button");

// Se genera la instancia del objeto MediaPlayer
const MEDIA_PLAYER_INSTANCE = new MediaPlayer({ player: PLAYER_SELECTOR });

// Se asigna  el metodo togglePlay al button correspondiente
BUTTOM_SELECTOR.addEventListener("click", () => MEDIA_PLAYER_INSTANCE.togglePlay());

Practica funcional
https://yr5pq.csb.app/

Código correspondiente
https://codesandbox.io/embed/wonderful-dawn-yr5pq?fontsize=14&hidenavigation=1&theme=dark

Para arrancar necesitas los files:
/index.html

<html>
  <head>
    <title>PlatziMediaPlayer.js</title>
    <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>Play/Pause</button>
    </main>

    <script>
    </script>
  </body>
</html>

Te creas la carpeta assets en la raiz y necesitas tener:
index.css

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

body {
  background: #eeeeee;
  color: #030303;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

header {
  text-align: center;
  padding: 3rem 0;
  background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

header > h1 {
  font-weight: normal;
  font-style: italic;
}

main {
  padding: 1rem 0;
}

.container {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

.movie {
  width: 100%;
}

Necesitas descargar el video y ponerlo en la carpeta assets tmb, para descargar puedes hacerlo de: Video
Hay boton de Download al lado de History

Con eso arrancas.

Para los que quieran tener EXACTAMENTE los mismos archivos a como se muestran en el vídeo, pueden descargarlos aquí.

Es el repositorio oficial en uno de los primeros commits, si quieren ‘viajar’ por commits solo tienen que seguir estos pasos:

1. Localizar el repositorio y darle click a commits
   

   

2. Verán una lista con todos los commits que se le han hecho al repositorio. Si quieren ver cómo se veía un repositorio en un commit específico, solo tienen que darle click al botón <>
   

   

Y listo, ya pueden descargar el repositorio, hacerle Fork o clonarlo. También pueden hacer todo este proceso por consola, es muy fácil. Si quieres aprender cómo te recomiendo el Curso Profesional de Git y GitHub.

Hola!
Para empezar con la clase yo:

1. Fui a este commit (que es el inicia)
   Repositorio al inicio
2. Hice click en el botón “clone o download”
3. Elegí la opción “Download ZIP”
4. Luego fui al archivo ZIP ya descargado
5. Lo extraje en la carpeta de mi elección para comenzar con el curso.

No entendi esta parte, por que dice que this.media es igual a config.el???

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

Cuando quieras iniciar de la peor manera un curso pregúntale a Richard kaufman como hacerle , desde el capitulo 1 me perdí ni supe de donde saca los archivos copie el repositorio y aun así salen dos capetas que no sabes ni con cual trabajar , te quiere explicar lo del packge json y ya hay 2 archivos en el repositorio de eso . vaya manera de retrasarte con el poco proceso de crecimiento que vas sacando de estas clases .

ESTE CURSO NO SIRVE!!!

NO SE PUEDE EMPEZAR!!!

NO TIENE SENTIDO!!!

DENME EL CURSO POR EL CUAL PAGUÉ!!!

NO QUIERO TERMINAR EN STACKOVERFLOW O YOUTUBE VIENDO GRATIS COMO HACER QUE FUNCIONE ALGO QUE PAGUÉ

OTROS USUARIOS SE QUEJAN DE LO MISMO
Y TRAS DOS AÑOS VEO QUE NO LO ARREGLAN

Fue como pasar de las sumas a las integrales :,v

Es muy confuso iniciar este curso!!!

Hola les comparto mi reto

const video = document.querySelector('video')
const button = document.querySelector('button')

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

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

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

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

const player = new MediaPlayer({ el: video })

button.onclick = () => player.handlePlay()

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

Este curso pide a gritos una actualización, estaba viendo la agenda para los nuevos cursos y no veo que salga uno pronto 😔

HTML antes de ser editado…

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet"
        href="https://necolas.github.io/normalize.css/latest/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/video.mp4">
            </video>
            <button>Play/Pause</button>
        </main>
    </body>
</html>

CSS antes de ser editado

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

body {
    background: #eeeeee;
    color: #030303;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

header {
    text-align: center;
    padding: 3rem 0;
    background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

header > h1 {
    font-weight: normal;
    font-style: italic;
}

main {
    padding: 1rem 0;
}

.container {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
}

.movie {
    width: 100%;
}

Hola chicos. Una vez más tenemos que la gente no sabe exactamente desde donde está comenzando el curso, ni cual fue el paso previo para llegar a la situación inicial. Por ello tal vez sería bueno que cada vez que se den estas situaciones confusas (lamentablemente ha pasado mucho en esta carrera) hacer un pequeño y tutorial paso a paso, quizás en la misma descripción del video. Y se acaban los misterios y las pérdidas de tiempo. Saludos.

La base del proyecto la pueden encontrar dando click aqui

Metodo de pausa

https://developer.mozilla.org/es/docs/Web/API/HTMLMediaElement/pause

Ademas exite un metodo que verifica si el elemento ya esta pausado o no retornando un bolean.

https://developer.mozilla.org/es/docs/Web/API/HTMLMediaElement/paused

De esta manera se puede validar para activar o desactivar un boton de pausa.

Configuración previa
Hola, si estás iniciando este curso, lo más seguro es que no tengas ningún archivo html, tampoco iniciado con npm, y si pensaste clonar el repo, ya está finalizado.

Si quieres tener en la manera inicial el proyecto

1. git clone [email protected]com:platzi/javascript-profesional.git
2. cd ./javascript-profesional
3. git reset --hard  ff1badc
/*( mala práctica de git en un entorno profesional, pero en esta caso como queremos la parte inicial no importa, lo que hacemos es regresar al commit inicial del proyecto )*/

Y así ya tendrás tu carpeta lista para trabajar

Segun la documentacion de HTMLMediaElement existe el método HTMLMediaElement.paused el cual regresa un booleano que indica si el elemento está pausado. En nuestro prototype hay que incluir esta validación para saber si esta pausado, de tal manera que demos play o pause dependendiendo del estado:

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

Me confunde mucho como inicia el curso, no explica muy bien que hay que hacer y ademas va muy rápido con las explicación.

El repositorio de este curso lo encuentras en: https://github.com/platzi/javascript-profesional

Primero lo hice con ayuda del html pero luego me di cuenta que podía hacer lo mismo en el script con el button.onclick que era lo mismo que en el html darle a <button> el onclick=“function”. Este fue mi resultado c:

  <script>
    const video = document.querySelector('video')
    const button = document.querySelector('button')

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

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

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

    const player = new MediaPlayer({ el: video})

    // Reproduce y detiene el video 
    button.onclick = function (){
      (player.media.paused)
        ? player.play()
        : player.pause()
      console.log(player.media.paused)
    }    
  </script>

En mi opinión personal el arranque de este curso es muy malo, entiendo que ya es un curso avanzado, pero empezar con un proyecto ya muy avanzado y encima el que esta en el repositorio esta demasiado avanzado en comparación de este video. 😕 me decepcione un poco en este inicio de curso.

Muy confuso el inicio!

Si quieren usar el mismo video, lo pueden descargar de acá http://bbb3d.renderfarming.net/download.html
Eligen la resolución y los redirigirá a otra página que empezará a reproducir el video y en la parte de los controles del video habrán tres puntos, clickean ahí y les aparecerá la opción de descargar el archivo

Debería haber un botón de like y dislike para cada clase, así sabrían los profes (y Platzi) en dónde les hace falta mejorar su contenido.

👍 #retoCumplido Lo mas lógico es agregarle una condicional IF para que cambie de estado, y ADICIONAL una línea de código para que se reproduzca o de pause al hacer clic en el video similar al video de esta clase. Lo modificado esta encerrado de color amarillo. Gracias por su enseñanza es muy buena 👍

Usando Operdor Ternario:

button.onclick = () => (player.media.paused ? player.play() : player.pause());

Y lo hice con paradigma a objetos ya que me parece más fácil de manejar

const video = document.querySelector('video')
const buttonPlay = document.getElementById('play')
const buttonPause = document.getElementById('pause')

class MediaPlayer {
  constructor(config) {
    this.media = config
  }
  controlPlay() {
    this.media.play()
  }
  controlPause() {
    this.media.pause()
  }
}

const player = new MediaPlayer(video)
const stop = new MediaPlayer(video)

buttonPlay.onclick = () => player.controlPlay();
buttonPause.onclick = () => stop.controlPause();```

¿Que diferencia hay cuando se instala una dependencia en modo desarrollo o de producción, y cuando debería hacerlo en desarrollo o producción?

Los archivos adjuntos son el resultado de todo el curso, así como pretenden que siga el curso 😠

Como servidor tambien podemos utilizar la extension de VS Code LIVE SERVER

Mi aporte, tomando en cuenta que tengo más de un video por lo que utilizo querySelectorAll para obtener una lista de videos y botones para poder asignarles el evento onclick al botón con su respectivo video.

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

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();
    }
}

const lstVideo = [...document.querySelectorAll(".gallery-video__video")];
const lstButton = [...document.querySelectorAll(".gallery-video__btn")];

lstVideo.forEach((video, index) => {
    const player = new MediaPlayer( { element: video } );
    lstButton[index].onclick = () => player.togglePlay();
});

Para pausar el vídeo:

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

button.onclick = () => media.change()

Para quien tiene duda desde que proyecto comenzar, una opción facil es bajar el repo y trabajar a partir del commit “Inicio del Proyecto” el hash es ff1badc05e00be6bb018bf3e5705ba672e20821f, incluye lo realizado en este video

      const video = document.querySelector("video");
      const button = document.querySelector("button");

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

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

      const player = new MediaPlayer({el : video});

      button.onclick = () => { (video.paused) ? player.play() : player.pause() }```

Tienen Razón de donde salió el código,
El Profesor da entendido que ya conoces de “git” y en te muestra el repositorio con el proyecto completo
Aquí tienes el enlace al commit con el inicio del proyecto también lo puedes descargar de forma manual

https://github.com/Sparragus/javascript-profesional/tree/ff1badc05e00be6bb018bf3e5705ba672e20821f

He tomado varios cursos ya con Platzi, y este es el primero que pienso que es malo… muy malo!, el contenido no parece tener estructura definida, no tiene un enlace con lo aprendido en cursos anteriores, no tiene contexto (al menos para empezar).

Esta parte del curso esta un poco desordenada, si bien es cierto revisando el repositorio y con un poco de trabajo se puede llegar a obtener lo necesario para continuar, puedo imaginar que para algunos puede ser mucho mas complicado, debo decir que me acostumbre a los cursos mas recientes donde prácticamente todo lleva una secuencia perfecta y los videos son sumamente claros.

El curso en si esta buenísimo, pero le hace falta un poco mas de orden.

Me perdí totalmente

Qué desastre, pésimo inicio de curso, no explica nada y los archivos del repo ni coinciden con los de la clase. Te quita las ganas de seguir el curso.

Mi solución:

button.onclick = () => {
    (video.paused)? player.play() : player.pause();
};

• Yo entrando a la primera clase del curso
  
  

Creo que ya mas o menos entendí:

Luego de agregar los elementos, vamos a manejar el elemento video como un objeto. A este objeto le creamos una función constructora y las propiedades se las agregamos con prototype.

Quizas un poco mas explicito:

El objeto se va a llamar “player”, creado a partir de una función constructora llamada “MediaPlayer”, a la cual le pasamos por parámetro un objeto con clave “elem” y valor “video” (es decir, el elemento):

const player = new MediaPlayer( {elem: video} );

(Cambié “el” por “elem” para entenderlo mejor) Cuando consultemos el valor de “elem” en la función constructora, nos llevará el elemento “video” completo.

Creamos entonces la función constructora. La que le va a dar forma al objeto que construimos. A tener en cuenta, “config” no es mas que un nombre que se le da al parametro. Puede ser cualquier otro.

Ahora bien, recordando que le estamos pasando un objeto, lo que queremos es su valor. Por ello, a this.media le estamos diciendo que del objeto config tome el valor de la llave elem. Dicho de otra forma: this.media = video (el elemento).

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

Prototype aun no lo entiendo bien. Sin embargo lo leo como la forma de agregar ciertos métodos que necesitemos al constructor que creamos. En este caso necesitamos dos. .play() y .paused()
Estos dos son métodos de elementos multimedia.

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

Notese que cambié el nombre de las funciones por reproducir y pausar pero igual en el bloque de código es donde estoy llamando a los métodos que voy a agregar.

Finalmente es hacer la lógica cuando llegue un click del elemento “button” a traves de un arrow function.

Como dije anteriormente, this.media = video … por lo tanto es valido decir que player.media = video

Revisando la documentación, resulta que el multimedia tiene una propiedad llamada paused que si esta en true es porque el video está pausado y si está en false es porque el video esta reproduciendo.

Con esto en mente, lo que queda ya es hacer la logica que conocemos:

button.onclick = () => {
        (player.media.paused)
        ? player.reproducir()
        :  player.pausar()
      }; 

Se leería algo asi:

Si la propiedad paused de video está en true, ejecute la funcion reproducir() para reproducir el video. Si está en false, es porque está reproduciendo, por ende enecute la funcion pausar() para pausar el video.

Me disculpo si se ve feito pero es como para ir separando ideas y esas cosas.
Animo que se que puede ser decepcionante pero leyendo mucho y rompiendo cosas en el código, puede que el curso nos ayude mas de lo que pensamos.
Bye

Si tienen problemas con el tema del repositorio que no viene con el inicio de la clase, lo que pueden hacer es:

1. Realiza un clon del proyecto: git clone https://github.com/platzi/javascript-profesional.git
2. Movete al commit luego del initial: git checkout ff1badc05
3. Arma un branch aparte: git switch -c curso

Si bien la parte de esta clase esta resuelta, creo que podes seguir las siguientes clases sin problemas!

No te olvides de commitear tus cambios, mucho mejor si creas branchs por clase, asi sabes bien que hiciste en cada sesion.

Cualquier duda comenten abajo o via twitter @wlensinas

Saludos!

Hola, humanxs de la clase 3. Vengo del futuro; de la clase 20 y pico (no sé como tardé tanto en darme cuenta xp). El caso es que vengo a dejarles información que cambiará el rumbo de tu historia en este curso online: clona el proyecto del Github de Richard y no hagas reset ni nada por el estilo, déjalo tal cual, en el futuro, conforme vayan avanzando las clases irás utilizando cada uno de los archivos que parecen estar de más ahora mismo.
La buena pa todxs.

Me agrada ver otras soluciones y mejorar mi código.
Esta es mi solución al reto.

viendo por 3era vez el curso porfin entendi esta clase con un comentario de alguien en el chat, esta dificil aun saltando de los cursos anteriores, pero creo que el profesor es excelente y muy pedagogico, ahora entiendo que simplemente el tema esta duro DIFICIL de entender para muchos y he comprobado que solo hace falta practica MUCHA practica

Para tener el proyecto como el inicio, realiza lo siguiente:

Clona el repositorio:

git clone https://github.com/platzi/javascript-profesional.git

Retorna al commit del inicio del proyecto:

git checkout ff1badc05e00be6bb018bf3e5705ba672e20821f

Con eso ya tienes tal cual inicia el proyecto.

Adicional: puedes ver el historial de los commit con:

git log

pesimo arranque del curso si asi es desarrollado todo creo que quedaran demasiados vacios, el team de platzi deberia estar mas pendiente de estas cosas

Esta es mi solución en el tema de reproducir y detener el video. Ademas preferí cambiar la estructura a una clase

Deja mucho que desear el inicio del curso, esperemos que en el transcurso de este mejore. Ojala tambien existiera disposicion en mejorar es el comiezo, pero no lo creo ya que los comentarios vienen por lo que he visto desde hace 2 anios.

Yo hice esto para solucionar el reto

const video = document.querySelector('video');
const button = document.querySelector('button');

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

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

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

const player = new MediaPlayer({ el: video});

button.onclick = () => {
  if(video.paused){
    return player.play();
  }else if(video.played){
    return player.pause();
  }
}

No entiendo por que en el video 3 no explica de donde saco ya el proyecto, con todo respeto me parece muy mal que no explique todo desde un principio.

 const video = document.querySelector("video")
        const button = document.querySelector("button")
        
        function MediaPlayer(config){
          this.media = config.el
        }

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

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

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

        const player = new MediaPlayer({el:video})

        button.onclick = () => player.playOrPause()

const video = document.querySelector('.movie')
const button = document.querySelector('button')

classMediaPlayer{
  constructor(config) {
    this.media = config.el
  }

  play = () => this.media.play()
  pause = () => this.media.pause()
  
  togglePlay = () => (this.media.paused) ? this.play() : this.pause() 
}

const player = new MediaPlayer({el: video})
button.onclick = () => player.togglePlay()

        const video = document.querySelector("video");
        const button = document.querySelector("button");

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

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

        const player = new MediaPlayer({ el: video });

        button.onclick = () => player.toggle();

Donde esta el repositorio del curso? alguien sabe?

HTMLMediaElement

Solo cambie esto:

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

Agregue un condicional de que si el video está pausado, .play(); u de lo contrario, .pause()

documentación

Hola a todos !!! cambia un poco el código al estilo Sacha Lifszyc usando CLASS para los que vieron fundamental vean que es parecido! Saludos!!!

class MediaPlayer {
        constructor(config){
        this.media = config.el;
        }

        MediaPlayerplay () {
        this.media.play();
        };

        MediaPlayerpause () {
        this.media.pause();
        };

        MediaPlayertogglePlay () {
        if (this.media.paused) {
          this.MediaPlayerplay();
        } else {
          this.MediaPlayerpause();
        }
       };

      }


      const video = document.querySelector('video');
      const player = new MediaPlayer({ el: video });

      const button = document.querySelector('button');
      button.onclick = () => player.MediaPlayertogglePlay();

Aqui esta el reto resuelto, trate de seguir el mismo patron usado en clase

const video = document.querySelector("video");
    const button = document.querySelector("button");

    // Aqui utilizamos el parametro config para poder agregarle los metodos
    // a cualquier elemento de video y hacer nuestro codigo mas reutilizable
    function MediaPlayer(config) {
      this.media = config.element
    }
    
    // Este es nuevo metodo de MediaPlayer
    MediaPlayer.prototype.play = function() {
      // player.play()
      this.media.play();
    };

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

    MediaPlayer.prototype.togglePlay =  function () {
      // HTMLMediaElement.paused, indica si el elemento está en pausa.
      if(this.media.paused){
        this.play()
      }else{
        this.pause()
      }
    }
    
    // Aqui instanciamos la clase
    const player = new MediaPlayer({element: video})

    button.onclick = () => player.togglePlay()

Hice algunas modificaciones al codigo propuesto para darle mas legibilidad:

// Class
//--------------------------------------------------------------------------------------------------
function MediaPlayer(config) {
    this.media = config.el
}
// Add method play to the class 
//--------------------------------------------------------------------------------------------------
MediaPlayer.prototype.play = function() {
    this.media.play()
}
// Validate if player is paused
MediaPlayer.prototype.isPaused = function() {
    return ! this.media.paused
}
// Add method playOrPause
//--------------------------------------------------------------------------------------------------
MediaPlayer.prototype.playOrPause = function() {
    if (this.isPaused()) {
        return this.media.pause()
    }
    return this.play()
}
// Get the html tags video and button, it works because there are only one video tag and one button
//--------------------------------------------------------------------------------------------------
const video = document.querySelector('video')
const button = document.querySelector('button')

// Player new instance
//--------------------------------------------------------------------------------------------------
const player = new MediaPlayer({el: video})
// On click 
//--------------------------------------------------------------------------------------------------
button.onclick = () => player.playOrPause()

No entendi que hace: “config.el”

Reto cumplido 😃

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

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

      const player = new MediaPlayer({ el: video });
      button.onclick = () => player.toggleReproduction();

De la ching… tu clase como en otras que me ha tocado cuando eres el tutor.

Código con reto resuelto:

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

      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();
      }

      const video = document.querySelector('video');
      const button = document.querySelector('button');
      
      const player = new MediaPlayer({el:video});

      button.onclick = ()=> player.togglePlay();

Utilizando clases:

      class MediaPlayer{
        constructor(config){
          this.media = config.el
        }

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

      const video = document.querySelector('video');
      const button = document.querySelector('button');
      
      const player = new MediaPlayer({el:video});

      button.onclick = ()=> player.togglePlay();

Hola y chau curso de Javascript Profesional, de profesional el inicio no tiene ni 5, con el tiempo limitado que tengo después de jornadas de 8 o más horas de trabajo, no me pidan venir a descifrar clase a clase lo que quieren hacer…un poquito de sentido común les pido…

Les comparto el link del proyecto con el que inicia el profesor.

https://github.com/FranciscoJCC/curso_profesional_javascript/tree/7b9d90c518c9e435b8318db264e3ff24551e3665

Para los que al igual que yo tienen dificultad en seguir la clase, les dejo el enlace al commit de esta clase, y así puedan continuar.

https://github.com/platzi/javascript-profesional/tree/ff1badc05e00be6bb018bf3e5705ba672e20821f

Mi solución:

    <script>
      const video = document.querySelector("video");
      const button = document.querySelector("button");

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

      MediaPlayer.prototype.play = function () {
        if (this.media.paused) {
          this.media.play();
          this.button.innerHTML = "Pause ||";
        } else {
          this.media.pause();
          this.button.innerHTML = "Play >";
        }
      };

      const player = new MediaPlayer({ media: video, button: button });

      button.onclick = () => player.play();
    </script>

Tanto el video como el botón son parámetros, para que cambie el texto del botón dependiendo de la estado en que esté.

Solución al reto

const video = document.querySelector("video");
      const button = document.querySelector("button");
      
      class MediaPlayer {
        constructor (config) {
          this.config = config;
        }
        play() {
          video.play()
        }
        pause() {
          video.pause();
        }
      }

      const player = new MediaPlayer();
      
      const toggler = () => {
        (video.paused === true) 
        ? player.play() : player.pause();
      }
      button.addEventListener('click', () => {toggler()})

algo asi funciona para mi puedes tener toggle y tambien los metodos individuales si lo deseas,

export  class VideoPlayer {
    constructor(config) {
        this.media = config;
    }

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

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

    toggle() {
        (this.media.paused) ? this.play() : this.pause();
    }
}

import {VideoPlayer} from "./mediaplayer.js";
const video = document.querySelector('video');
const button = document.querySelector('button');
const player = new VideoPlayer(video);


button.addEventListener('click', () => {
    player.toggle()
})

Yo lo después de analizar el código se me ocurrió hacerlo de esta forma y obtuve el mismo resultado!

const video = document.querySelector("video");
const button = document.querySelector("button");

button.onclick = () => {
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
};

Mi opinión. Sigo la escuela de Desarrollo web.

De verdad me costó tres días entender más o menos esta clase.

No tenía idea del npm y todo ese asunto del proyecto listo y eso me atrasó mucho. Pero que bueno que lo logré.

Me di cuenta de que si hubiera profundizado en las clases anteriores, como en el básico de javascript, hubiera entendido mejor lo que está haciendo el profe aquí.

Tuve que buscar otras fuentes. Sé que es lo correcto, pero no me parece recurrir a otros profesores en youtube si Platzi debe ofrecerme suficiente para entender. Si tengo que buscar información extra, debería ser solo la documentación para profundizar, sin que sea necesario recurrir a otro profesor a ver si lo entiendo mejor.

… Pero bueno, poco a poco. No paro de aprender y espero que Platzi se pague solo porque me endeudé.

super perdido en esta clase

La clase más desordenada que he visto hasta el momento, espero las próximas de éste curso sean más claras y organizadas.

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

Solución del ejercicio:

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

Mi solución con prototypes y uso del this:

const video = document.querySelector("video");
const button = document.querySelector("button");

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

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

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

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

const player = new MediaPlayer({ el: video });
button.onclick = () => player.handleReproduce();

Yo solucioné el reto de esta manera:

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