kineticjs如何播放視頻

我需要添加視頻到舞臺上，然後使用kineticjs點擊鼠標進行播放。kineticjs如何播放視頻

我尋覓了很多關於這一點，但還沒有找到任何工作代碼

感謝

2012-11-15 hemant

添加HTML5 <video>標籤的DOM與適當<source>標籤。將視頻元素分配給一個變量。創建一個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-15 13:29:34 Lazerblade

你能告訴我爲視頻創建Kinetic.Image的例子。謝謝 – hemant

增加了在Kinetic.JS畫布上直接創建視頻所需的一切。圖像可以放置在任何地方，即使在一個組內，也可以根據需要以任何方式調整大小（例如，在上面，圖像的vw和vh可以更改爲vw * 2，vh * 2將視頻的大小加倍。 – Lazerblade

非常感謝Lazerblade :) – hemant

爲什麼視頻必須在舞臺內？你不能只在舞臺上放置一個HTML5視頻元素嗎？

來源

2012-11-16 06:51:48

我需要在特定位置的舞臺上出現一些元素後顯示視頻，我將動態添加元素，因爲我無法將視頻添加到舞臺上作爲圖像kineticjs的對象 – hemant

@Eric可以，兄弟，我有這個。 ;） – Lazerblade

kineticjs如何播放視頻

回答

相關問題