Est-il possible d'afficher une vidéo html5 en tant que partie du canevas ?
de la même manière que vous dessinez une image dans le canevas.
context.drawVideo(vid, 0, 0);Merci !
Réponses
Trop de publicités?
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);Je suppose que le code ci-dessus s'explique de lui-même, si ce n'est pas le cas, laissez un commentaire ci-dessous, je vais essayer d'expliquer les quelques lignes de code ci-dessus.
Editar :
Voici un exemple en ligne, juste pour vous :)
Démo
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>
user3877726
Points
11
Utilisation du canevas pour afficher des vidéos
L'affichage d'une vidéo est sensiblement le même que celui d'une image. Les différences mineures concernent les événements onload et le fait que vous devez rendre la vidéo à chaque image, sinon vous ne verrez qu'une seule image et non les images animées.
La démo ci-dessous présente quelques différences mineures par rapport à l'exemple. Une fonction de sourdine (sous la vidéo, cliquez sur mute/sound on pour activer le son) et une vérification des erreurs pour détecter IE9+ et Edge s'ils n'ont pas les bons pilotes.
Garder les réponses à jour.
Les réponses précédentes de utilisateur372551 est obsolète (décembre 2010) et présente un défaut dans la technique de rendu utilisée. Il utilise le setTimeout et un taux de 33.333..ms que setTimeout arrondira à 33ms, ce qui entraînera la perte d'images toutes les deux secondes et bien plus si le taux d'images vidéo est supérieur à 30. Utilisation de setTimeout introduira également un cisaillement vidéo créé parce que setTimeout ne peut pas être synchronisé avec le matériel d'affichage.
Il n'existe actuellement aucune méthode fiable permettant de déterminer la fréquence d'images d'une vidéo. Si vous ne connaissez pas la fréquence d'images de la vidéo à l'avance, vous devez l'afficher à la fréquence de rafraîchissement maximale possible sur les navigateurs. 60fps
La meilleure réponse donnée était pour l'époque (il y a 6 ans) la meilleure solution en tant que requestAnimationFrame n'était pas largement soutenu (voire pas du tout) mais requestAnimationFrame est désormais standard dans les principaux navigateurs et doit être utilisé à la place de setTimeout pour réduire ou supprimer les images perdues, et pour éviter le cisaillement.
L'exemple de démonstration.
Charge une vidéo et la met en boucle. La vidéo ne sera pas lue avant que vous ne cliquiez dessus. Un nouveau clic met la vidéo en pause. Il y a un bouton "mute/sound on" sous la vidéo. La vidéo est mise en sourdine par défaut.
Attention aux utilisateurs d'IE9+ et Edge. Il se peut que vous ne puissiez pas lire le format vidéo WebM car il nécessite des pilotes supplémentaires pour lire les vidéos. Vous pouvez les trouver à l'adresse suivante outils.google.com Télécharger IE9+ support 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 la toile
L'utilisation du canevas pour le rendu vidéo vous offre des options supplémentaires en ce qui concerne l'affichage et le mélange d'effets. L'image suivante montre certains des effets que vous pouvez obtenir en utilisant le canevas. L'utilisation de l'API 2D offre un large éventail de possibilités créatives.
Image relative à la réponse Passage d'une vidéo en échelle de gris à une vidéo en couleur. 
Voir le titre de la vidéo dans la démo ci-dessus pour l'attribution du contenu de l'image ci-dessus.
Developer Davo
Points
173
Voici une solution qui utilise une syntaxe plus moderne et qui est moins verbeuse que celles déjà fournies :
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);
})Quelques liens utiles :
Lysy
Points
1
Vous devez mettre à jour l'élément vidéo currentTime et ensuite dessiner le cadre dans le canevas. N'activez pas l'événement play() sur la vidéo.
Vous pouvez aussi utiliser par exemple ce plugin https://github.com/tstabla/stVideo
