分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – HTML5 Canvas在更改动画的精灵表时会挂起(逐帧视频播放)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我需要使用HTML5在移动设备上播放具有透明背景的视频.在Windows Phone上,我可以捕获视频标签的当前帧并在画布中显示.但这在Android和iOS设备上不起作用(我认为出于安全原因？)

我的解决方案是使用FFMPEG分割.flv,然后将这些帧拼接成大图像,如精灵表.

问题是当我切换到新的框架表时动画“挂起”.我只是通过视觉和控制台检查了这一点(当我更改当前的精灵表行时通过记录.)我通过查看当我更改精灵表时它是如何挂起来测试它,以及当我更改它时它是如何挂起的只是一遍又一遍地循环同一张纸.

我预先加载了所有图像：

var frameImages = [];

for(var i = 0; i < 35;="" i++)="" {="" frameimages.push(new="" image());="" frameimages[i].src='frame' +="" i="" +="" '.png';="" console.log(frameimages[i].src);="" frameimages[i].onload="function()" {="" notify="" us="" that="" it's="" been="" loaded.="" console.log("image="" loaded");="" }="" }="">

然后像这样玩：

processFrame = function()
{
    outputCanvas.width = outputCanvas.width;
    output.drawImage(frameImages[currentFrame],(curCol*153),(curRow*448),153,448,448);
    curCol += 1;

    if(curCol >= maxCol)
    {
      curCol = 0;
      curRow += 1;

      if(curRow >= maxRow)
      {
        curRow = 0;
        currentFrame++;
      }
    }
  }
}

var mozstart = window.mozAnimationStartTime;

step = function(timestamp) {

  var diff = (new Date().getTime() - start) - time;
  if(diff >= frameDelay)
  {
    processFrame();
    time += frameDelay;
  }
}

我在Win 7机器和带Chrome的Nexus 7上的Chrome v 23.0.1271.97 m中尝试了这个.

在这里看到它：
http://savedbythecode.com/spokes/mozanimation.php – 这是使用mozAnimationStartTime
和http://savedbythecode.com/spokes/newplayer.php – 这是使用每个步骤调整的常规JS计时器(从http://www.sitepoint.com/creating-accurate-timers-in-javascript/开始)

有任何想法吗？问题是否足够明确？

谢谢,
凯文

最佳答案

很酷的代码.为什么你不能只使用视频标签(参见选项6)？无论如何,我只会列出我能想到的问题,并希望它能帮到你：

>更改为= 1：与前一代码保持一致,因为channeling Doug Crockford’s benevolent ghost可能有助于消除javascript代码中的故障.
>将一堆图像拼接成一个“精灵表”.当您想要下一张表时,代码会挂起.因此,因为您的代码还没有工作,作为测试,删除循环遍历每个帧中的子图像的所有循环,并直接将每个渲染中的frameImages数组中的每个帧输出到画布以查看它是否仍然挂起.结果将告诉您代码是否可以到达frameImages中的下一帧,或者它是否可以.这可能会使您更接近错误的来源.
> currentFrame是用var和processFrame的范围声明的吗？如果没有,就放
var currentFrame = 0;上面你定义函数processFrame的地方(…
>当你说“然后我就像这样播放”你是否使用了promise或在所有onloads被触发后等效地调用你的动画启动功能？
执行此操作的方法是：您可以使用每个启动的onload递增计数器一次,并且每次检查计数器是否等于所需的负载总数,然后再调用动画启动.
我的预感是它是一个缓存问题,因为由于内部不同,这些似乎是不同浏览器之间变化最大的问题.
>尝试在drawImage调用和更新currentFrame之间清除画布,因为在更改图像时,它可能有助于重置画布的内部状态.
>您可以使用HTML5视频标记进行Alpha和透明度.只需使用一些svg转换.这些很容易做到,如this SO answer所述