我需要使用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/开始)
有任何想法吗？问题是否足够明确？
谢谢,
凯文
>更改为= 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所述
