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

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

Anzeige

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:

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

contextVideo.drawImage(videoElem,0,0);

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

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!