nuevo ResizeManager(jugador, opcionesoptar)
Cree el ResizeManager.
Parámetros:
Nombre | Tipo | Atributos | Descripción | ||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
jugador |
Objeto |
El |
|||||||||
opciones |
Objeto |
<optional> |
El almacén de clave / valor de las opciones de ResizeManager. Propiedades
|
Ejemplo
reproductor const = videojs('#vid', {
resizeManager: falso
});
Extiende
Métodos
-
$ (selector, opción de contexto) → {Elemento|null}
-
Busque un único elemento DOM que coincida con un
selector
. Puede estar dentro delcomponente
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. Sithis.contentel () no
devuelve nada, vuelve aldocumento
.Devoluciones:
Elemento | null -el elemento dom que se encontró, o nulo
- Anulaciones:
- Ver:
-
$$ (selector, opción de contexto) → {NodeList}
-
Busca todos los elementos DOM que coinciden con un
selector
. Puede estar dentro delcomponente
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. Sithis.contentel () no
devuelve nada, vuelve aldocumento
.Devoluciones:
Lista de nodos -una lista de elementos dom que se encontraron
- Anulaciones:
- Ver:
-
addChild (hijo, opciones optar , índice optar ) → { Componente }
-
Agregue un
componente hijo
dentro delcomponente 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.- Anulaciones:
-
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
- Anulaciones:
-
blur()
-
Eliminar el enfoque de este componente
- Anulaciones:
-
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.
- Anulaciones:
-
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.
- Anulaciones:
- 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.
- Anulaciones:
-
niños () → {matriz}
-
Obtenga una matriz de todos los componentes secundarios
Devoluciones:
Matriz -Los niños
- Anulaciones:
-
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 deWindow.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.
- Anulaciones:
- 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 deWindow.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.
- Anulaciones:
- 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
.- Anulaciones:
-
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.
- Anulaciones:
-
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.
- Anulaciones:
-
currentDimensions () → { Componente ~ DimensionObject }
-
Obtenga un objeto que contenga valores de anchura y altura calculados del elemento del componente.
Utiliza
Window.getComputedStyle
.- Anulaciones:
-
altura actual () → {número}
-
Obtenga la altura calculada del elemento del componente.
Utiliza
Window.getComputedStyle
.Devoluciones:
número -Altura calculada del elemento del componente.
- Anulaciones:
-
anchoActual () → {número}
-
Obtenga el ancho calculado del elemento del componente.
Utiliza
Window.getComputedStyle
.Devoluciones:
número -Ancho calculado del elemento del componente.
- Anulaciones:
-
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 elComponente
sstyle.width
y vuelve a caerwindow.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
- Anulaciones:
-
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
componente
s.altura
number | string Altura en la que se establece el elemento
componente
s.- Anulaciones:
-
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:
- Anulaciones:
-
el () → {Elemento}
-
Obtener el elemento DOM del
componente
Devoluciones:
Elemento -El elemento DOM de este
componente
.- Anulaciones:
-
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
ytocar
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 untocar
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
- Anulaciones:
-
focus()
-
Establezca el foco en este componente
- Anulaciones:
-
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.
- Anulaciones:
- Ver:
-
getChild (nombre) → { Componente |indefinido}
-
Devuelve el
componente secundario
con elnombre de pila
.Parámetros:
Nombre Tipo Descripción nombre
cuerda Nombre del
componente hijo que se
va a obtener.- Anulaciones:
-
getChildById (id) → { Componente |indefinido}
-
Devuelve el
componente hijo
con elidentificador dado
.Parámetros:
Nombre Tipo Descripción id
cuerda ID del
componente secundario que se
va a obtener.- Anulaciones:
-
getDescendant (…nombres) → { Componente |indefinido}
-
Devuelve el
componente descendiente
siguiendo losnombres 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 losnombres de descendientes dados
o no definido.- Anulaciones:
-
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.- Anulaciones:
-
HandleKeypress(evento)
-
Muchos componentes solían tener un
handleKeyPress
método, que fue mal nombrado porque escuchó unkeydown
evento. El nombre de este método ahora delega enHandleKeyDown
. Esto significa que cualquier persona que llame aHandleKeyPress 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.
- Anulaciones:
-
cambio de idioma del mango abstracto()
-
Gestiona el cambio de idioma del reproductor en los componentes. Debe ser anulado por subcomponentes.
- Anulaciones:
-
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 elComponente
no tiene la clase`
- Anulaciones:
- True si el
-
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'.
- Anulaciones:
-
hide()
-
Oculte el elemento de
Component
si se muestra actualmente añadiéndole el nombre de clase «vjs-hidden'.- Anulaciones:
-
id () → {cadena}
-
Obtener el ID
de este componente
Devoluciones:
cadena -El id de este
componente
- Anulaciones:
-
Init Niños()
-
Agregue e inicialice los
componentes secundarios
predeterminados en función de las opciones.- Anulaciones:
-
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
.- Anulaciones:
-
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á sobrecuerda
, 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 incluyaen.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.
- Anulaciones:
-
nombre () → {cadena}
-
Obtenga el nombre del
componente
. El nombre se utiliza para hacer referencia alcomponente
y se establece durante el registro.Devoluciones:
cadena -Nombre de este
componente
.- Anulaciones:
-
opciones (obj) → {Objeto}
-
Fusión profunda de objetos de opciones con nuevas opciones.
Nota: Cuando tanto
obj
comoopciones
contienen propiedades cuyos valores son objetos. Las dos propiedades se fusionan mediante Module:MergeOptionsParámetros:
Nombre Tipo Descripción obj
Objeto Objeto que contiene nuevas opciones.
Devoluciones:
Objeto -Un nuevo objeto de
esto.options_
yobj
se fusionaron.- Anulaciones:
-
jugador () → { Jugador }
-
Devuelve el Jugador que el
Componente
se ha adjuntado a.- Anulaciones:
-
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.
- Anulaciones:
-
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.
- Anulaciones:
- Ver:
-
RemoveChild(componente)
-
Quitar a un niño
Componente
de estoComponente
s lista de niños. Elimina también el elemento secundario delcomponente
s de este elementocomponente
.Parámetros:
Nombre Tipo Descripción componente
Componente El
componente secundario
que se va a quitar.- Anulaciones:
-
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
- Anulaciones:
-
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.
- Anulaciones:
- 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.
- Anulaciones:
-
resizeHandler()
-
Se llama cuando se activa un cambio de tamaño en el iframe o se observa un cambio de tamaño a través del ResizeObserver
Fuegos:
-
setAttribute(atributo, valor)
-
Establecer el valor de un atributo en el
Componente
elemento deParámetros:
Nombre Tipo Descripción atributo
cuerda Nombre del atributo que se va a establecer.
valor
cuerda Valor en el que establecer el atributo.
- Anulaciones:
- Ver:
-
setInterval (fn, intervalo) → {número}
-
Crea una función que se ejecuta cada
x
milisegundos. Esta función es un envoltorio alrededor deWindow.setInterval
. Sin embargo, hay algunas razones para usar este.- Se borra a través de Componente # clearInterval cuando Componente # desechar se llama.
- 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.
- Anulaciones:
- 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 deWindow.setTimeout
. Sin embargo, hay algunas razones para usar este:- Se borra a través de Componente # clearTimeout cuando Componente # desechar se llama.
- 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.
- Anulaciones:
- Ver:
-
show()
-
Muestre el elemento
Component
si está oculto eliminando el nombre de clase 'vjs-hidden'.- Anulaciones:
-
ToggleClass(ClassToggle,opt predicado)
-
Añada o elimine un nombre de clase CSS del elemento del componente.
ClassToToggle
se agrega cuando el componente #hasClass devuelve false.ClassToggle
se elimina cuando el componente #hasClass devuelve true.
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
- Anulaciones:
-
Listo para activadores()
-
Activa todos los oyentes listeners para este
componente
.Fuegos:
- Anulaciones:
-
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'.
- Anulaciones:
Eventos
-
tamaño de componente
-
Se activa cuando se cambia el tamaño de un componente.
Tipo:
- Anulaciones:
-
desechar
-
Se activa cuando un
Componente
está dispuesto.Tipo:
Propiedades:
Nombre Tipo Atributos Predeterminado Descripción burbujas
booleano <optional>
falso se establece en false para que el evento de deshacerse no se burbujee
- Anulaciones:
-
listo
-
Se activa cuando un
componente
está listo.Tipo:
- Anulaciones:
-
toque
-
Se activa cuando un
Componente
se toca.Tipo:
- Anulaciones: