2014-09-12 133 views
0

我有一个带有视频播放器的网络应用程序。当用户按下按钮时,视频开始播放。现在,我添加了一个动画,当点击该按钮时开始,当它结束时,视频应该开始播放。该动画基于setInterval(更确切地说,是HTML5变体requestInterval)。Android:点击后3秒播放视频

此功能完美,但仅适用于Mac/PC,因为Android上的视频播放有限制。当您希望视频以编程方式实际开始播放时,需要通过用户操作(例如,单击按钮)直接触发调用视频元素的play()功能的功能。

在动画之前,事实确实如此,一切都按预期运作。我只需要在动画完成后才能播放视频,因为如果视频在动画开始时开始播放,则动画会出现相当大的滞后。

任何想法或解决方法?

回答

0
<button onclick="setInterval(function(){alert('Start the video now!')},3000);">Try it</button> 

或者

var timerOut=setInterval(function(){startTimer()},3000); 

function startTimer() 
{ 
    //Start video here 
    clearInterval(timerOut); 
} 
+0

我很抱歉,我不得不提我我正在使用JavaScript(不是原生的Android Java应用程序,而是一个网络应用程序) – 2014-09-12 12:50:34

+0

@Regent:我编辑了我的答案:P – 2014-09-12 13:02:16

0

我看到你使用jquery(从标签)。 如果动画与.animate(实现)的功能,你可以使用回调:

$("#btn").click(function() { 
    $("#animate").animate({ //opts go here }, 5000, function() { 
    // Animation complete. 
    }); 
}); 

如果使用过渡CSS3属性你可以使用transitionend事件处理程序:

$('#animate').off('transitionend').on('transitionend', function() { 
    // Animation complete. 
}); 

编辑:

我想你使用的drawImage()函数是同步的,但图像加载不是。

尝试将图像(S)上添加onload事件处理,像这样:

var img = new Image(); 
    img.src = "http://image.ext";     
    img.onload = function(){ 
     // drawImage goes here 
    } 

如果您有多个图像,你可以实现这样的事情:

var $imgs = ... // this will store all img objects 
var imgLength = $imgs.length; 
var i = 0; 
$imgs.each(function() { 
    i += 1; 
    $(this).onload = function() { 
     if(i === imgLength) //drawImage 
    } 
}); 
+0

我在20 FPS的画布上绘制图像,只留下setInterval选项打开(我猜?) – 2014-09-12 12:52:02