the - video html autoplay
html5: muestra el video dentro del lienzo (4)
Usar lienzo para mostrar videos
Mostrar un video es muy parecido a mostrar una imagen. Las pequeñas diferencias tienen que ver con los eventos de carga y el hecho de que necesitas renderizar el video en cada fotograma o solo verás un fotograma, no los cuadros animados.
La demostración a continuación tiene algunas diferencias menores con el ejemplo. Una función de silencio (debajo del video, haga clic en silenciar / sonido para alternar el sonido) y alguna comprobación de errores para capturar IE9 + y Edge si no tienen los controladores correctos.
Mantener las respuestas al día Las respuestas anteriores de user372551 están desactualizadas (diciembre de 2010) y tienen un defecto en la técnica de representación utilizada. Utiliza el setTimeout y una tasa de 33.333 ... ms, que setTimeout redondeará a 33 ms, esto hará que los fotogramas se eliminen cada dos segundos y que puedan caer muchos más si la velocidad de fotogramas del video es superior a 30. El uso de setTimeout también introducir el corte de video creado porque setTimeout no se puede sincronizar con el hardware de la pantalla.
Actualmente no hay un método confiable que pueda determinar la velocidad de fotogramas de un video, a menos que conozca la velocidad de fotogramas de video por adelantado, debe mostrarla a la velocidad máxima de actualización de pantalla posible en los navegadores. 60 fps
La respuesta principal dada fue por el momento (hace 6 años) la mejor solución ya que requestAnimationFrame no fue ampliamente compatible (si es que lo hizo) pero requestAnimationFrame ahora es estándar en los principales navegadores y debe utilizarse en lugar de setTimeout para reducir o eliminar los fotogramas caídos. y para evitar el cizallamiento.
El ejemplo de demostración.
Carga un video y lo establece en loop. El video no se reproducirá hasta que haga clic en él. Al hacer clic nuevamente se pausará. Hay un botón de silencio / sonido debajo del video. El video está silenciado por defecto.
Tenga en cuenta los usuarios de IE9 + y Edge. Es posible que no pueda reproducir el formato de video de WebM ya que necesita controladores adicionales para reproducir los videos. Se pueden encontrar en tools.google.com Descargar el soporte de IE9 + WebM
// This code is from the example document on stackoverflow documentation. See HTML for link to the example.
// This code is almost identical to the example. Mute has been added and a media source. Also added some error handling in case the media load fails and a link to fix IE9+ and Edge support.
// Code by Blindman67.
// Original source has returns 404
// var mediaSource = "http://video.webmfiles.org/big-buck-bunny_trailer.webm";
// New source from wiki commons. Attribution in the leading credits.
var mediaSource = "http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv"
var muted = true;
var canvas = document.getElementById("myCanvas"); // get the canvas from the page
var ctx = canvas.getContext("2d");
var videoContainer; // object to hold video and associated info
var video = document.createElement("video"); // create a video element
video.src = mediaSource;
// the video will now begin to load.
// As some additional info is needed we will place the video in a
// containing object for convenience
video.autoPlay = false; // ensure that the video does not auto play
video.loop = true; // set the video to loop.
video.muted = muted;
videoContainer = { // we will add properties as needed
video : video,
ready : false,
};
// To handle errors. This is not part of the example at the moment. Just fixing for Edge that did not like the ogv format video
video.onerror = function(e){
document.body.removeChild(canvas);
document.body.innerHTML += "<h2>There is a problem loading the video</h2><br>";
document.body.innerHTML += "Users of IE9+ , the browser does not support WebM videos used by this demo";
document.body.innerHTML += "<br><a href=''https://tools.google.com/dlpage/webmmf/''> Download IE9+ WebM support</a> from tools.google.com<br> this includes Edge and Windows 10";
}
video.oncanplay = readyToPlayVideo; // set the event to the play function that
// can be found below
function readyToPlayVideo(event){ // this is a referance to the video
// the video may not match the canvas size so find a scale to fit
videoContainer.scale = Math.min(
canvas.width / this.videoWidth,
canvas.height / this.videoHeight);
videoContainer.ready = true;
// the video can be played so hand it off to the display function
requestAnimationFrame(updateCanvas);
// add instruction
document.getElementById("playPause").textContent = "Click video to play/pause.";
document.querySelector(".mute").textContent = "Mute";
}
function updateCanvas(){
ctx.clearRect(0,0,canvas.width,canvas.height);
// only draw if loaded and ready
if(videoContainer !== undefined && videoContainer.ready){
// find the top left of the video on the canvas
video.muted = muted;
var scale = videoContainer.scale;
var vidH = videoContainer.video.videoHeight;
var vidW = videoContainer.video.videoWidth;
var top = canvas.height / 2 - (vidH /2 ) * scale;
var left = canvas.width / 2 - (vidW /2 ) * scale;
// now just draw the video the correct size
ctx.drawImage(videoContainer.video, left, top, vidW * scale, vidH * scale);
if(videoContainer.video.paused){ // if not playing show the paused screen
drawPayIcon();
}
}
// all done for display
// request the next frame in 1/60th of a second
requestAnimationFrame(updateCanvas);
}
function drawPayIcon(){
ctx.fillStyle = "black"; // darken display
ctx.globalAlpha = 0.5;
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = "#DDD"; // colour of play icon
ctx.globalAlpha = 0.75; // partly transparent
ctx.beginPath(); // create the path for the icon
var size = (canvas.height / 2) * 0.5; // the size of the icon
ctx.moveTo(canvas.width/2 + size/2, canvas.height / 2); // start at the pointy end
ctx.lineTo(canvas.width/2 - size/2, canvas.height / 2 + size);
ctx.lineTo(canvas.width/2 - size/2, canvas.height / 2 - size);
ctx.closePath();
ctx.fill();
ctx.globalAlpha = 1; // restore alpha
}
function playPauseClick(){
if(videoContainer !== undefined && videoContainer.ready){
if(videoContainer.video.paused){
videoContainer.video.play();
}else{
videoContainer.video.pause();
}
}
}
function videoMute(){
muted = !muted;
if(muted){
document.querySelector(".mute").textContent = "Mute";
}else{
document.querySelector(".mute").textContent= "Sound on";
}
}
// register the event
canvas.addEventListener("click",playPauseClick);
document.querySelector(".mute").addEventListener("click",videoMute)
body {
font :14px arial;
text-align : center;
background : #36A;
}
h2 {
color : white;
}
canvas {
border : 10px white solid;
cursor : pointer;
}
a {
color : #F93;
}
.mute {
cursor : pointer;
display: initial;
}
<h2>Basic Video & canvas example</h2>
<p>Code example from Stackoverflow Documentation HTML5-Canvas<br>
<a href="https://stackoverflow.com/documentation/html5-canvas/3689/media-types-and-the-canvas/14974/basic-loading-and-playing-a-video-on-the-canvas#t=201607271638099201116">Basic loading and playing a video on the canvas</a></p>
<canvas id="myCanvas" width = "532" height ="300" ></canvas><br>
<h3><div id = "playPause">Loading content.</div></h3>
<div class="mute"></div><br>
<div style="font-size:small">Attribution in the leading credits.</div><br>
Extras de lienzo
Usar el lienzo para renderizar video le da opciones adicionales con respecto a mostrar y mezclar en fx. La siguiente imagen muestra algunos de los efectos que puede obtener utilizando el lienzo. El uso de la API 2D ofrece una gran variedad de posibilidades creativas.
Imagen relacionada con la respuesta Fade canvas video de escala de grises a color
Vea el título del video en la demostración anterior para la atribución del contenido en la imagen anterior.
¿es posible mostrar un video html5 como parte del lienzo?
básicamente de la misma manera que dibujas una imagen en el lienzo.
context.drawVideo(vid, 0, 0);
¡Gracias!
Me gustaría proporcionar una solución que utiliza una sintaxis más moderna y es menos detallada que las ya proporcionadas:
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const video = document.querySelector("video");
video.addEventListener(''play'', () => {
function step() {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
requestAnimationFrame(step)
}
requestAnimationFrame(step);
})
Algunos enlaces útiles:
Necesita actualizar el elemento de video currentTime y luego dibujar el marco en lienzo. No inicie el evento play () en el video.
También puedes usar por ej. este complemento https://github.com/tstabla/stVideo
var canvas = document.getElementById(''canvas'');
var ctx = canvas.getContext(''2d'');
var video = document.getElementById(''video'');
video.addEventListener(''play'', function () {
var $this = this; //cache
(function loop() {
if (!$this.paused && !$this.ended) {
ctx.drawImage($this, 0, 0);
setTimeout(loop, 1000 / 30); // drawing at 30fps
}
})();
}, 0);
Supongo que el código anterior es auto explicativo, si no deja caer un comentario a continuación, voy a tratar de explicar las pocas líneas de código anteriores
Editar :
aquí hay un ejemplo en línea, solo para ti :)
Demo
var canvas = document.getElementById(''canvas'');
var ctx = canvas.getContext(''2d'');
var video = document.getElementById(''video'');
// set canvas size = video size when known
video.addEventListener(''loadedmetadata'', function() {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
});
video.addEventListener(''play'', function() {
var $this = this; //cache
(function loop() {
if (!$this.paused && !$this.ended) {
ctx.drawImage($this, 0, 0);
setTimeout(loop, 1000 / 30); // drawing at 30fps
}
})();
}, 0);
<div id="theater">
<video id="video" src="http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv" controls="false"></video>
<canvas id="canvas"></canvas>
<label>
<br />Try to play me :)</label>
<br />
</div>