小编Ban*_*ath的帖子

我需要使用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, 0, 0, 153, 448);
    curCol += 1;

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

      if(curRow >= maxRow)
      {
        curRow = …