3

ビデオをステージに追加し、kineticjs を使用してマウス クリックで再生する必要があります。

私はこれをたくさん検索しましたが、動作するコードは見つかりませんでした

ありがとう

4

2 に答える 2

3

適切なタグを使用して HTML5<video>タグを DOM に追加し<source>ます。video 要素を変数に割り当てます。Kinetic.Image動画を再生する を作成します。次に、オブジェクト (画像、ステージに配置した「再生」ボタンなど) をクリックしてビデオを再生し、次の関数を使用してビデオを画像に描画します。最良の結果を得るには、ビデオを完全にオフスクリーンに配置して非表示にします。画像は任意のサイズにできますが、歪みを防ぐために、画像はビデオと同じ縦横比にする必要があります。

$('body').append('<div id="video' + vid + '" class="offscreen"></div>');
var vidobj = '<video width="' + vw + '" height="' + vh + ' preload="auto"><source src="' + vsrc + '" type="video/mp4"></source></video>';
$('#video' + vid).html(vidobj);
var video = $('#video' + vid + ' > video').get(0);
var img = new Kinetic.Image({name : 'video', x : vx, y : vy, width : vw, height : vh, image : video});
layer.add(img);
video.play();
setVideo(video,img);

function setVideo(v,i) {
    if (!v.paused && !v.ended) {
        i.setImage(v);
        cvsObj.modal.draw();
        setTimeout(setVideo,20,v,i);
    }
}

v = 動画、i = 画像オブジェクト。

HTML5ビデオタグとKinetic.Image（）の作成を示すために編集されました。変数 : vid = ビデオ ID (一意)、vw = ビデオ幅、vh = ビデオ高さ、vx = ビデオ x 座標 (キャンバス用)、vy = ビデオ y 座標、vsrc = ビデオ ソース (ファイルへのパス)。

于 2012-11-15T13:29:34.450 に答える
1

なぜビデオはステージ内にある必要があるのですか? ステージの上に HTML5 ビデオ要素を配置することはできませんか?

于 2012-11-16T06:51:48.383 に答える