Выбор видеообъекта HTML5 с помощью jQuery

У меня возникают проблемы с получением тега HTML5 с помощью jQuery. Вот мой код:

Код HTML:

<video id="vid" height="400" width="550">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogv" type="video/ogg">
</video>

Код Javascript:

function playVid(){
    console.log($('#vid'));
    console.log($('#vid')[0]);
    $('#vid')[0].currentTime=5;
    $('#vid')[0].play()
}

$(document).ready(){
    playVid();
}

Код разбивается на строку .currentTime со следующей ошибкой:

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

Вот бит, который я не могу вычислить - первый console.log показывает объект, который я ожидал бы, внутри этого объекта находится еще один объект с именем 0, и в нем содержатся все свойства и методы видео HTML5, которые вы ожидаете, включая .currentTime.

Однако, как только я делаю второй журнал $('#vid')[0], он показывает код HTML для тега видео, а не объект, который я получил после вызова 0. Я получаю точные результаты для console.log($('#vid')["0"]) и console.log($('#vid').get(0)).

Есть ли способ получить объект 0 в объекте, возвращаемом $('#vid'), который работает в jQuery?

Ответы

Ответ 1

Я думаю, вы пытаетесь взаимодействовать с элементом видео до его готовности.

Попробуйте что-то вроде этого:

function loadStart(event)
{
    video.currentTime = 1.0;
}

function init()
{
    video.addEventListener('loadedmetadata', loadStart, false);
}
document.addEventListener("DOMContentLoaded", init, false);

Источник: HTML5 Видео - Chrome - Настройки ошибок currentTime

Ответ 2

У меня такая же проблема (со звуком). Я не считаю, что принятый ответ разрешает или объясняет проблему вообще, в основном потому, что это не решение jquery.

Непонятно, могу ли я получить свойство currentTime, и я даже могу убедиться, что звук уже был воспроизведен, прежде чем пытаться установить currentTime, и такая же ошибка возникает, поэтому я не верю это имеет какое-либо отношение к тому, что СМИ "готовы".

var a = $("#myaudio").get(0); // a html5 audio element
console.log(a)                // dumps the object reference in the console
console.log(a.currentTime);   // works fine, logs correct value
a.currentTime = 100           // fails with an InvalidStateError

Обходным путем является использование setTimeout

setTimeout(function(){
            a.currentTime = 0;
        },1);

... но я хотел бы понять, почему он терпит неудачу!

Ответ 3

var a_video = $('#video_id');

a_video.on('loadeddata', function() {
  if(a_video.readyState != 0) {
    a_video[0].currentTime = 100;
  } else {
    a_video.on('loadedmetadata', function() {
      a_video[0].currentTime = 100;
    });
  }
});

Ответ 4

function playVid(){
  $('#vid').get(0).currentTime=5;
  $('#vid').get(0).play()
}

$(window).load(function(){
  playVid();
});

Здесь - пример jsfiddle.

Ответ 5

У меня была такая же проблема с аудио. Это катастрофа:). Перед установкой currentTime вам необходимо воспроизвести аудио. Другого пути я не нашел. Вот хороший поток для справки: https://github.com/johndyer/mediaelement/issues/243

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

audioplayer.src = source;
audioplayer.play();
audioplayer.addEventListener('playing', function () {
    if (loadPlayed == false)
    {
        audioplayer.currentTime = Time;
        audioplayer.play();
        loadPlayed = true;
    }
    else {
        audioplayer.removeEventListener('playing', this);
    }
});

Ответ 6

Вы также можете использовать try - catch, чтобы избежать этой проблемы:

$(document).ready(function() {

    var $video = $('#vid'),
        video = $video[0];

    function playVid() {
        video.currentTime = 5;
        video.play();
    }

    try {
        playVid();
    } catch(error) {
        $video.on('loadedmetadata', playVid);
        video.load();
    }

});

Ответ 7

У меня была аналогичная проблема, но я не могу использовать прослушиватель событий, потому что я работаю с временными кодами и функциями щелчка, чтобы установить текущее время. Но я также нашел рабочее решение. Всякий раз, когда я нажимаю на одну кнопку (каждая кнопка имеет другую переменную времени), это код внутри функции щелчка:

$("#movie").get(0).play();
setTimeout(function () {
     $("#movie").get(0).currentTime = my_time_variable;
}, 500);

Итак, ожидая за 0,5 секунды до запуска функции InvalidStateError больше не будет. Может быть, это быстрое и грязное решение, но оно работает;)