Beispiel für die Implementierung der Video-Screenshot-Funktion mit Canvas und HTML5

Ich habe mich in dieser Zeit mit Leinwand beschäftigt und plötzlich kam mir der Gedanke, eine Funktion zu entwickeln, die Screenshots von Videos machen und dann die Bilder ziehen kann, um Emoticons zu erstellen, hahahahahaha~~
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 auf die Seite geladen wurde, damit Sie es bequem bedienen können. Wenn Sie die folgende Methode zum direkten Einbetten des 39000f942b2545a5315c57fa3276f220-Tags verwenden:

<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, lädt der Browser den Videofortschritt vor und lädt verschiedene Ereignisse wirkt sich auf die Videowiedergabe und das Auslösen anderer Ereignisse aus. 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 des Videos, um das unterstützte Format zu bestimmen
Die canPlayType()-Methode muss einen Parameter übergeben, der das Format des Videos ist
Common Werte:

video/ogg;
　　　　video/mp4;
　　　　video/webm;

oder Encoder einschließen:

　　　　video/ogg;codecs="theora,vorbis"
　　　　video/mp4;codecs="avc1.4D401E, mp4a.40.2"
　　　　video/webm;codesc="vp8.0, vorbis"

Rückgabewert: Gibt den Support-Level der Webseite an: „wahrscheinlich“ – höchstwahrscheinlich wird (nur dies) unterstützt wird zurückgegeben, wenn der Eingabewert einen Encoder hat); „vielleicht“ – wird möglicherweise unterstützt; „“ – (leere Zeichenfolge) wird nicht unterstützt Der Browser für Videos.

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

function videoType(video){

    var returnType='';

    if(video.canPlayType('video/mp4')=='probably'||video.canPlayType('video/mp4')=='maybe'){

    　　returnType= 'mp4';

    }else if(video.canPlayType(&#39;video/ogg&#39;)==&#39;probably&#39;||video.canPlayType(&#39;video/ogg&#39;)==&#39;maybe&#39;){<br> 　　　　
    returnType= &#39;ogg&#39;; 　　 
    <br>　　 
    }else if(video.canPlayType(&#39;video/webm&#39;)==&#39;probably&#39;||video.canPlayType(&#39;video/webm&#39;)==&#39;maybe&#39;){<br> 　　　　
    returnType= &#39;webm&#39;; 　　 <br>　　 }<br>　　 return returnType; 

}

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

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 hier Verstecken Sie zunächst das Video (display:none).

2. Verwenden Sie die Leinwand, um das Video zu kopieren.

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

Nachdem das Video im Browser abgespielt wurde, kopieren wir es zuerst auf die Leinwand und rufen dann den Leinwandkontext ab . Diese werden nicht gesagt. 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 a Das Bild wird auf der Leinwand gezeichnet, aber das Video ändert sich ständig. Daher müssen wir die Funktion setInterval verwenden, um das Bild kontinuierlich zu zeichnen und dabei das Video als Quelle zu verwenden.

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. Erstellen Sie einen Screenshot, um das Canvas-Panel anzuzeigen

Hier müssen wir eine weitere Canvas auf der Seite zeichnen – contextImg, und dann erneut die Methode drawImage verwenden, um sie aufzunehmen ein Screenshot.

Dieser Code zeichnet die erste Leinwand auf die zweite Leinwand.

4. Erstellen Sie eine Screenshot-Schaltfläche

Erstellen Sie eine Schaltfläche und binden Sie dann das Klickereignis. Nach dem Klicken wird die Funktion im vorherigen Schritt aufgerufen, damit Sie einen Screenshot erstellen können.

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

Nachdem das Bild aufgenommen wurde, können Sie mit der rechten Maustaste darauf klicken, um es zu speichern, und es dann in PS importieren, um ein Emoticon-Paket zu erstellen.

Das Obige ist der Inhalt des Beispiels der von Canvas und HTML5 implementierten Video-Screenshot-Funktion. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!


-->