en primera decir que eso que tienes ahí si es código JS
pero es código javascript incorrecto, puesto que cosas que no deberían comenzar con mayusculas estan comenzando con una mayuscula, de hecho lo podemos probar en un snippet:
Const video = document.querySelector('video')
Const button = document.querySelector('buton')
Function MediaPlayer(config){
This.media = config.el
}
MediaPlayer.prototype.play = function () {
This.media.play();
}
Const player = new MediaPlayer({el : video});
Button.onclick = () => player.play()
<video></video>
<button></button>
De hecho una cosa mas en la que hay que tener cuidado es que aquí en esta parte:
Const button = document.querySelector('buton')
Escribiste buton
en el querySelector
y no button
, el elemento buton
no existe, existe es el elemento button
.
Ahora bien, aquello que esta mal, son varias cosas, la primera de ellas es que estas declarando las constantes con mayuscula al inicio:
Const video = ...
Debería ser así:
const video = ...
Esto mismo te esta pasando con las funciones, debe ser escrita la palabra function toda en minusculas y no la primera en mayusculas, es decir, tu la tienes así:
//Esto no existe
Function
Y la debes tener así:
//Esto si existe!
function
Esto mismo también te esta pasando con el this
this no debe tener la primera en mayuscula, debe ser todo en minusculas, tu lo tienes así:
This
Y es así:
this
Tambien al final estas añadiendole un listener a algo que no existe, mira:
Button.onclick = () => player.play()
No existe Button
en tu código, existe la constante button
.
Ahora bien, voy a corregir tu código para que sea ejecutable y correcto:
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()
video{
max-height: 300px;
}
<video src = "http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4" muted></video>
<button value = "clickeame!">Clickeame!</button>
Como vemos ahora el código es correcto y funciona, ahora pasaremos a explicar el codigo.
Vamos por lineas, la primera:
const video = document.querySelector('video')
con document.querySelector
se esta obteniendo el primer elemento <video>
que se encuentre en el html y se lo esta asignando a la constante video.
const button = document.querySelector('button')
Lo mismo que lo anterior, solo que esta vez con la etiqueta <button>
.
function MediaPlayer(config){
this.media = config.el
}
Esta parte es un poco mas extensa, y es que para poder entender por que se usa this
dentro de MediaPlayer
y el motivo de usar un prototype
en una función es que anteriormente las clases
en javascript no existian, (deberas consultar sobre las clases tu mismo, ya que es un tema demasiado extenso), pero como antes no existian las clases, no existia un modelo orientado objetos, sin embargo como javascript era un lenguaje orientado a prototipos esto hacia que pudieramos crear nuestros propios objetos y usarlos como clases.
Un ejemplo de esto es la clase MediaPlayer
que tienes ahí, y si, digo clase porque anteriormente cuando usabas this
o self
dentro de una función es porque querias usar esa función como si fuese una clase.
En resumen, lo que se esta haciendo ahí es crear una clase a la vieja escuela, sin embargo con la llegada de ES6
esto ya no es necesario. Ahora ya existen las clases, genericas pero son clases...
Digo genericas porque enrealidad no se les puede considerar como verdaderas clases...
Por ejemplo, si quisieramos coger la clase MediaPlayer que tienes ahí y adaptarla a una clase actual, la clase que tienes ahí se vería así:
class MediaPlayer{
constructor(config){
this.media = config.el;
}
}
const mediaPlayer = new MediaPlayer({el: "Soy un elemento video!"});
console.log(mediaPlayer.media);
Yo considero que actualmente la forma de realizar clases mediante una función esta deprecada, deberías empezar a usar las clases de ES6
.
Con respecto a this
.
this se refiere al contexto en el que lo uses, por ejemplo si te encuentras dentro de una función this será tu función, si te encuentras dentro de una clase this será tu clase, y si te encuentras dentro de un objeto, this será tu objeto.
En pocas palabras:
this.media = config.el
Eso de ahí lo que hace es asignarle una propiedad a tu clase.
Prosigamos:
MediaPlayer.prototype.play = function () {
this.media.play();
}
Cuando se usa el prototype de una clase, es para modificar la arquitectura y metodos que contiene esta, por ejemplo ahí le estas agregando a MediaPlayer un metodo bajo el nombre de play, que lo que hará es simplemente darle play al video.
Consideralo una forma de extender aquello que contiene una clase, (si modificas el prototype todas las instancias que hagas tendran el metodo que les añadiste).
const player = new MediaPlayer({el : video});
Se esta haciendo una nueva instancia de MediaPlayer
y se esta guardando en la constante player, como parametro le pasamos lo requerido por tu clase, que en este caso es un elemento, y el elemento que le pasamos es el de video, para poder que nuestra clase pueda hacer uso de nuestro video.
por ultimo tenemos:
button.onclick = () => player.play()
Estas añadiendo un evento oyente, en este caso de tipo click
al boton, y lo que va a hacer este boton cuando se cliquee es darle play al video.
sin embargo talvez deba explicar esta parte de aquó
() => player.play()
Eso de ahi se conoce como función flecha, en lo mas minimo de su expresión, y hacen parte de ES6
, en pocas palabras es una acortación de esto mismo:
button.onclick = function(){
player.play();
}
Que como vemos es mas largo pero hacen lo mismo.
Espero te haya sido útil esta información, saludos!