So implementieren Sie die Video-Screenshot-Funktion mit Canvas und H5

Dieses Mal zeige ich Ihnen, wie Sie die Video-Screenshot-Funktion mit Canvas und h5 implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung der Video-Screenshot-Funktion mit Canvas und h5 ist ein praktischer Fall.

Ich habe mich in dieser Zeit mit Leinwand beschäftigt, und plötzlich kam mir die Idee, eine Funktion zu entwickeln, mit der Screenshots von Videos gemacht und dann die Bilder gezogen werden können, um Emoticons zu erstellen, hahahahaha~~

Produktionsmethode :

1. Laden Sie das Video auf die Seite

Wenn Sie Canvas zum Erstellen dieser Screenshot-Funktion verwenden, müssen Sie zunächst sicherstellen, dass das Video über eine Funktion verfügt auf der Seite geladen, so dass diese bequem bedient werden kann. Wenn Sie die folgende Methode zum direkten Einbetten des

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

Wie in meinem Artikel „HTML5 und Video“ erwähnt, unterstützen Browser den Video-Vorladevorgang und Ladeereignisse unterschiedlich Auswirkungen auf die Videowiedergabe und das Auslösen anderer Ereignisse haben. Hier verwenden wir also js, ​​um Videos zu erstellen und Videos vorzustellen.

Seien Sie vorsichtig, wenn Sie Videos auf diese Weise einführen. Es können nicht mehrere Quellen eingegeben werden. Sie müssen daher zunächst die Unterstützung des Browsers für Videoformate ermitteln.

1.1 Verwenden Sie die canPlayType()-Methode von Video, um das unterstützte Format zu bestimmen

Die canPlayType()-Methode muss einen Parameter übergeben, Dies ist der Parameter des Videoformats.

Gemeinsame Werte: video/ogg;

Video/mp4;

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

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

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

Rückgabewert: Zeigt an die Unterstützungsstufe der Webseite: „wahrscheinlich“ – wird höchstwahrscheinlich unterstützt (wird nur zurückgegeben, wenn der Eingabewert einen Encoder hat) – (Leere

Zeichenfolge

). ) wird nicht unterstützt;

Diese Funktion kann das vom Browser unterstützte Format für Videos ermitteln.

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

1.2 Verwenden Sie js, um Video-Tags dynamisch zu laden

Nachdem ich die unterstützten Formate des Browsers beurteilt habe, da ich Chrome verwende, habe ich den Browser unterstützt Videos im MP4-Format, und dann erstellen wir dynamisch ein Video-Tag.

Da wir hier eine Screenshot-Funktion erstellen möchten, verfügt ein einfaches Video nicht über eine Screenshot-Schnittstelle, daher müssen wir es auf die Leinwand kopieren und das Video auf der Leinwand abspielen, also haben wir hier zuerst die Video ausblenden (

Anzeige

:keine).

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. Verwenden Sie Canvas, um das Video zu kopieren

Da das Video nun im Browser abgespielt wurde, kopieren wir es auf Canvas. Erstellen Sie zuerst die Leinwand und rufen Sie dann den Leinwandkontext ab, auf den ich nicht näher eingehen werde. Um ein Video auf Leinwand zu zeichnen, müssen wir hier eine Funktion verwenden. Verwendung der Funktion „drawImage“ 1.drawImage(img,x,y): Zeichnen Sie ein Bild an der Position (x,y) der Leinwand

2.drawImage(img,x, y, Breite, Höhe): Zeichnen Sie ein Bild mit Breite, Breite und Höhe an der (x, y)-Position der Leinwand; , Breite, Höhe): Zeichnen Sie einen Screenshot der Breite und Höhe des Bildes an der (sx, sy)-Position der Leinwand an der (x, y)-Position. Das Bild muss beim Zeichnen auf die Breite und Höhe skaliert werden die Leinwand.

Das Obige ist die Verwendung von drawImage. Diese Funktion ist sehr leistungsfähig.

Zurück zum Aufnehmen von Screenshots, wir haben jetzt das Canvas-Context-Video im Browser erstellt und dann zeichnen wir das Video hier:

Dann können wir sehen, dass ein Bild in das gezeichnet wird Leinwand, aber das Video ändert sich ständig, daher müssen wir die Funktion setInterval verwenden, um das Bild kontinuierlich mit dem Video als Quelle zu zeichnen.

Die Größe des Zeitintervalls hier beeinflusst, ob die Videowiedergabe einfriert. ​

contextVideo.drawImage(videoElem,0,0);

Zu diesem Zeitpunkt haben wir das Video zur Anzeige auf die Leinwand verschoben. Machen Sie als nächstes einen Screenshot.

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

3. Machen Sie einen Screenshot, um das Canvas-Panel anzuzeigen

Hier müssen wir eine weitere Canvas auf der Seite zeichnen – contextImg, und dann verwenden drawImage again Methode, Screenshot.

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

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

4.制作截图按钮

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

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

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

推荐阅读：

分页查询的使用详解

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

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Video-Screenshot-Funktion mit Canvas und H5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!