PlayProgressBar(jugador, opcionesoptar)

Usado por Barra de busqueda para mostrar el progreso de la reproducción de medios como parte del ProgressControl.

nuevo PlayProgressBar(jugador, opcionesoptar)

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 los jugadores.

Extiende

Métodos

$ (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

Anulaciones:
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

Anulaciones:
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.

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 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.

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 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.

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:

crearEl () → {Elemento}

Cree el elemento DOM para esta clase.

Devoluciones:
Elemento -

El elemento que se creó.

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.

Devoluciones:
Componente~DimensionObject-

Las dimensiones calculadas del elemento del componente.

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 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

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 componentes.

altura number | string

Altura en la que se establece el elemento componentes.

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 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
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 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.

Anulaciones:

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.

Anulaciones:

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.

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ó 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.

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 el Componente no tiene la clase`
Anulaciones:

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 Componentsi 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 secundariospredeterminados 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á 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.

Anulaciones:

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.

Anulaciones:

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.

Anulaciones:

jugador () → { Jugador }

Devuelve el Jugador que el Componente se ha adjuntado a.

Devoluciones:
Jugador-

El jugador que este 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.

Devoluciones:
Componente-

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

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 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.

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:

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.

Anulaciones:
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.

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 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.

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.

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:

actualización(SeekBarrect, SeekBarPoint)

Coloca las actualizaciones en su propio DOM, así como en el DOM de su TimeTooltip niño.

Parámetros:
Nombre Tipo Descripción
Busque Barrect Objeto

los ClientRect Para el Barra de busqueda elemento.

Busque el punto de barra número

Un número comprendido entre 0 y 1, que representa un punto de referencia horizontal desde el borde izquierdo de la barra de búsqueda

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: