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

Cette fonction peut déterminer le format pris en charge par le navigateur pour la vidéo.

1.2 Utiliser js pour charger dynamiquement les balises vidéo

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

:aucun).

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 :

Ensuite, nous pouvons voir qu'une image est dessinée dans le toile, mais la vidéo change constamment, nous devons donc utiliser la fonction setInterval pour dessiner en continu l'image en utilisant la vidéo comme source.

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

contextVideo.drawImage(videoElem,0,0);

À ce stade, nous avons déplacé la vidéo vers la toile pour l'afficher. Ensuite, faites une capture d'écran.

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

这段代码将第一个canvas画到了第二个canvas上。

4.制作截图按钮

制作一个按钮，然后绑定click事件，点击后就调用上一步的函数，这样就可以制作一个截图了。

当图截好后可以将图右键保存下来，然后倒入ps制作表情包了。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

分页查询的使用详解

JS的日期相关函数使用详解

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!