kineticjs如何播放视频 [英] kineticjs how to play video

问题描述

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

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

谢谢

解决方案

添加HTML5 <视频> 使用相应的< source> 标记标记到您的DOM。将视频元素分配给变量。为您的视频创建一个 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 =视频源（文件路径）。

I need to add video to the stage and then play on mouse click using kineticjs.

I searched a lot for this but have not found any working code

Thanks

解决方案

Add an HTML5 <video> tag to your DOM with the appropriate <source> tags. Assign the video element to a variable. Create a Kinetic.Image for your video to play on. Then play the video by clicking on some object (maybe the image, maybe a "play" button you placed on the stage) and use the following function to draw the video to the image. For best results, hide the video by placing it absolutely offscreen. The image can be any size, but to prevent distortion, the image should be the same aspect ratio as the video.

$('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 = your video, i = the image object.

EDITED to show creation of HTML5 video tag and Kinetic.Image(). Variables : vid = video id (unique), vw = video width, vh = video height, vx = video x coordinate (for canvas), vy = video y coordinate, vsrc = video source (path to file).

这篇关于kineticjs如何播放视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！