Videos en el canvas
Algunas propiedades métodos y eventos utilizados con video.
| Tipo | Descripción | |
|---|---|---|
| video.loop | propiedad | booleano (true / false)si video.loop == true el video se reproduce en bucle continuo.si video.loop == false el video se reproduce una sola vez
|
| video.muted | propiedad | booleano (true / false)Se utiliza para activar o desactivar el sonido del video |
| video.paused | propiedad | booleano (true / false)Es true si el video está en pausa; es false si el video se está reproduciendo.
|
| video.ended | propiedad | booleano (true / false)Es true si el video se ha acabado; de lo contrario es false
|
| video.controls | propiedad | booleano (true / false)Controla si el usuario puede ver los controladores del video o no. Podemos conseguir lo mismo utilizando el atributo controls en el HTML |
| video.currentTime | propiedad | Es una propiedad que devuelve o establece el tiempo transcurrido en segundos desde el inicio del video. |
| video.duration | propiedad | Es una propiedad que devuelve la duración del video en segundos. |
| video.volume | propiedad | Es una propiedad que controla el volumen del sonido. Puede tomar valores entre 0 y 1 |
| video.pause() | método | Un método para parrar un video que se está reproduciendo. |
| video.play() | método | Un método para parrar un video que está parado. |
| loadeddata | evento | El evento loadeddata se dispara cuando el cuando se ha cargado la primera fotograma del video. |
| play | evento | El evento play se dispara cuando el valor de la propiedad paused cambia después de llamar el método play() o como resultado del atributo autoplay. |
| ended | evento | El evento ended se dispara cuando el video se ha parado porque ha llegado al final o porque ya no existen datos disponibles. |
| pause | evento | El evento pause se dispara cuando el video se ha parado, normalmente después de llamar el método pause() |
A continuación un ejemplo básico en el cual estoy utilizando algunas de estas propiedades, métodos y eventos:
See the Pen video ABC*** by Gabi (@enxaneta) on CodePen.
Cómo pintar el vídeo en el canvas de HTML5
Pintar el vídeo en el canvas puede ser muy útil si queremos añadir efectos especiales. A continuación: un ejemplo muy básico.
Para pintar un video en el canvas utilizamos el evento play que se dispara mientras que el video se está reproduciendo. Si el video está en pausa o se ha acabado ( if(vid.paused || vid.ended) ) no hay que hacer nada ( return ). De lo contrario pintamos el video como si se tratara de una imagen.: ctx.drawImage(vid, 0, 0, cw, ch);
See the Pen video canvas*** by Gabi (@enxaneta) on CodePen.
También podemos utilizar la webcam para crear un video, y de la misma manera pintarlo en el canvas. Por favor vea este ejemplo en CodePen: VIDEO getUserMedia