Componente VJS

Índice API

EXTENDE : vjs.CoreObject
DEFINIDO EN : src/js/component.js#L35

Clase de componente de UI base

Los componentes son objetos de IU incrustables que están representados tanto por un objeto javascript como por un elemento del DOM. Pueden ser hijos de otros componentes y pueden tener muchos hijos ellos mismos.

// agregando un boton al reproductor
botón var = jugador.addChild('botón');
boton.el(); // -> elemento de botón

<div class="video-js">
  <div class="vjs-button">Button</div>
</div>

Los componentes también son emisores de eventos.

botón.on('clic', función(){
  console.log('¡Botón presionado!');
});

button.trigger('evento personalizado');

MÉTODOS

addChild (child, [opciones])

Añade un componente hijo dentro de este componente

miComponente.el();
// -> < div class='mi-componente'>< /div>
miComponente.niños();
// [matriz vacía]

var myButton = myComponent.addChild('MyButton');
// -> < div class='mi-componente'>< div class="mi-boton"> miBoton< división>< /div>
// -> miBotón === miComponente.niños()[0];

Pasar opciones para constructores secundarios y opciones para hijos del niño

var miBotón = miComponente.addChild('MiBotón', {
  texto: 'Presionarme',
  niños: {
    buttonChildEjemplo: {
      buttonChildOption: verdadero
    }
  }
});
PARÁMETROS:
  • cadena secundario|VJS.Component Nombre de clase o instancia de un hijo que se va a agregar
  • options Object (OPCIONAL) Opciones, incluidas las opciones que se pasarán a los hijos del hijo.
DEVUELVE:
  • vjs.component El componente hijo (creado por este proceso si se ha utilizado una cadena)

definido en : src/js/component.js#L343

Agregar clase (clase para agregar)

Agregar un nombre de clase CSS al elemento del componente

PARÁMETROS:
  • ClassToAdd String Classname para agregar
DEVUELVE:
  • Componente VJS

definido en : src/js/component.js#L628

Crear clase CSS ()

Permite que los subcomponentes apilen nombres de clase CSS

DEVUELVE:
  • String El nombre de la clase construida

definido en : src/js/component.js#L471

niños ()

Obtenga una matriz de todos los componentes secundarios

var niños = miComponente.niños();
DEVUELVE:
  • Array Los niños

definido en : src/js/component.js#L277

contenido en el ()

Devuelve el elemento DOM del componente para incrustar contenido. Será el_ o un nuevo elemento definido en CreateEl.

DEVUELVE:
  • Elemento

definido en : src/js/component.js#L220

CreaEl ([nombre de etiqueta], [atributos])

Cree el elemento DOM del componente

PARÁMETROS:
  • tagName Cadena (OPCIONAL) Tipo de nodo del elemento. por ejemplo, 'div'
  • atributos Objeto (OPCIONAL) Un objeto de atributos de elemento que debe establecerse en el elemento
DEVUELVE:
  • Elemento

definido en : src/js/component.js#L190

dimensiones (ancho, alto)

Establecer la anchura y la altura al mismo tiempo

PARÁMETROS:
  • ancho Número|Cadena
  • altura Número|Cadena
DEVUELVE:
  • vjs.component El componente

definido en : src/js/component.js#L737

disable ()

Desactiva el componente haciendo que no se muestre

definido en : src/js/component.js#L691

disponer ()

Elimine el componente y todos los componentes secundarios

definido en : src/js/component.js#L74

el ()

Obtener el elemento DOM del componente

var domEl = miComponente.el();
DEVUELVE:
  • Elemento

definido en : src/js/component.js#L201

getChild (nombre)

Devuelve un componente secundario con el nombre proporcionado

PARÁMETROS:
  • nombre
DEVUELVE:
  • Componente VJS

definido en : src/js/component.js#L311

getChildById (id)

Devuelve un componente secundario con el identificador proporcionado

PARÁMETROS:
  • id
DEVUELVE:
  • Componente VJS

definido en : src/js/component.js#L294

height ([num], [Skiplisteners])

Obtener o establecer la altura del componente (valores CSS)

La configuración de los valores de dimensión de las etiquetas de vídeo solo funciona con valores en píxeles. Los valores porcentuales no funcionarán. Se pueden utilizar algunos porcentaje, pero width () /height () devolverá el número +%, no el ancho/alto calculados reales.

PARÁMETROS:
  • num Número|Cadena (OPCIONAL) Altura del nuevo componente
  • skipListeners Booleano (OPCIONAL) Saltar el activador del evento de cambio de tamaño
DEVUELVE:
  • vjs.component Este componente, al configurar la altura
  • Número|String La altura, al obtener

definido en : src/js/component.js#L726

hide ()

Ocultar el elemento componente si se muestra actualmente

DEVUELVE:
  • Componente VJS

definido en : src/js/component.js#L659

id ()

Obtener el ID del componente

var id = miComponente.id();
DEVUELVE:
  • cuerda

definido en : src/js/component.js#L239

init (reproductor, opciones, listo)

la función constructora de la clase

PARÁMETROS:
  • jugador
  • opciones
  • listo

definido en : src/js/component.js#L41

Init Niños ()

Agregar e inicializar componentes secundarios predeterminados desde las opciones

// cuando se crea una instancia de MyComponent, todos los hijos en opciones
// se agregará a la instancia por sus cadenas de nombre y opciones
MiComponente.prototipo.opciones_.niños = {
  myChildComponent: {
    myChildOption: verdadero
  }
}

definido en : src/js/component.js#L439

nombre ()

Obtén el nombre del componente. El nombre se utiliza a menudo para hacer referencia al componente.

var nombre = miComponente.nombre();
DEVUELVE:
  • cuerda

definido en : src/js/component.js#L258

off ([type], [fn])

Eliminar un detector de eventos del elemento del componente

myComponent.off("nombreEvento", myFunc);
PARÁMETROS:
  • tipo Cadena (OPCIONAL) Tipo de evento. Sin tipo, eliminará a todos los oyentes.
  • fn Función (OPCIONAL) Oyente de eventos. Sin fn, eliminará todos los oyentes de un tipo.
DEVUELVE:
  • Componente VJS

definido en : src/js/component.js#L510

on (tipo, fn)

Agregar un detector de eventos al elemento de este componente

var myFunc = function(){
  var myPlayer = this;
  // Hacer algo cuando se dispara el evento
};

myPlayer.on("nombreEvento", myFunc);

El contexto será el componente.

PARÁMETROS:
  • type String El tipo de evento, por ejemplo, 'clic'
  • fn Function El detector de eventos
DEVUELVE:
  • vjs.componente auto

definido en : src/js/component.js#L496

one (tipo, fn)

Añadir un detector de eventos para activarlo solo una vez y luego eliminarlo

PARÁMETROS:
  • type String Tipo de evento
  • fn Función de escucha de eventos
DEVUELVE:
  • Componente VJS

definido en : src/js/component.js#L522

opciones (obj)

Fusión profunda de objetos de opciones

Siempre que una propiedad sea un objeto en ambos objetos options, las dos propiedades se fusionarán utilizando vjs.obj.DeepMerge.

Se utiliza para combinar opciones de componentes secundarios. Queremos que sea fácil anular las opciones individuales de un componente secundario sin tener que volver a escribir todas las demás opciones predeterminadas.

Padre.prototipo.opciones_ = {
  niños: {
    'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
    'niñoDos': {},
    'niñoTres': {}
  }
}
nuevasOpciones = {
  niños: {
    'niñoUno': { 'foo': 'baz', 'abc': '123' }
    'niñoDos': nulo,
    'niñoCuatro': {}
  }
}

this.options(nuevasOpciones);

RESULTADO

{
  niños: {
    'niñoUno': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
    'childTwo': nulo, // Deshabilitado. No se inicializará.
    'niñoTres': {},
    'niñoCuatro': {}
  }
}
PARÁMETROS:
  • obj Objeto Objeto de nuevos valores de opción
DEVUELVE:
  • Objeto NUEVO objeto de esto.opciones_ y obj fusionados

definido en : src/js/component.js#L169

jugador ()

Devolver el reproductor del componente

DEVUELVE:
  • VJS. Reproductor

definido en : src/js/component.js#L116

listo (fn)

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

PARÁMETROS:
  • fn Función Oyente listo
DEVUELVE:
  • Componente VJS

definido en : src/js/component.js#L581

RemoveChild (componente)

Eliminar un componente hijo de la lista de hijos de este componente y el elemento del componente hijo del elemento de este componente

PARÁMETROS:
  • componente vjs.componente componente que se va a quitar

definido en : src/js/component.js#L401

Quitar clase (clase para quitar)

Eliminar un nombre de clase CSS del elemento del componente

PARÁMETROS:
  • ClassToRemove String Classname para eliminar
DEVUELVE:
  • Componente VJS

definido en : src/js/component.js#L639

show ()

Mostrar el elemento componente si está oculto

DEVUELVE:
  • Componente VJS

definido en : src/js/component.js#L649

trigger (tipo, evento)

Activar un evento en un elemento

myComponent.trigger('nombreEvento');
PARÁMETROS:
  • type String El tipo de evento que se va a activar, por ejemplo, «clic»
  • event Event|Objeto El objeto de evento que se va a pasar al agente de escucha
DEVUELVE:
  • vjs.componente auto

definido en : src/js/component.js#L536

Listo para activadores ()

Activa a los oyentes listos

DEVUELVE:
  • Componente VJS

definido en : src/js/component.js#L600

width ([num], Skiplisteners)

Establecer u obtener el ancho del componente (valores CSS)

La configuración de los valores de dimensión de las etiquetas de vídeo solo funciona con valores en píxeles. Los valores porcentuales no funcionarán. Se pueden utilizar algunos porcentaje, pero width () /height () devolverá el número +%, no el ancho/alto calculados reales.

PARÁMETROS:
  • num Número|Cadena (OPCIONAL) Número de ancho opcional
  • skipListeners Boolean Saltar el activador del evento 'redimensionar'
DEVUELVE:
  • vjs.component Este componente, al configurar la anchura
  • Número|String El ancho, al obtener

definido en : src/js/component.js#L709

EVENTOS

cambiar tamaño EVENT

Disparado cuando cambian la anchura y/o la altura del componente

definido en : src/js/component.js#L816