/**
* @archivo poster-image.js
* /
importar ClickableComponent desde './clickable-component.js';
importar componente desde './component.js';
importar * como Dom desde './utils/dom.js';
importar {silencePromise} desde './utils/promise';
importar * como navegador desde './utils/browser.js';
/**
* Un `ClickableComponent` que se encarga de mostrar la imagen del póster para el jugador.
*
* @extiende Componente que se puede hacer clic
* /
clase PosterImage extiende ClickableComponent {
/**
* Crear una instancia de esta clase.
*
* @param {Jugador} jugador
* El `Jugador` al que esta clase debe adjuntarse.
*
* @param {Objeto} [opciones]
* El almacén de clave/valor de las opciones del jugador.
* /
constructor(jugador, opciones) {
super(jugador, opciones);
esta.actualización();
esta.actualización_ = (e) => esta.actualización(e);
player.on('cambio de poster', this.update_);
}
/**
* Limpie y deseche `PosterImage`.
* /
disponer () {
this.player().off('cambio de poster', this.update_);
super.dispose();
}
/**
* Crear el elemento DOM `PosterImage`s.
*
* @return {Elemento}
* El elemento que se crea.
* /
crearEl() {
const el = Dom.createEl('div', {
className: 'vjs-cartel',
// No quiero que el póster se pueda tabular.
índice de tabulación: -1
});
volver el;
}
/**
* Un {@link EventTarget~EventListener} para eventos {@link Player#posterchange}.
*
* @escucha Player#posterchange
*
* @param {Objetivo de evento~Evento} [evento]
* El evento `Player#posterchange` que activó esta función.
* /
actualizar (evento) {
const url = este.jugador().poster();
este.setSrc(url);
// Si no hay una fuente de póster, deberíamos mostrar: ninguno en este componente
// por lo que aún no se puede hacer clic o hacer clic con el botón derecho
si (url) {
este espectáculo();
} else {
esto. ocultar ();
}
}
/**
* Configure la fuente de `PosterImage` según el método de visualización.
*
* @param {cadena} URL
* La URL de la fuente de `PosterImage`.
* /
establecerOrigen(url) {
dejar imagen de fondo = '';
// Cualquier valor falso debe permanecer como una cadena vacía, de lo contrario
// esto arrojará un error adicional
si (url) {
imagenDeFondo = `url("${url}")`;
}
this.el_.style.backgroundImage = backgroundImage;
}
/**
* Un {@link EventTarget~EventListener} para clics en `PosterImage`. Ver
* {@link ClickableComponent#handleClick} para instancias en las que se activará.
*
* @escucha toca
* @escucha clic
* @escucha tecla abajo
*
* @param {EventTarget~Evento} evento
+ El evento `click`, `top` o `keydown` que hizo que se llamara a esta función.
* /
handleClick(evento) {
// No queremos que un clic active la reproducción cuando los controles están deshabilitados
if (!este.jugador_.controles()) {
devolver;
}
const sourceIsEncrypted = this.player_.usingPlugin('eme') &&
this.player_.eme.sessions &&
this.player_.eme.sessions.length > 0;
si (este.player_.tech(verdadero) &&
// Hemos observado un error en IE y Edge al reproducir contenido DRM donde
// llamar a .focus() en el elemento de video hace que el video se vuelva negro,
// asi lo evitamos en ese caso especifico
!((browser.IE_VERSION || browser.IS_EDGE) && sourceIsEncrypted)) {
this.player_.tech(verdadero).focus();
}
if (este.jugador_.pausado()) {
PromesaSilencio(este.jugador_.jugar());
} else {
este.jugador_.pausa();
}
}
}
Componente.registerComponent('ImagenPoster', ImagenPoster);
exportar PosterImage por defecto;