この間、私はキャンバスを勉強してきました。
作成方法:
1.ページにビデオをロードしますCanvasを使用してこのスクリーンショット機能を作成する場合、最初にページがロードされて完了し、簡単に操作できるようにする必要があります。 <video>ラベルを下に使用する場合:
<ビデオループコントロールID = testmp4 width = 500 height = 400> <source src = test.mp4 type = video/mp4> <source src = test.webm type/webm> <sour ce src = test.oggタイプ=ビデオ/ ogg> </video>
私の「HTML5とビデオ」では、ブラウザはビデオのプリロードされた進行状況とロードイベントをサポートしており、ビデオの再生やその他のイベントに影響します。そのため、JSを使用してビデオを作成してビデオを紹介します。
このようにして、動画の導入に注意する必要があります。そのため、最初にビデオ形式のブラウザのサポートを判断する必要があります。
1.1サポート形式を判断するには、ビデオのcanplayType()メソッドを使用しますcanplayType()メソッドはパラメーターを渡す必要があります。このパラメーターはビデオの形式です。
一般的に使用される値:ビデオ/ogg;
ビデオ/mp4;
ビデオ/webm;
またはエンコーダーを含めます:
ビデオ/ogg = Theora、Vorbis
ビデオ/mp4;
ビデオ/webm;
返品値:Webページのサポートレベルを示します。
function videytypes(video){var return = ''; 'mp4';} else if(video.canplaytype( 'video/ogg')== 'culy' || video.canplaytype( 'video/ogg')== 'mayce'){<br> retunty pe = 'ogg '; <br>} else(video.canplaytype(' video/webm ')==' || video.canplayType( 'video/webm')== 'may。{<br> retuntyp e =' webm '; <br>} <br> returnType;}この関数は、ビデオに対するブラウザのサポートの形式を決定できます。
1.2 JSダイナミックロードビデオタグを使用しますここでブラウザのサポート形式を審査した後、Chromeを使用しているため、ブラウザはMP4形式のビデオをサポートし、ビデオタグを動的に作成します。
var videodiv; videotypte(videoelem);
ここでスクリーンショット機能を作成したいので、シンプルなビデオにはスクリーンショットのインターフェイスがないため、キャンバスにコピーしてキャンバスでこのビデオをブロードキャストする必要があります。
2.キャンバスコピービデオを使用します次に、ビデオがブラウザで再生されました。次にCanvasにコピーし、最初にキャンバスを構築し、次にキャンバスコンテキストを取得します。キャンバスでビデオを描く方法では、機能を使用する必要があります。ドローイメージ関数の使用
1。Drawimage(IMG、X、Y):キャンバス(x、y)の位置にIMGを描画します。
2。Drawimage(IMG、X、Y、幅、高さ):高さ、高さの高い幅のIMGを描画します。
3.drawimage(IMG、SX、SY、SWIDTHT、SHEIGHT、X、Y、幅、高さ、高さ):スウィッド幅のキャンバス(X、Y)位置にIMG(SX、SY)位置を描画します。 Sheight Screenshot、キャンバスを幅と高さの高さまで引きます。
上記は、この機能の使用です。
スクリーンショットに戻ると、ブラウザ-ContextVideoでキャンバスを作成しました。次に、ここでビデオを描画します。
ContextVideo.Drawimage(VideoElem、0,0);
その後、キャンバスで写真を見ることができますが、ビデオは絶えず変化しているため、SetInterval関数を使用してソースとして引き続き描画する必要があります。
setInterval(function(){<br> contextvideo、drawimage(videoelem、0,0); <br>}、100)ここでの時間間隔のサイズは、ビデオ再生がカードになるかどうかに影響します。
この時点で、ビデオをキャンバスに移動しました。次にスクリーンショットを作成します。
3.スクリーンショットを表示するキャンバスパネルを表示しますここでは、Page-ContextImgにキャンバスキャンバスを描画し、DrawImageメソッドを使用してスクリーンショットを再度使用する必要があります。
contextimg.drawimage(canvasvideo、0,0、canvasvideo.width、canvasvideo.height);
このコードは、最初のキャンバスを2番目のキャンバスに描画します。
4.スクリーンショットボタンを作成しますボタンを作成し、クリックイベントをクリックした後、前の関数を呼び出して、スクリーンショットを作成できます。
グラフが切断されると、右のボタンを保存し、PSに注ぎ、絵文字を作成できます。
上記は、この記事のすべての内容です。