Canvasとhtml5を使った動画スクリーンショット機能の実装例-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

Canvasとhtml5を使った動画スクリーンショット機能の実装例

黄舟

May 11, 2018 pm 04:20 PM

この間キャンバスの勉強をしていたのですが、ふと動画のスクリーンショットを撮って、その写真を引っ張ってきて絵文字を作る機能を作ろうと思いつきました、はははははは~~
制作方法:
1.に動画を読み込みます。ページ
キャンバスを使用してこのスクリーンショット機能を作成する場合、簡単に操作できるように、まずビデオがページにロードされていることを確認する必要があります。

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

ログイン後にコピー

私の記事「HTML5 とビデオ」で、ブラウザーがビデオのプリロードの進行状況とロードイベントのサポートを異なると述べました。これは、ビデオの再生に影響します。ビデオやその他のイベントトリガー。そこでここでは動画を紹介するためにjsを使って動画を構築していきます。
この方法でビデオを導入する場合は、複数のソースを導入できないため、最初にブラウザがビデオ形式をサポートしているかどうかを確認する必要があります。
1.1 ビデオの canPlayType() メソッドを使用して、サポートされている形式を決定します。canPlayType() メソッドは、ビデオの形式を渡す必要があります。共通の値:

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

ログイン後にコピー

、またはエンコーダーを含む:

。

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

ログイン後にコピー

戻り値: Web ページのサポートレベルを示します。「おそらく」 - サポートされる可能性が最も高い (入力値にエンコーダーがある場合にのみ返されます)。「おそらく」 - サポートされる可能性があります。 string) はサポートされていません。

function videoType(video){

    var returnType=&#39;&#39;;

    if(video.canPlayType(&#39;video/mp4&#39;)==&#39;probably&#39;||video.canPlayType(&#39;video/mp4&#39;)==&#39;maybe&#39;){

    　　returnType= &#39;mp4&#39;;

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

}

ログイン後にコピー

この関数は、ブラウザーがサポートするビデオの形式を決定できます。

1.2 js を使用して video タグを動的に読み込みます
ブラウザのサポートされる形式を決定した後、Chrome を使用しているため、ブラウザは mp4 形式のビデオをサポートし、次に video タグを動的に作成します。

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(&#39;不支持video&#39;)

    }else{

        videoElem.setAttribute(&#39;src&#39;,"text."+vtype);
    }
}

ログイン後にコピー

ここでスクリーンショット機能を作成したいので、単純なビデオにはスクリーンショットインターフェイスがありません。そのため、それをキャンバスにコピーして、キャンバス上でビデオを再生する必要があるため、ここでは最初にビデオを非表示にします（表示：なし））。

2. キャンバスを使用してビデオをコピーします
ブラウザ上でビデオが再生されたので、まずキャンバスを作成し、次にキャンバスのコンテキストを取得します。詳細はこちら。キャンバス上にビデオを描画する方法。ここでは関数を使用する必要があります。 drawImage関数の使い方
1.drawImage(img,x,y): キャンバスの位置(x,y)にimgを描画します

2.drawImage(img,x,y,width,height):描画します。キャンバス上の画像 (x, y) で幅と高さの画像を描画します

3.drawImage(img,sx,sy,swidth,sheight,x,y,width,height): (x,y); Canvas ) の位置に、img の幅と高さのスクリーンショットを (sx, sy) の位置に描画します。キャンバス上に描画するときは、その幅と高さに合わせて拡大縮小する必要があります。

上記はdrawImageの使い方です。この関数は非常に強力です。

スクリーンショットの撮影に戻り、ブラウザ上でキャンバス - contextVideo を作成しました。そして、ここにビデオを描画します:

contextVideo.drawImage(videoElem,0,0);

ログイン後にコピー

すると、キャンバスに画像が描画されていることがわかりますが、ビデオは常に変化しています。したがって、setInterval 関数を使用して、画像を描画するソースとしてビデオを継続的に使用する必要があります。

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

ログイン後にコピー

ここでの時間間隔の大きさは、ビデオの再生がフリーズするかどうかに影響します。

この時点で、表示のためにビデオをキャンバスに移動しました。次にスクリーンショットを作成します。

3. スクリーンショットを作成して、キャンバスパネルを表示します
ここでは、ページ上に別のキャンバス (contextImg) を描画し、再度drawImage メソッドを使用してスクリーンショットを撮る必要があります。

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

ログイン後にコピー

このコードは、最初のキャンバスを 2 番目のキャンバスに描画します。

4. スクリーンショットボタンを作成します
ボタンを作成し、クリックした後、前のステップの関数が呼び出され、スクリーンショットを作成できるようになります。 写真を撮った後、写真を右クリックして保存し、PS にインポートして絵文字パッケージを作成できます。

上記は、canvas と html5 で実装されたビデオスクリーンショット機能の例の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。