Inicio del proyecto

3/42
Recursos
Transcripci贸n

Trabajaremos en el proyecto PlatziVideo, una plataforma de v铆deo.

Esta es la base de nuestro proyecto y nos vamos a enfocar en el MediaPlayer. Durante el curso se desarrollar谩n plugins de forma modular para extender la funcionalidad del MediaPlayer.

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

Aportes 875

Preguntas 199

Ordenar por:

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

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谩 鈥楳e 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谩 鈥楳e he ejecutado #1鈥 y 鈥楳e 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 鈥渆l:鈥 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鈥檚 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 鈥渇orma 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 鈥渃lases鈥, 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 鈥榲iajar鈥 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 鈥渃lone o download鈥
  3. Eleg铆 la opci贸n 鈥淒ownload 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=鈥渇unction鈥. 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 鈥淚nicio 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 鈥済it鈥 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 鈥減layer鈥, creado a partir de una funci贸n constructora llamada 鈥淢ediaPlayer鈥, a la cual le pasamos por par谩metro un objeto con clave 鈥渆lem鈥 y valor 鈥渧ideo鈥 (es decir, el elemento):

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

(Cambi茅 鈥渆l鈥 por 鈥渆lem鈥 para entenderlo mejor) Cuando consultemos el valor de 鈥渆lem鈥 en la funci贸n constructora, nos llevar谩 el elemento 鈥渧ideo鈥 completo.

Creamos entonces la funci贸n constructora. La que le va a dar forma al objeto que construimos. A tener en cuenta, 鈥渃onfig鈥 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 鈥渂utton鈥 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?

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: 鈥渃onfig.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鈥n poquito de sentido com煤n les pido鈥

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