使用Easel.js將視頻添加到HTML 5畫布

Question

根據文檔，您可以將HTMLVideoElement傳遞給Easel.js位圖。從文檔

Bitmap (image) 
Parameters: 
image <Image | HTMLCanvasElement | HTMLVideoElement> The Image, Canvas, or Video to render to the display list. 

我設法得到加載並添加到畫布的形象，所以我知道我有庫的設置和代碼工作，但我無法弄清楚如何讓視頻添加。

我可以添加一個視頻標籤並讓文件在畫布和框架之外播放，我可以直接將視頻添加到畫布，而無需通過訪問上下文使用畫架，因此我知道該視頻很好。

幾行示例代碼將不勝感激。

Answer 1

爲了添加視頻，您需要將其添加到您的DOM（html5上的典型視頻標籤）並選擇js上的該元素並將其作爲參數傳遞給您的Bitmap實例。

JS：

var introVideo = document.getElementById("introVideo"); 
var bitmap = new Bitmap (introVideo); 
stage.addChild (bitmap); 

HTML：

<video autoplay id="introVideo" style="display:none"> 
<source src="./videos/01_Intro.mp4" type="video/mp4" /> 
<source src="./videos/01_Intro.ogv" type="video/ogg" /> 
</video> 

希望它能幫助！