Android：点击后3秒播放视频

问题描述：

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

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

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

任何想法或解决方法？

答

<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); 
}

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

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

答

我看到你使用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 
    } 
});

我在20 FPS的画布上绘制图像，只留下setInterval选项打开（我猜？） – 2014-09-12 12:52:02

答

启动在Android中的动画之后的动作，使用AnimationListener是很好的。里面有一个方法：

 @Override 
    public void onAnimationEnd(Animation animation) { 


    //do Your stuff here 
}

看向devoloper资源：

http://developer.android.com/reference/android/view/animation/Animation.AnimationListener.html

这里一个例子：

http://android-er.blogspot.de/2011/09/handle-animation-event.html

Android：点击后3秒播放视频

相关推荐