Воспроизведение HTML5-видео на IPad и поиск

Question

Очень странная ошибка. Кажется, я не могу понять.

Я пытаюсь получить видео в формате HTML5 с определенной позиции, когда пользователь нажимает на игру. Я пытаюсь заставить его искать, когда видео начинает играть.

На моем случае играть я this.currentTime = X

В браузере он работает нормально. Но на IPad, когда я воспроизвожу видео, видео не стремится к правильному положению (оно начинается с нуля).

Еще более странно, если я делаю вызов this.currentTime = X в setTimeout, скажем, 1 секунду, он работает на IPad (иногда).

Answer 1

Оцените попытки ответов ниже. К сожалению, пришлось прибегать к проверке внутри timeupdate, если текущее время было> 0 и < 1, если оно было затем отправлено на эту часть видео и удалило слушателя на timeupdate.

Answer 2

пытаются ограничить ваш X до 1 десятичного

X.toFixed(1); 

Как вы упомянули это иногда работает через время 1 секунды. Вы пытались установить позицию после того, как произошло событие playing? или, может быть, даже canplaythrough событие

Посмотри на источнике this page, чтобы увидеть весь список событий, которые могут быть использованы (в файле JavaScript)

Answer 3

КСН, видео нагрузка at play time (см пункт # 2), а не при загрузке страницы. Я предполагаю, что видео не загружается, когда вы запускаете this.currentTime = X, поэтому он не действует. Это также объясняет, почему задержка операции иногда может устранить проблему: иногда она загружается через секунду, а иногда и нет.

У меня нет устройства IOS, чтобы проверить, но я хотел бы предложить связывание loadeddata слушателя видео, чтобы ваш currentTime манипуляция происходит только после того, как видео начинается загрузка:

// within the play event handler... 
if(!isIOSDevice) { 
    this.currentTime = X; 
} else { 
    function trackTo(evt) { 
     evt.target.currentTime = X; 
     evt.target.removeEventListener("loadeddata", trackTo) 
    }); 
    this.addEventListener("loadeddata", trackTo); 
} 

Вы будете необходимо установить isIOSDevice в другом месте вашего кода, исходя из того, происходит ли текущее посещение с устройства iOS.

Answer 4

Хотя этот вопрос довольно старый, вопрос остается открытым. Я обнаружил решение, которое работает на нескольких тестированных iPads (1 + 2 + 3) для iOS 5 и 6 (iOS3 + 4 не тестировалось):

В основном вам сначала нужно подождать начальное событие playing, а затем добавить один -time для canplaythrough, а затем для progress - только тогда вы можете изменить значение currentTime. Любые попытки до этого потерпят неудачу!

Видео должно начинаться сначала, что делает черный слой поверх видеоэлемента удобным. К сожалению, звуки в видео не может быть отключена с помощью JavaScript -> не идеальный UX

// https://github.com/JoernBerkefeld/iOSvideoSeekOnLoad/MIT License 
// requires jQuery 1.8+ 
// seekToInitially (float) : video-time in seconds 
function loadingSeek(seekToInitially, callback) { 
    if("undefined"==typeof callback) { 
     callback = function() {}; 
    } 
    var video = $("video"), 
     video0 = video[0], 
     isiOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/) !== null, 
     test; 
    if(isiOS) { // get the iOS Version 
     test =navigator.userAgent.match("OS ([0-9]{1})_([0-9]{1})"); 
     // you could add a loading spinner and a black layer onPlay HERE to hide the video as it starts at 0:00 before seeking 
     // don't add it before or ppl will not click on the play button, thinking the player still needs to load 
    } 
    video.one("playing",function() { 
     if(seekToInitially > 0) { 
      //log("seekToInitially: "+seekToInitially); 
      if(isiOS) { 
       // iOS devices fire an error if currentTime is set before the video started playing 
       // this will only set the time on the first timeupdate after canplaythrough... everything else fails 
       video.one("canplaythrough",function() { 
        video.one("progress",function() { 
         video0.currentTime = seekToInitially; 
         video.one("seeked",function() { 
          // hide the loading spinner and the black layer HERE if you added one before 

          // optionally execute a callback function once seeking is done 
          callback(); 
         }); 
        }); 
       }); 
      } else { 
       // seek directly after play was executed for all other devices 
       video0.currentTime = seekToInitially; 

       // optionally execute a callback function once seeking is done 
       callback(); 
      } 
     } else { 
      // seek not necessary 

      // optionally execute a callback function once seeking is done 
      callback(); 
     } 
    }); 
} 

все это можно скачать с my GitHub repo

Answer 5

apsillers прав.Как только видео начнет воспроизводиться, появится Quicktime-плеер, и видео не будет доступно, пока не будет запущено первое событие «прогресс». Если вы попытаетесь найти до этого, вы получите недопустимую ошибку состояния. Вот мой код:

cueVideo = function (video, pos) { 
    try { 
     video.currentTime = pos; 

    // Mobile Safari's quicktime player will error if this doesn't work. 
    } catch(error) { 
     if (error.code === 11) { // Invalid State Error 

      // once 'progress' happens, the video will be seekable. 
      $(video).one('progress', cueVideo.bind(this, video, pos)); 
     } 
    } 
}