Canvas- und HTML5 -Implementierung von Video -Screenshot -Funktionsbeispielen

Während dieser Zeit habe ich Leinwand studiert.

Methode machen:

Bei Verwendung von Canvas, um diese Screenshot -Funktion zu vermitteln, müssen wir zunächst sicherstellen, dass die Seite geladen und abgeschlossen wurde, damit sie leicht bedienen kann. Wenn Sie das <video> -Tabel direkt unten verwenden:

 <Video Loop Controls ID = testMp4 width = 500 hohe = 400> <Source src = test.mp4 type = Video/mp4> <Source src = test.webm type/webm> <Sour CE src = test.ogg type = Video/ ogg> </Video>

In meinem "HTML5 und Video" unterstützt der Browser die vorgeladenen Fortschritte und Ladenereignisse des Videos, die sich auf die Wiedergabe von Video und andere Ereignisse auswirken. Daher verwenden wir JS, um Videos zu konstruieren, um Videos einzuführen.

Auf diese Weise sollten Sie auf die Einführung von Videos achten.

CanPlayType () -Methode muss einen Parameter übergeben. Dieser Parameter ist das Format von Video,

Häufig verwendeter Wert: Video/Ogg;

Video/MP4;

Video/Webm;

Oder Encoders einschließen:

Video/ogg;

Video/MP4;

Video/Webm;

Rückgabewert: Zeigt die Support -Ebene der Webseite an: Wahrscheinlich ist es, dies zu unterstützen (nur dann, wenn der Eingabewert mit dem Encoder ist).

 FunktionsvideoType (Video) {var return = ''; 'mp4';} else if (Video.CanPlayType ('Video/ogg') == 'wahrscheinlich' || Video.CanPlayType ('Video/ogg') == 'vielleicht') {<br> Retumunty Pe = 'Ogg '; webm ';

Diese Funktion kann das Format der Unterstützung des Browsers für Video bestimmen.

Nachdem ich das Support -Format des Browsers hier beurteilt habe, da ich Chrome verwende, unterstützt mein Browser MP4 -Formatvideos und erstellen dann dynamisch ein Video -Tag.

 varyelem; Videotype (VideoElem);

Da wir hier eine Screenshot -Funktion erstellen möchten, verfügt das einfache Video nicht über die Schnittstelle von Screenshots. Daher müssen wir es auf Leinwand kopieren und dieses Video auf Canvas übertragen. Hier verbergen wir zuerst Video, um sich zu verbergen (Anzeige: Keine).

Jetzt wurde das Video auf dem Browser gespielt. So zeichnen Sie Videos auf Leinwand, hier müssen wir eine Funktion verwenden. Nutzung der Drawimage -Funktion

1. Drawimage (IMG, X, Y): Zeichnen Sie eine IMG in der Position der Leinwand (x, y);

2. Drawage (IMG, X, Y, Breite, Höhe): Zeichnen Sie eine breite breite IMG mit hoher Höhe, Höhe;

3.Drawimage (IMG, SX, Sy, Swidtht, Sheight, X, Y, Breite, Höhe, Höhe): Zeichnen Sheight Screenshot, zeichnen Sie die Leinwand auf Breite und Höhe hoch.

Das obige ist die Verwendung von Drawage.

Zurück zum Screenshot haben wir die Leinwand jetzt auf dem Browser-Kontextvideo erstellt und dann das Video hier zeichnen:

 contextVideo.drawimage (VideoElem, 0,0);

Dann können wir ein Bild in Leinwand sehen, aber das Video ändert sich ständig, sodass wir die SetInterval -Funktion verwenden müssen, um weiterhin als Quelle zu zeichnen.

 SetInterval (function () {<br> contextVideo, DrawImage (VideoElem, 0,0); <br>}, 100)

Die Größe des Zeitintervalls hier wirkt sich darauf aus, ob die Video -Wiedergabe Karte ist.

Zu diesem Zeitpunkt haben wir Videos nach Leinwand verlegt. Als nächstes machen Sie einen Screenshot.

Hier müssen wir eine Leinwand auf dem Seitenkontextimg zeichnen und dann die Drawimage-Methode verwenden, um einen Screenshot erneut aufzunehmen.

 Contextimg.drawimage (canvasvideo, 0,0, canvasvideo.width, canvasvideo.height);

Dieser Code zeichnet die erste Leinwand auf die zweite Leinwand.

Machen Sie eine Schaltfläche und binden Sie nach dem Klicken auf die vorherige Funktion, damit Sie einen Screenshot erstellen können.

Wenn der Diagramm geschnitten wird, kann der rechte Knopf gespeichert und dann in die PS gegossen werden, um Emoticons herzustellen.

Das oben genannte ist der Inhalt dieses Artikels.