HTML5 Video - labra/cursos/html5/presentaciones/HTML5_videآ  HTML5 Contenido multimedia en Web Flash

  • View
    1

  • Download
    0

Embed Size (px)

Text of HTML5 Video - labra/cursos/html5/presentaciones/HTML5_videآ  HTML5 Contenido multimedia en Web...

  • HTML5

    Video - Audio

    Edita Hovhannisyan

  • HTML5

    Contenido multimedia en Web Flash Player (Adobe)

    Descargar plugin de terceros

    HTML5

    Etiquetas y

    Se integra contenido multimedia en la pagina web

    No es necesario descargar software de terceros

  • Conceptos básicos

    Contenedor de video Almacena todos los datos necesarios que forman el archivo de video.

    Información de Audio

    Información de video

    Metadatos que describen contenidos

    Las pistas de vídeo y audio están comprimidas

    VIDEO

    AUDIO

    M

    E

    T

    A

    D

    A

    T

    O

    S

    Contenedor

  • Conceptos básicos

    Códec de vídeo y audio Algoritmo para codificar y decodificar un flujo de datos multimedia…

    En el caso del video HTML5

    Decodificación y reproducción de videos

    Ejemplos:

    Video:H.264, VP8

    Audio: AAC, Vorbis

    El contenedor de video, códec de video, códec de audio no hay un estándar.

  • Contenedores de video soportados por HTML

    Ogg

    Desarrollado por la Fundación Xiph.org,Sin patenetes y libre

    La extensión ".ogg" pueden ser tipo de archivo audio (.oga ) o vídeo(ogv)

    Codec de video Theora

    Codec de audio Vorbis

    MPEG-4

    Desarrollado por MPEG (Moving Picture Experts Group)

    Codec de video H.264

    Codec de audio AAC

    WebM

    Contenedor de vídeo abierto y libre desarrollado por Google

    Codec de video VP8

    Codec de audio Vorbis

  • Contenedores soportados por los navegadores

    Contenedor

    Ogg [Theora/ Verbis]

    - - - -

    MPEG-4 [H.264/ AAC]

    - -

    WebM [VP8/ Verbis]

    - -

    * IE9 soporta WebM con codec VP8 si el usuario ha instalado el codec VP8

  • Etiqueta

    Atributos:

    width/height

    Solo pueden ser valores enteros

    Se miden en píxeles

    height

    width

  • Etiqueta

    controls

    Atributo booleano

    Al incluir en el código = navegador pone los controles

    visibles

  • Etiqueta

    autoplay

    Atributo booleano

    Safari en iPhone lo ignora

    loop

    Atributo booleano

  • Etiqueta

    Preload

    auto: el video y sus metadatos asociados empezarán a cargarse

    antes de reproducirse => cuando el usuario lo solicite la respuesta

    es más rápida

    none: no se carga el vídeo en segundo plano

    metadata: solo se cargan los metadatos asociados, como

    dimensiones, duración.

    Si se omite => depende del navegador el valor del atributo

    Load…

  • Etiqueta

    poster

    La imagen que aparece al cargar el video

    En iOS3(corregido en iOS4) no se reproduce el video

    si existe el atributo

    muted

    El video por defecto está en silencio

  • Etiqueta

    track

    Texto asociado a la imagen y al sonido

    Subtítulos, comentarios, traducciones

    El formato WebVTT (Web Video Text Tracks)

    Propuesta del Web Hypertext Application Technology

    Working Group (WHATWG) para generar los

    subtítulos estándar para los videos en HTML5

  • Ejemplo fichero WebVTT

    00:00:01.000 --> 00:00:10.000

    El primer texto, se visualizará lo primeros 10 segundos del video.

    00:00:15.000 --> 00:00:20.000 La segunda línea de texto se visualizará desde el segundo 15 hasta el 20

    El formato es: hh:mm:ss.mmm

  • Descarga mirovideoconverter

    http://www.mirovideoconverter.com/

    Descarga un video

    Chrome: YouTube Downloader

    Firefox: Click YouTube Video Download

    Muestra tu video en la web!!!

    http://www.mirovideoconverter.com/ http://www.mirovideoconverter.com/

  • Ejemplo

    Ejemplo Video HTML5!

    Ejemplos Videos

  • Soporte para multiples formatos

    Elemento source

    Permite que cada navegador cargue el video con su

    formato

    atributo type Permite al navegador determinar si puede

    reproducir el video, en caso contrario el navegador no descarga el video.

  • Modifica tu fichero para que el video se visualice en varios

    navegadores.

  • Ejemplo

    Ejemplo Video HTML5!

    Ejemplos Videos

  • ¿Qué pasa con IE anteriores al 9?

    Muchos usuarios que usan versiones 6 – 8 de IE

    Navegadores que no reconocen el atributo video lo

    ignoran

    Si la etiqueta video tiene HTML válido los navegadores lo

    muestran

    Según Adobe el 99% de los usuarios tiene el plugin de

    Flash instalado

  • ¿Qué pasa con IE anteriores al 9?

    Descarga JW Player de LongTail

  • API JavaScript

    Ejemplo modificar controles de video

    Incluir la hoja de estilo estilo.css

    Modificar el html5 para poder hacer referencia a los

    elementos video y controls

    Play/Pause 00:00

    Mute/Unmute

  • API JavaScript - ejemplo

    videoEl.addEventListener('canplay', function () {

    videoEl.removeAttribute("controls");

    }, false);

    Ocultar los controles: Eliminar controls del código html Problema usuarios sin JavaScript

    addEventListener escucha el evento especificado que ocurre en

    el elemento objetivo.

  • API elementos multimedia

    canplay

    evento que se activa tan pronto puede reproducir el

    video

    canplaythrough

    evento que se activa si el navegador puede reproducir

    el video hasta el final

  • Reproducir y pausar video

    playPauseBtn.addEventListener('click', function () {

    if (videoEl.paused) {

    videoEl.play();

    } else {

    videoEl.pause();

    }

    }, false);

    paused

    verifica si el video se esta reproduciendo o no

    devuelvo true, si el video no se está reproduciendo play()

    activa el video desde su última posición de pausa

    pause() detiene la reproducción del video

  • API JavaScript - ejemplo

    videoEl.addEventListener('pause', function () {

    playPauseBtn.removeClass("playing");

    playPauseBtn.title = "Play";

    }, false);

    pause evento que se activa cuando se detiene la

    reproducción del video

    play evento que se activa cuando se reproduce el

    video

  • Activar/Desactivar Silencio

    muteBtn.addEventListener('click', function () { if (videoEl.muted) {

    videoEl.muted = false; }

    else { videoEl.muted = true; }

    }, false);

    muted true si el sonido está en silenciado false en el caso contrario

    No existe evento mute/unmute como en pausa/play Existe el evento volumenchange

  • Evento ended

    ended se activa cuando el video llega al final y se

    detiene

    Ejemplo:Cuando el video llegue a su fin, ponlo al principio.

    currentTime representa la posición actual de reproducción

  • Solución ejemplo end video

    videoEl.addEventListener('ended', function () {

    videoEl.currentTime = 0;

    videoEl.pause();

    }, false);

  • Evente timeupdate

    timeupdate

    el evento se activa cada vez que cambia la hora del

    video

    videoEl.addEventListener('timeupdate', function () { timeHolder.innerHTML =videoEl.currentTime;

    }, false);

  • Más Eventos…

    loaddedata:

    se ha cargado el primer fotograma de la multimedia

    seeking:

    se ha comenzado una operación de búsqueda

    seeked:

    se ha completado una operación de búsqueda

    error:

    ha ocurrido un error

  • Más Atributos…

    duration:

    devuelve la longitud del video en segundos

    readState

    devuelve un númerico entre 0 -4

    representa el nivel de disponibilidad del elemento multimedia

    src

    devuelve el valor de la URL del video que se reproduce, solo si el

    elemento video tiene el atributo src

    currentSrc

    devuelve el valor de la URL del video que se reproduce, si el video o

    source tiene el atributo src

    playbackRate

    El índice de reproducción pòr defecto es 1, se puede agilizar o

    ralentizar.Uso rebobinar o cámara lenta.

  • Ejercicio:

    Añade un botón para visualizar el vídeo en pantalla

    completa

    Chrome y Safari: webkitEnterFullScreen();

    Firefox: mozRequestFullScreen();

  • Solución

    pantallaCompleta.addEventListener('click', function () {

    //Para Chrome y Safari

    videoEl.webkitEnterFullScreen();

    //Para firefox

    videoEl.mozRequestFullScreen();

    }, false);

  • Ejercicio

    Visualizar dos videos en la misma página Web

    Desde el video 1 controlar el segundo video y viceversa.

  • Etiqueta

    Soporta los siguientes formatos:

    MP3

    Ogg

    WAV

    Los atributos de video se pueden utilizar con el audio

    No todos los navegador