html5: l'affichage de la vidéo à l'intérieur de la toile

À l'aide de toile pour afficher des Vidéos

L'affichage d'une vidéo est à peu près le même que l'affichage d'une image. Les différences mineures sont à faire avec onload événements et le fait que vous avez besoin de rendre la vidéo à chaque image ou vous ne verrez qu'une seule image et non pas de l'animation des cadres.

La démo ci-dessous a quelques différences mineures pour l'exemple. Une fonction de mise en sourdine (sous la vidéo cliquez sur couper le son/son sur pour basculer le son) et certains vérification des erreurs pour attraper IE9+ et Edge s'ils n'ont pas les bons pilotes.

En gardant les réponses actuelles.

Les réponses précédentes par user372551 est pas à jour (décembre 2010) et a une faille dans la technique de rendu utilisé. Il utilise le setTimeout et un taux de 33.333..ms qui setTimeout va arrondir à 33ms ce sera la cause de la sautement toutes les deux secondes et peut descendre beaucoup plus si le taux d'image vidéo est plus que de 30. À l'aide de setTimeout va également introduire la vidéo de cisaillement créé parce que setTimeout ne peuvent pas être synchronisés avec le matériel d'affichage.

Il n'existe actuellement aucune méthode fiable permettant de déterminer une des vidéos de taux de trame, sauf si vous connaissez le taux d'image vidéo à l'avance, vous devez l'afficher au maximum d'affichage taux de rafraîchissement possible sur les navigateurs. 60fps

La première réponse a été pour le moment (il y a 6 ans) la meilleure solution en tant que requestAnimationFrame n'a pas été largement pris en charge (le cas échéant), mais requestAnimationFrame est maintenant la norme dans les Principaux navigateurs et doit être utilisé au lieu de setTimeout pour réduire ou supprimer la perte de trames, et afin d'éviter tout cisaillement.

L'exemple de démonstration.

Charge une vidéo et à boucle. La vidéo ne sera pas jouer jusqu'à ce que vous cliquez sur elle. Cliquez de nouveau pour faire une pause. Il est muet/son sur le bouton situé sous la vidéo. La vidéo est désactivé par défaut.

Remarque les utilisateurs de IE9+ et Edge. Vous ne pouvez pas être en mesure de lire la vidéo au format WebM, car elle a besoin de pilotes supplémentaires pour lire les vidéos. Ils peuvent être trouvés à tools.google.com Téléchargement IE9+ support de WebM

JS:

//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)

CSS:

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;   
}

HTML:

<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>

Toile extras

L'aide de la toile pour rendre la vidéo vous donne des options supplémentaires en ce qui concerne l'affichage et le mélange dans le fx. L'image suivante montre une partie de la FX, vous pouvez obtenir de l'aide de la toile. À l'aide de l'API 2D donne une vaste gamme de possibilités créatives.

Image relatives à la réponse Fondu toile la vidéo à partir de niveaux de gris de la couleur

_{Voir le titre de la vidéo de démo ci-dessus pour l'attribution d'un contenu ci-dessus inmage.}

Vous devez mettre à jour currentTime élément vidéo, puis dessiner le cadre de la toile. Ne pas init play() de l'événement sur la vidéo.

Vous pouvez également l'utiliser pour ex. ce plugin https://github.com/tstabla/stVideo