网站建设中用HTML5的drawlmage()播放视频

　　用drawlmage()播放视频
　　HTMLVideoElement也可以作为drawlmage()的源。
　　但你若认为用这种方法嵌人的视频能够自动播放，答案会令你失望，因为要完成这一步的逻辑必须完全用JavaScript。要做到这一点也并不难，最后的Canvas动画范例中约塞米蒂国家公园明信片的扩展版已经证明了这一点。一段从塔夫脱峰拍摄的°全景动态视频被置于右上角，代替了原来的静态埃尔卡皮坦山图像。在视频播放过程中，10幅来自视频的小快照作为画廊被置于画布底部。
　　此段视频由YouTube用户pos提供，通过ffmpeg转换为WebM,并缩减魯至40像素。
　　与目前通过JavaScript方法newImageO将图像绘入画布不同，我们将视频元素作为全景直接整合到HTML页面中。另外还需要preload、cmcanplay作为事件监听器，为我们提供布置明信片、准备开始以及停止的时间点。另外我们还需要把嵌入的原始视频样式设为隐藏，它仅用于在播放过程中不时将当前帧复制至画布。备选文字(alternativetext)为不支持video元素的浏览器提供简要的视频介绍。
　　
　　PanoramicviewofYosemiteValleyfromTaftPoint　　varinit=function(evt){
　　//savereferencetovideoelement//createbackgroundimageimage.onload=function(){//drawbackgroundimage//addtitle//draw干irstframecanvas.onclick=function(){//implementstartingandstopping//copyvideoframeswhileplaying//createiconsatregularintervalswhileplaying我们可以用evttarget获取一个到视频对象的引用，并将其保存在变量中。如前面所做的一样，我们通过newImage()创建一个新的背景图像，在该图像加载完成的同时，我们开始绘制背景及标题。这一过程的步骤应该不需要过多解释了，但我们可能需要解释一下绘制第一帧的做法：
　　context.setTransformf,,20^;context.drawlmage(video,2)；context.strokeRect(2)；首先我们通过setTransform()将坐标系置于右上角，并用draw-Image()绘出带边框的第一帧。在稍后的播放中，这一流程将不断重复，必须确保drawImageO方法中的HTMLVideoElement视频始终提供当前帧的图像。
　　借助Canvas.onClick()函数，我们可以通过单击画布来开始或停止播放，并将在后台播放的原视频当前帧复制下来，创建按比例缩小的图像。代码清单展示了整个过程的JavaScript编码：
　　创作视频明倍片的代码varrunning=null;canvas.onclick=function(){if(running)Ivideo,pause();window.clearlnterval(running);running=null;else{vargap=video.duration/l0;video.play()jrunning=window.setlnterval(function(){if(video.currentTime　　else{
　　window.clearlnterval(running);running=null;}}>35)；
　　在头一个动画案例中，变贵running包含了window.set丨nterval()的唯一IntervallD,我们借助其操控动画。在这里的做法也一样。若running被陚值，我们则需通过video.pause()将隐藏视频暂停，通过移除setlnterval来停止复制侦，并将running重新设为null。此外，我们通过video.play()来播放视频，并每隔35ms将当前帧通过回调函数复制到画布中。此过程将不断重复，直到完成视频播放或因画布被单击而暂停为止。变量video中，视频对象的两个属性video.currentTime及video.duration能检查当前播放位置是否少于视频的总时间。
　　在视频播放过程中，我们同步复制位于右上角的视频当前帧，并通过视频总长度除以预定快照数量，计算出播放间隔gap,然后在每次截取快照后将锚点xl右移一次，宁波网站建设认为偏移值为间隔tx。若xl保持不变，则保持视频播放，若xl被右移，视频的最后一帧为静态，剩余部分则在新位置继续播放。视频播放持续约40s,播放结束时，会绘制出10个新的迷你快照，而我们可以通过单击画布将上述过程重复一次，目前我们的视频明信片已经制作完成，我们还要再谈几个话题。
　　本文由乐华网络编辑，转载请注明出处
　　宁波网站建设www.leseo.net