Componente(jugador, opcionesoptar , Listooptar)

Clase base para todos los componentes de la interfaz de usuario. Los componentes son objetos de interfaz de usuario que representan tanto un objeto javascript como un elemento del DOM. Pueden ser hijos de otros componentes y pueden tener hijos mismos.

Los componentes también pueden utilizar métodos de EventTarget.

nuevo Componente(jugador, opcionesoptar , Listooptar)

Crea una instancia de esta clase.

Parámetros:
Nombre Tipo Atributos Descripción
jugador Jugador

El jugador al que debe asociarse esta clase.

opciones Objeto <optional>

El almacén de clave/valor de las opciones de componentes.

Propiedades
Nombre Tipo Atributos Descripción
niños Matriz.<Objeto> <optional>

Conjunto de objetos secundarios con los que inicializar este componente. Los objetos secundarios tienen una propiedad name que se utilizará si es necesario agregar más de un componente del mismo tipo.

nombre de la clase cuerda <optional>

Una lista de clases separadas por espacios o clases para agregar el componente

listo Componente~Devolución de llamada lista <optional>

Función que se llama cuando el componente está listo.

Métodos

getComponent estático (nombre) → { Componente }

Obtenga un componente basado en el nombre con el que se registró.

Parámetros:
Nombre Tipo Descripción
nombre cuerda

Nombre del componente que se va a obtener.

Devoluciones:
Componente-

El componente que se registró con el nombre de pila.

Componente de registro estático (nombre, ComponentToRegister) → { Componente }

Registre un componente con videojs con el nombre y el componente.

NOTA: Lostécnicos no deben registrarse como Componente. Lostécnicos deben registrarse mediante Tech.RegisterTech o VideoJS:Videojs.RegisterTech.

NOTA: Esta función también se puede ver en videojs como VideoJS:Videojs.registerComponent.

Parámetros:
Nombre Tipo Descripción
nombre cuerda

Nombre del componente que se va a registrar.

ComponentToRegister Componente

los Componente clase para registrarse.

Devoluciones:
Componente-

El componente que se ha registrado.

$ (selector, opción de contexto) → {Elemento|null}

Busque un único elemento DOM que coincida con un selector. Puede estar dentro del componente contenTel () u otro contexto personalizado.

Parámetros:
Nombre Tipo Atributos Predeterminado Descripción
selector cuerda

Selector CSS válido, que se pasará a QuerySelector.

contexto Element | cadena <optional>
Este.contentel ()

Elemento DOM dentro del que realizar consultas. También puede ser una cadena selectora en cuyo caso el primer elemento coincidente se utilizará como contexto. Si falta this.contentel () se utiliza. Si this.contentel () no devuelve nada, vuelve al documento.

Devoluciones:
Elemento | null -

el elemento dom que se encontró, o nulo

Ver:

$$ (selector, opción de contexto) → {NodeList}

Busca todos los elementos DOM que coinciden con un selector. Puede estar dentro del componente contenTel () u otro contexto personalizado.

Parámetros:
Nombre Tipo Atributos Predeterminado Descripción
selector cuerda

Selector CSS válido, que se pasará a QuerySelectorAll.

contexto Element | cadena <optional>
Este.contentel ()

Elemento DOM dentro del que realizar consultas. También puede ser una cadena selectora en cuyo caso el primer elemento coincidente se utilizará como contexto. Si falta this.contentel () se utiliza. Si this.contentel () no devuelve nada, vuelve al documento.

Devoluciones:
Lista de nodos -

una lista de elementos dom que se encontraron

Ver:

addChild (hijo, opciones optar , índice optar ) → { Componente }

Agregue un componente hijo dentro del componente actual.

Parámetros:
Nombre Tipo Atributos Predeterminado Descripción
niño string | Componente

El nombre o la instancia de un hijo que se va a agregar.

opciones Objeto <optional>
{}

El almacén de clave/valor de opciones que se pasarán a los hijos del niño.

índice número <optional>
this.children_.length

Índice al que intentar agregar un hijo.

Devoluciones:
Componente-

El componente que se agrega como hijo. Cuando se usa una cuerda, Componente será creado por este proceso.

Agregar clase(clase para agregar)

Agregue un nombre de clase CSS al elemento del componente.

Parámetros:
Nombre Tipo Descripción
Clase para agregar cuerda

Nombre de clase CSS para agregar

blur()

Eliminar el enfoque de este componente

resumen buildCSSClass () → {cadena}

Crea el nombre de clase DOM predeterminado. Debe ser anulado por subcomponentes.

Devoluciones:
cadena -

El nombre de clase DOM de este objeto.

cancelAnimationFrame (id) → {número}

Cancela una devolución de llamada en cola que se ha pasado al componente #requestAnimationFrame (raF).

Si pone en cola una devolución de llamada RAF mediante el componente #requestAnimationFrame, utilice esta función en lugar de Window.cancelAnimationFrame. Si no lo hace, su oyente de desecho no se limpiará hasta el Componente #dispose.

Parámetros:
Nombre Tipo Descripción
id número

El ID de raF que se va a borrar. El valor devuelto del componente #requestAnimationFrame.

Devoluciones:
número -

Devuelve el ID de raF que se ha borrado.

Ver:

CanceNamedAnimationFrame(nombre)

Cancela un marco de animación con nombre actual si existe.

Parámetros:
Nombre Tipo Descripción
nombre cuerda

Nombre del RequestAnimationFrame que se va a cancelar.

niños () → {matriz}

Obtenga una matriz de todos los componentes secundarios

Devoluciones:
Matriz -

Los niños

clearInterval (intervalId) → {número}

Borra un intervalo que se crea a través de Window.setInterval o Component #setInterval. Si establece un intervalo mediante el Componente #setInterval, utilice esta función en lugar de Window.clearInterval. Si no lo hace, su oyente no se limpiará hasta el Componente #dispose.

Parámetros:
Nombre Tipo Descripción
Interválido número

ID del intervalo que se va a borrar. El valor devuelto de Component #setInterval o Window.setInterval.

Devoluciones:
número -

Devuelve el identificador de intervalo que se ha borrado.

Ver:

clearTimeout (id de tiempo de espera) → {número}

Borra un tiempo de espera que se crea a través de Window.setTimeout o Component #setTimeout. Si establece un tiempo de espera mediante el Componente #setTimeout, utilice esta función en lugar de Window.Cleartimout. Si no lo hace, su oyente no se limpiará hasta el Componente #dispose.

Parámetros:
Nombre Tipo Descripción
ID de tiempo de espera número

Identificación del tiempo de espera que se va a borrar. El valor devuelto de Component #setTimeout o Window.setTimeout.

Devoluciones:
número -

Devuelve el identificador de tiempo de espera que se ha borrado.

Ver:

contentEl () → {Elemento}

Devuelve el elemento DOM del componente. Aquí es donde se insertan los niños. Normalmente, será el mismo que el elemento devuelto en el Componente #el.

Devoluciones:
Elemento -

El elemento de contenido de este componente.

createEl (tagName opt , propiedades opt , atributos opt ) → {Elemento}

Cree el elemento DOM del componente.

Parámetros:
Nombre Tipo Atributos Descripción
Nombre de etiqueta cuerda <optional>

Tipo de nodo DOM de Element. Por ejemplo, 'div'

propiedades Objeto <optional>

Objeto de propiedades que se debe establecer.

atributos Objeto <optional>

Objeto de atributos que se debe establecer.

Devoluciones:
Elemento -

El elemento que se crea.

dimensión actual (ancho o alto) → {número}

Obtenga la anchura calculada o la altura del elemento del componente.

Utiliza Window.getComputedStyle.

Parámetros:
Nombre Tipo Descripción
Anchura o altura cuerda

Una cadena que contiene 'ancho' o 'alto'. Cualquiera que quieras conseguir.

Devoluciones:
número -

La dimensión que se solicita o 0 si no se ha establecido nada para esa dimensión.

currentDimensions () → { Componente ~ DimensionObject }

Obtenga un objeto que contenga valores de anchura y altura calculados del elemento del componente.

Utiliza Window.getComputedStyle.

Devoluciones:
Componente~DimensionObject-

Las dimensiones calculadas del elemento del componente.

altura actual () → {número}

Obtenga la altura calculada del elemento del componente.

Utiliza Window.getComputedStyle.

Devoluciones:
número -

Altura calculada del elemento del componente.

anchoActual () → {número}

Obtenga el ancho calculado del elemento del componente.

Utiliza Window.getComputedStyle.

Devoluciones:
número -

Ancho calculado del elemento del componente.

dimensión (widthOrHeight, num opt , skipListeners opt ) → {number}

Obtenga o establezca el ancho o alto del Componente elemento. Este es el código compartido para el componente #width y el componente #height.

Cosas que debes saber:

  • Si el ancho o el alto de un número devolverá el número postfijo con «px».
  • Si el ancho/alto es un porcentaje, devolverá el porcentaje fijado con '%'.
  • Los elementos ocultos tienen un ancho de 0 con window.getComputedStyle. Esta función tiene por defecto el Componentes style.width y vuelve a caer window.getComputedStyle. Consulte esto para obtener más información
  • Si desea el estilo calculado del componente, utilice Component #currentWidth y {Component #currentHeight
Parámetros:
Nombre Tipo Atributos Descripción
Anchura o altura cuerda

8 'ancho' o 'alto'

num number | string <optional>

8 Nueva dimensión

Alicates de esquí booleano <optional>

Omitir activador de evento componentresize

Fuegos:
Devoluciones:
número -

La dimensión al obtener o 0 si no está establecida

dimensiones(ancho, alto)

Establezca tanto el ancho como el alto del Componente elemento al mismo tiempo.

Parámetros:
Nombre Tipo Descripción
anchura number | string

Ancho para establecer el elemento componentes.

altura number | string

Altura en la que se establece el elemento componentes.

desechar (opciones)

Elimine el componente y todos los componentes secundarios.

Parámetros:
Nombre Tipo Descripción
opciones Objeto
Propiedades
Nombre Tipo Descripción
originalEl Elemento

elemento con el que reemplazar jugador elemento

Fuegos:

el () → {Elemento}

Obtener el elemento DOM del componente

Devoluciones:
Elemento -

El elemento DOM de este componente.

Activar actividad de Touch()

Esta función informa de la actividad del usuario cada vez que se producen eventos táctiles. Esto puede desactivarse por cualquier subcomponente que quiera que los eventos táctiles actúen de otra manera.

Informar de la actividad táctil del usuario cuando se producen eventos táctiles. La actividad del usuario se utiliza para determinar cuándo deben mostrarse u ocultar los controles. Es sencillo cuando se trata de eventos de ratón, porque cualquier evento de ratón debería mostrar los controles. Así que capturamos eventos de ratón que se acumulan al jugador e informamos de la actividad cuando eso ocurre. Con los eventos táctiles no es tan fácil como touchstart y tocar alternar los controles del reproductor. Así que los eventos táctiles tampoco nos pueden ayudar a nivel de jugador.

La actividad del usuario se comprueba de forma asíncrona. Así que lo que podría suceder es que un evento de toque en el vídeo desactiva los controles. Entonces el tocar evento burbujea hasta el jugador. Lo que, si informaba de la actividad del usuario, volvería a activar los controles. Tampoco queremos bloquear por completo los eventos táctiles para evitar que se burbujeen. Además un tocar evento y cualquier otra cosa que no sea un toque, no debe volver a activar los controles.

Escucha eventos:
  • Componente #event:touchstart
  • Componente #evento:touch move
  • Componente #evento:touchend
  • Componente #evento:touchcancelación

focus()

Establezca el foco en este componente

getAttribute (atributo) → {cadena|null}

Obtenga el valor de un atributo en el elemento del componente.

Parámetros:
Nombre Tipo Descripción
atributo cuerda

Nombre del atributo del que se obtiene el valor.

Devoluciones:
string | null -
  • El valor del atributo solicitado. - Puede ser una cadena vacía en algunos navegadores si el atributo no existe o no tiene valor - La mayoría de los navegadores devolverán nulo si el atributo no existe o no tiene valor.
Ver:

getChild (nombre) → { Componente |indefinido}

Devuelve el componente secundario con el nombre de pila.

Parámetros:
Nombre Tipo Descripción
nombre cuerda

Nombre del componente hijo que se va a obtener.

Devoluciones:
Componente | indefinido -

El componente hijo con el nombre de pila o sin definir.

getChildById (id) → { Componente |indefinido}

Devuelve el componente hijo con el identificador dado.

Parámetros:
Nombre Tipo Descripción
id cuerda

ID del componente secundario que se va a obtener.

Devoluciones:
Componente | indefinido -

El componente hijo con el identificador dado o sin definir.

getDescendant (…nombres) → { Componente |indefinido}

Devuelve el componente descendiente siguiendo los nombres de descendientes givent. Por ejemplo, ['foo', 'bar', 'baz'] intentaría obtener 'foo' en el componente actual, 'bar' en el componente 'foo' y 'baz' en el componente 'bar' y devolvería indefinido si cualquiera de esos no existe.

Parámetros:
Nombre Tipo Atributos Descripción
nombres ... matriz.<cadena> | cuerda <repeatable>

Nombre del componente hijo que se va a obtener.

Devoluciones:
Componente | indefinido -

El componente descendiente que sigue los nombres de descendientes dados o no definido.

HandleKeyDown(evento)

Cuando este componente recibe un keydown evento que no procesa, pasa el evento al jugador para su manejo.

Parámetros:
Nombre Tipo Descripción
evento Objeto del evento~Evento

los keydown evento que hizo que se llamara a esta función.

HandleKeypress(evento)

Muchos componentes solían tener un handleKeyPress método, que fue mal nombrado porque escuchó un keydown evento. El nombre de este método ahora delega en HandleKeyDown. Esto significa que cualquier persona que llame a HandleKeyPress no verá que las llamadas a sus métodos dejen de funcionar.

Parámetros:
Nombre Tipo Descripción
evento Objeto del evento~Evento

El evento que provocó la llamada a esta función.

cambio de idioma del mango abstracto()

Gestiona el cambio de idioma del reproductor en los componentes. Debe ser anulado por subcomponentes.

hasClass (classToCheck) → {booleano}

Compruebe si el elemento de un componente tiene un nombre de clase CSS.

Parámetros:
Nombre Tipo Descripción
Clase a comprobar cuerda

Nombre de clase CSS para comprobar.

Devoluciones:
booleano -
  • True si el componente tiene la clase. - Falso si el Componente no tiene la clase`

altura (num opt , skipListeners opt ) → {número|cadena}

Obtenga o establezca la altura del componente en función de los estilos CSS. Consulte Componente #dimension para obtener información más detallada.

Parámetros:
Nombre Tipo Atributos Descripción
num number | string <optional>

La altura que desea establecer con el postfijo '%', 'px' o nada.

Alicates de esquí booleano <optional>

Omitir el desencadenador de evento componentresize

Devoluciones:
number | string -

El ancho al obtener, cero si no hay ancho. Puede ser una cadena pospixeada con '%' o 'px'.

hide()

Oculte el elemento de Componentsi se muestra actualmente añadiéndole el nombre de clase «vjs-hidden'.

id () → {cadena}

Obtener el ID de este componente

Devoluciones:
cadena -

El id de este componente

Init Niños()

Agregue e inicialice los componentes secundariospredeterminados en función de las opciones.

isDisposed () → {booleano}

Determine si este componente se ha eliminado o no.

Devoluciones:
booleano -

Si el componente se ha eliminado, será cierto. De lo contrario, falso.

localizar (cadena, tokens opt , defaultValue opt ) → {cadena}

Localiza una cadena dada la cadena en inglés.

Si se proporcionan tokens, intentará ejecutar un simple reemplazo de tokens en la cadena proporcionada. Los tokens que busca se parecen a {1} con el índice indexado en 1 en la matriz de tokens.

Si un valor por defecto se proporciona, lo usará sobre cuerda , si no se encuentra un valor en los archivos de idioma proporcionados. Esto es útil si desea tener una clave descriptiva para el reemplazo de tokens pero tener una cadena localizada sucinta y no requiere que se incluya en.json.

Actualmente, se utiliza para la sincronización de la barra de progreso.

{
  "tiempo de la barra de progreso: hora actual = {1} duración = {2}": "{1} de {2}"
}

Luego se usa así:

this.localize('tiempo de la barra de progreso: horaActual={1} duración{2}',
              [este.jugador_.tiempoActual(), este.jugador_.duración()],
              '{1 de 2}');

Lo que produce algo así como: 01:23 de 24:56.

Parámetros:
Nombre Tipo Atributos Descripción
cuerda cuerda

La cadena que se va a localizar y la clave para buscar en los archivos de idioma.

fichas Matriz.<cadena> <optional>

Si el artículo actual tiene reemplazos de tokens, proporcione los tokens aquí.

Valor predeterminado cuerda <optional>

El valor predeterminado es string. Puede ser un valor predeterminado que se debe utilizar para la sustitución de tokens si es necesario que la clave de búsqueda sea independiente.

Devoluciones:
cadena -

La cadena localizada o, si no existe ninguna localización, la cadena inglesa.

nombre () → {cadena}

Obtenga el nombre del componente. El nombre se utiliza para hacer referencia al componente y se establece durante el registro.

Devoluciones:
cadena -

Nombre de este componente.

opciones (obj) → {Objeto}

Fusión profunda de objetos de opciones con nuevas opciones.

Nota: Cuando tanto obj como opciones contienen propiedades cuyos valores son objetos. Las dos propiedades se fusionan mediante Module:MergeOptions

Parámetros:
Nombre Tipo Descripción
obj Objeto

Objeto que contiene nuevas opciones.

Devoluciones:
Objeto -

Un nuevo objeto de esto.options_ y obj se fusionaron.

jugador () → { Jugador }

Devuelve el Jugador que el Componente se ha adjuntado a.

Devoluciones:
Jugador-

El jugador que este Componente se ha adjuntado a.

listo () → { Componente }

Enlazar un agente de escucha al estado listo del componente. A diferencia de los oyentes de eventos, ya que si el evento listo ya ha ocurrido, activará la función inmediatamente.

Devoluciones:
Componente-

Devuelve por sí mismo; el método se puede encadenar.

removeAttribute(atributo)

Elimina un atributo del elemento del componente.

Parámetros:
Nombre Tipo Descripción
atributo cuerda

Nombre del atributo que se va a quitar.

Ver:

RemoveChild(componente)

Quitar a un niño Componente de esto Componentes lista de niños. Elimina también el elemento secundario del componentes de este elemento componente.

Parámetros:
Nombre Tipo Descripción
componente Componente

El componente secundario que se va a quitar.

Quitar clase(clase para quitar)

Elimina un nombre de clase CSS del elemento Component.

Parámetros:
Nombre Tipo Descripción
Clase que se eliminará cuerda

Nombre de clase CSS que se va a quitar

requestAnimationFrame (fn) → {número}

Hace cola una devolución de llamada para pasar a RequestAnimationFrame (raF), pero con algunas bonificaciones adicionales:

  • Admite navegadores que no admiten raF al volver al Componente #setTimeout.

  • La devolución de llamada se convierte en un componente ~ GenericCallback (es decir, enlazado al componente).

  • La cancelación automática de la devolución de llamada raF se gestiona si el componente se elimina antes de llamarlo.

Parámetros:
Nombre Tipo Descripción
fn Componente~Devolución de llamada genérica

Función que se enlazará a este componente y se ejecutará justo antes de volver a pintar el navegador.

Escucha eventos:
Devoluciones:
número -

Devuelve un ID de raF que se utiliza para identificar el tiempo de espera. También se puede utilizar en el componente #cancelAnimationFrame para cancelar la devolución de llamada del marco de animación.

Ver:

Solicitud NamedAnimationFrame(nombre, fn)

Solicite un marco de animación, pero solo se pondrá en cola un marco de animación con nombre. Nunca se añadirá otro hasta que termine el anterior.

Parámetros:
Nombre Tipo Descripción
nombre cuerda

El nombre que se va a asignar a este RequestAnimationFrame

fn Componente~Devolución de llamada genérica

Función que se enlazará a este componente y se ejecutará justo antes de volver a pintar el navegador.

setAttribute(atributo, valor)

Establecer el valor de un atributo en el Componenteelemento de

Parámetros:
Nombre Tipo Descripción
atributo cuerda

Nombre del atributo que se va a establecer.

valor cuerda

Valor en el que establecer el atributo.

Ver:

setInterval (fn, intervalo) → {número}

Crea una función que se ejecuta cada x milisegundos. Esta función es un envoltorio alrededor de Window.setInterval. Sin embargo, hay algunas razones para usar este.

  1. Se borra a través de Componente # clearInterval cuando Componente # desechar se llama.
  2. La devolución de llamada de la función será un componente ~ GenericCallback
Parámetros:
Nombre Tipo Descripción
fn Componente~Devolución de llamada genérica

Función que se ejecuta cada x segundos.

intervalo número

Ejecute la función especificada cada x milisegundos.

Escucha eventos:
Devoluciones:
número -

Devuelve un id que se puede utilizar para identificar el intervalo. También se puede utilizar en el componente #clearInterval para borrar el intervalo.

Ver:

setTimeout (fn, tiempo de espera) → {número}

Crea una función que se ejecuta tras un tiempo de espera de x milisegundos. Esta función es un envoltorio alrededor de Window.setTimeout. Sin embargo, hay algunas razones para usar este:

  1. Se borra a través de Componente # clearTimeout cuando Componente # desechar se llama.
  2. La devolución de llamada de la función se convertirá en un componente ~ GenericCallback

Nota: No puedes usar Window.CleartimeOut en el id devuelto por esta función. Esto hará que su oyente de desecho no se limpie. Utilice el componente #clearTimeout o el componente #dispose en su lugar.

Parámetros:
Nombre Tipo Descripción
fn Componente~Devolución de llamada genérica

Función que se ejecutará tras el tiempo de espera.

tiempo de espera número

Tiempo de espera en milisegundos para retrasar antes de ejecutar la función especificada.

Escucha eventos:
Devoluciones:
número -

Devuelve un identificador de tiempo de espera que se utiliza para identificar el tiempo de espera. También se puede utilizar en el componente #clearTimeout para borrar el tiempo de espera establecido.

Ver:

show()

Muestre el elemento Component si está oculto eliminando el nombre de clase 'vjs-hidden'.

ToggleClass(ClassToggle,opt predicado)

Añada o elimine un nombre de clase CSS del elemento del componente.

Parámetros:
Nombre Tipo Atributos Descripción
Clase para alternar cuerda

La clase que se va a agregar o eliminar según (@link Component #hasClass}

predicado boolean | DOM~Predicado <optional>

Una función de predicado DOM~o booleano

Listo para activadores()

Activa todos los oyentes listeners para este componente.

Fuegos:

ancho (num opt , skipListeners opt ) → {número|cadena}

Obtén o establece el ancho del componente en función de los estilos CSS. Consulte Componente #dimension para obtener información más detallada.

Parámetros:
Nombre Tipo Atributos Descripción
num number | string <optional>

El ancho que desea establecer postfijo con '%', 'px' o nada.

Alicates de esquí booleano <optional>

Omitir el desencadenador de evento componentresize

Devoluciones:
number | string -

El ancho al obtener, cero si no hay ancho. Puede ser una cadena pospixeada con '%' o 'px'.

Definiciones de tipo

Objeto Dimension

Objeto que contiene valores de anchura y altura del estilo calculado del componente. Utiliza Window.getComputedStyle.

Propiedades:
Nombre Tipo Descripción
anchura número

Ancho del estilo calculado del componente.

altura número

Altura del estilo calculado del componente.

Devolución de llamada genérica()

Una devolución de llamada que no tiene parámetros y está vinculada al contexto del componente.

Esto:

ReadyCallback()

Una devolución de llamada que se llama cuando un componente está listo. No tiene parámetros y se ignorará cualquier valor de devolución de llamada.

Esto:

Eventos

tamaño de componente

Se activa cuando se cambia el tamaño de un componente.

Tipo:

desechar

Se activa cuando un Componente está dispuesto.

Tipo:
Oyentes de este evento:
Propiedades:
Nombre Tipo Atributos Predeterminado Descripción
burbujas booleano <optional>
falso

se establece en false para que el evento de deshacerse no se burbujee

listo

Se activa cuando un componente está listo.

Tipo:

toque

Se activa cuando un Componente se toca.

Tipo: