Android: воспроизведение видео через 3 секунды после нажатия

У меня есть веб-приложение с видеоплеером. Когда пользователь нажимает кнопку, видео начинает воспроизведение. Теперь я добавил анимацию, которая начинается, когда нажимается кнопка, и когда она заканчивается, видео должно начинаться. Анимация основана на setInterval (точнее, вариант HTML5, requestInterval).

Это работает отлично, но только на Mac/PC, потому что есть ограничения для воспроизведения видео на Android. Если вы хотите, чтобы видео действительно начинало играть программно, функция, вызывающая функцию воспроизведения() видеоэлемента, должна быть непосредственно вызвана действием пользователя (например, нажмите кнопку).

Перед анимацией это было действительно так, и все работало по назначению. Мне нужно, чтобы видео воспроизводилось только после завершения анимации, потому что есть значительное отставание в анимации, если видео начинается, когда начинается анимация.

Любые идеи или обходные пути?

3 ответа

Для запуска Action после анимации в 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


Я вижу, что вы используете jquery (из тегов). Если анимация реализована с помощью функции.animate(), вы можете использовать обратный вызов:

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

Если вы используете свойство перехода css3, вы можете использовать обработчик события перехода:

$('#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
 }
});


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

licensed under cc by-sa 3.0 with attribution.