html5-video - kineticjs如何播放视频

Question

我需要将视频添加到舞台，然后使用 kineticjs 通过鼠标单击播放。

我为此搜索了很多，但没有找到任何工作代码

谢谢

Answer 1

使用适当的标签将 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 = 视频源（文件路径）。

Answer 2

为什么视频必须在舞台上？您不能在舞台顶部放置一个 HTML5 视频元素吗？