Question

我有一个带有视频播放器的网络应用程序。当用户按下按钮时，视频开始播放。现在，我添加了一个动画，它在单击按钮时启动，当它完成时，视频应该开始播放。动画基于setInterval（更准确地说，是HTML5变体，requestInterval）。

这非常有效，但仅适用于Mac / PC，因为Android上的视频播放存在限制。当您希望视频实际以编程方式开始播放时，调用视频元素的play（）函数的函数需要由用户操作直接触发（例如，单击按钮）。

在动画之前，情况确实如此，一切都按预期进行。我只需要在动画结束后播放视频，因为如果动画开始时视频开始播放，动画会有相当大的延迟。

任何想法或解决方法？

Answer 1

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

Answer 2

我看到你使用jquery（来自标签）。如果使用.animate（）函数实现动画，则可以使用回调：

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

如果使用transition css3属性，则可以使用transitionend事件处理程序：

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

编辑：

我猜你正在使用同步的drawImage（）函数，但图像加载不是。

尝试在图像上添加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
   }
});

Answer 3

要在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秒播放视频

3 个答案: