Comment implémenter la fonction de capture d'écran vidéo avec Canvas et h5

Cette fois, je vais vous montrer comment implémenter la fonction de capture d'écran vidéo avec Canvas et h5. Quelles sont les précautions pour implémenter la fonction de capture d'écran vidéo avec Canvas et h5. est un cas pratique. Jetons un coup d'oeil.

J'ai étudié la toile pendant cette période, et j'ai soudain pensé à créer une fonction qui puisse prendre des captures d'écran de vidéos, puis extraire les images pour créer des émoticônes, hahahahaha~~

Méthode de production :

1. Chargez la vidéo sur la page

Lorsque vous utilisez Canvas pour créer cette fonction de capture d'écran, vous devez d'abord vous assurer que la vidéo a été chargé sur la page, afin qu'elle puisse être utilisée facilement. Si vous utilisez la méthode suivante pour intégrer directement la balise

<video loop controls id="testmp4" width="500" height="400" >    
<source src="test.mp4" type="video/mp4">  
<source src="test.webm" type="video/webm">   
<source src="test.ogg" type="video/ogg">
</video>

Comme mentionné dans mon article "html5 et vidéo", les navigateurs prennent en charge différemment la progression du préchargement des vidéos et les événements de chargement. affecter la lecture de la vidéo et le déclenchement d’autres événements. Nous utilisons donc ici js pour construire une vidéo afin d'introduire la vidéo.

Soyez prudent lorsque vous introduisez des vidéos de cette manière. Plusieurs sources ne peuvent pas être introduites, vous devez donc d'abord déterminer la prise en charge des formats vidéo par le navigateur.

1.1 Utilisez la méthode canPlayType() de la vidéo pour déterminer le format pris en charge

La méthode canPlayType() doit transmettre un paramètre, qui est le paramètre du Format vidéo,

Valeurs communes : video/ogg;

Video/mp4;

🎜> 　 video/ogg;codecs="theora,vorbis"

video/mp4;codecs="avc1.4D401E, mp4a.40.2"

video/webm;codesc="vp8.0 , vorbis"

Valeur de retour : indique le niveau de support de la page Web : "probablement" - le plus susceptible d'être pris en charge (seulement ceci est renvoyé lorsque la valeur d'entrée a un encodeur) ; "peut-être" - éventuellement pris en charge ; ) n'est pas pris en charge

function videoType(video){
    var returnType='';
    if(video.canPlayType('video/mp4')=='probably'||video.canPlayType('video/mp4')=='maybe'){
    　　returnType= 'mp4';
    }else if(video.canPlayType('video/ogg')=='probably'||video.canPlayType('video/ogg')=='maybe'){<br> 　　　　returnType= 'ogg'; 　　 <br>　　 }else if(video.canPlayType('video/webm')=='probably'||video.canPlayType('video/webm')=='maybe'){<br> 　　　　returnType= 'webm'; 　　 <br>　　 }<br>　　 return returnType; 
}

Après avoir jugé les formats pris en charge par le navigateur, puisque j'utilise Chrome, j'ai le navigateur prend en charge la vidéo au format mp4, puis nous créons dynamiquement une balise vidéo. Puisque nous voulons créer une fonction de capture d'écran ici, une simple vidéo n'a pas d'interface de capture d'écran, nous devons donc la copier sur le canevas et lire la vidéo sur le canevas, donc ici nous mettons d'abord le vidéo Masquez-le (affichage

var videoElem;
var videop;
function createVideo(){
     videoElem=document.createElement("video");//创建video
     videop=document.getElementById("videopanel");//获取video的外层容器
     videop.appendChild(videoElem);
     var vtype=videoType(videoElem);//判断浏览器支持的格式
     if(vtype==""){
        videop.innerHtml('不支持video')
    }else{
        videoElem.setAttribute('src',"text."+vtype);
    }
}

2. Utilisez Canvas pour copier la vidéo

Maintenant que la vidéo a été lue sur le navigateur, nous allons la copier sur Canvas. Créez d’abord le canevas, puis récupérez le contexte du canevas, dans lequel je n’entrerai pas. Comment dessiner une vidéo sur toile, ici nous devons utiliser une fonction. Utilisation de la fonction drawImage 1.drawImage(img,x,y) : dessinez une image à la position (x,y) du canevas 2.drawImage(img,x, y , width, height) : Dessinez une image avec la largeur, la largeur et la hauteur à la position (x, y) du canevas

3.drawImage(img,sx,sy,swidth,sheight,x,y ; , largeur, hauteur) : dessinez une capture d'écran de la largeur et de la hauteur de l'image à la position (sx, sy) de la toile à la position (x, y). L'image doit être mise à l'échelle en fonction de la largeur et de la hauteur lorsqu'elle est dessinée. la toile.

Ce qui précède est l'utilisation de drawImage. Cette fonction est très puissante.

Revenant à la prise de captures d'écran, nous avons maintenant créé la vidéo-contexte sur le navigateur sur le navigateur, puis nous dessinons la vidéo ici :

La taille de l'intervalle de temps ici affectera le gel de la lecture vidéo. ​

contextVideo.drawImage(videoElem,0,0);

setInterval(function(){<br>    contextVideo,drawImage(videoElem,0,0);<br>},100)

3. Faites une capture d'écran pour afficher le panneau de canevas

Ici, nous devons dessiner un autre canevas sur la page - contextImg, puis utiliser drawImage à nouveau Méthode, capture d'écran.

contextImg.drawImage(canvasVideo,0,0,canvasVideo.width,canvasVideo.height);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!