Question

我需要在舞台上添加视频，然后使用kineticjs鼠标点击播放。

我搜索了很多，但没有找到任何正常工作的代码

由于

Answer 1

使用相应的<video>标记向您的DOM添加HTML5 <source>标记。将视频元素分配给变量。为您的视频创建Kinetic.Image即可播放。然后通过单击某个对象（可能是图像，可能是放置在舞台上的＆＃34;播放＆＃34;按钮）播放视频，并使用以下功能将视频绘制到图像。为获得最佳效果，请将视频完全置于屏幕外方以隐藏视频。图像可以是任何大小，但为了防止失真，图像应与视频具有相同的宽高比。

$('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 =视频源（文件路径）。

Answer 2

为什么视频必须在舞台上？难道你不能只在舞台上放置一个HTML5视频元素吗？

kineticjs如何播放视频

2 个答案: