O elemento video é unha das características máis salientables de HTML5, xa que permite aos desenvolvedores incorporar vídeos directamente en páxinas web sen necesidade de complementos externos como Flash. A través de varios atributos, propiedades, métodos e eventos , o elemento video ofrece control total sobre a reprodución de contido multimedia. Neste artigo, exploraremos cada unha destas características en detalle.
Atributos dos elementos video
Atributos dos elementos video Definen o seu comportamento e aparencia directamente desde o HTML. Todos os atributos máis relevantes están listados a continuación:
- src: Especifica o URL do ficheiro video que hai que reproducir. Este atributo é opcional se se usan elementos 'source' dentro do 'video' .
- controls: Mostra os controis predeterminados do navegador para a reprodución, como o botón de reprodución, a barra de progreso, o control de volume, etc.
- autoplay: Indica que o video Debería comezar a xogar automaticamente o antes posible, en canto se teña cargado o suficiente.
- loop: Fai o video xoga nun bucle continuo, comezando de novo cando remata.
- muted: Fai o video xoga sen son.
- póster : Define unha imaxe que se mostra mentres o video ou ata que o usuario inicie a reprodución.
- preload: suxírelle ao navegador como debe xestionar a carga do ficheiro video. Podes tomar os valores:
auto (precarga todos os ficheiros video), metadata (simplemente cargar previamente os metadatos) ounone(non precarga nada).
- width e height : Especifica as dimensións da área de visualización do video en píxeles.
- playsinline: Indica que o video debería xogarse en liña en lugar de no modo de pantalla completa nos dispositivos móbiles.
Propiedades dos elementos video
Propiedades dos elementos video permiten manipular o comportamento de video mediante JavaScript. As propiedades máis importantes descríbense a continuación:
- currentTime: Obtén ou define a posición de reprodución actual do video , en segundos. Útil para saltar a un punto específico do video .
- duration: Devolve a duración total do video en segundos. Se a duración non está dispoñible, devolve NaN .
- paused: Indica se o video está actualmente en pausa.
- ended: Indica se a reprodución do video acabouse.
- volume: Permítelle obter ou configurar o nivel de volume do video. O valor varía entre 0,0 (silencio) e 1,0 (volume máximo).
- muted: Determina se o video está silenciado. Pódese establecer como verdadeiro ou falso.
- playbackRate: Controla a velocidade de reprodución do video. Un valor de 1,0 representa a velocidade normal, mentres que os valores máis baixos a reducen e os valores máis altos a aumentan.
- readyState: Devolve o estado de carga do video. Os valores posibles son:
0 (HAVE_NOTHING), 1 (HAVE_METADATA), 2 (HAVE_CURRENT_DATA),
3 (HAVE_FUTURE_DATA)e 4 (HAVE_ENOUGH_DATA).
- seeking: Indica se o videoestá en proceso de procura dun novo posto de cría.
- buffered: Devolve un obxecto TimeRanges que indica as partes da video que foron tamponados.
- videoWidth e videoHeight: Devolve o ancho e o alto do video , respectivamente, en píxeles.
Métodos de elementos video
Métodos de elementos video permite aos desenvolvedores controlar a reprodución do video programáticamente. Os métodos máis utilizados descríbense aquí:
- play() : Inicia a reprodución do video. Se el video está en pausa, este método retoma a reprodución.
- pause(): Pausa a reprodución do video. Se el videoXa está en pausa, non ten efecto.
- load(): Recarga o video dende a súa orixe. Isto é útil se precisa recargar un video por algún motivo.
- canPlayType(type): Devolve un valor que indica se o navegador pode reproducir un tipo específico de ficheiro. video. Os valores posibles son:
"" (descoñecido), "probably" (probablemente reproducible) e "maybe" (quizais reproducible).
- addTextTrack(kind, label, language): Engade unha nova pista de texto (por exemplo, subtítulos) ao video. O parámetro kind podería ser "subtitles", "captions", "descriptions", "chapters" tampouco "metadata".
Eventos de elementos video
Eventos de elementos video Son esenciais para responder ás interaccións dos usuarios e aos cambios de estado durante a reprodución. A continuación móstranse os eventos máis comúns:
- play: desencadea cando o video comeza a xogar, xa sexa por unha acción do usuario ou polo método play() .
- pause: Activado cando se reproduce video para. Isto pode ocorrer cando o usuario fai unha pausa video ou cando se chama o método pause().
- ended: Ocorre cando o video chega ao final da súa duración e deixa de xogar.
- timeupdate: dispara periodicamente mentres se reproduce a canción. video e a posición de reprodución actual cambia.
- volumechange: Prodúcese cando o volume do video ou o silencio está activado/desactivado.
- loadeddata: dispara cando a batería está cargada suficientemente. video para que estea listo para iniciar a reprodución, pero antes de que se cargue por completo.
- loadedmetadata: ocorre cando os metadatos do video (por exemplo, duración, dimensións e pistas de texto).
- canplay : Indica que o video pode comezar a xogar, pero aínda non está cargado o suficiente para xogar completamente sen pausas.
- canplaythrough: desencadeouse cando o navegador estima que o video Pode xogarse na súa totalidade sen interrupcións.
- seeking: ocorre cando se inicia unha operación de busca, é dicir, cando o usuario ou o script cambia a posición de reprodución.
- seeked: disparado cando se completa unha operación de busca.
O elemento video ofrece unha gran flexibilidade e control para a reprodución video na web. Ao comprender e utilizar os seus atributos, propiedades, métodos e eventos, pode crear experiencias multimedia ricas adaptadas ás necesidades dos seus usuarios. Explora todas as posibilidades que ofrece e saca o máximo proveito desta poderosa ferramenta!
Comentar: