Selección del objeto de video HTML5 con jQuery

Question

Tengo problemas para acceder a la etiqueta de video HTML5 con jQuery. Aquí está mi código:

código HTML:

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

Javascript código:

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

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

Los descansos de código en la línea .currentTime con el siguiente error:

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

aquí es la parte que no puedo descifrar - la primera console.log muestra el objeto Me gustaría esperar que dentro de este objeto haya otro objeto llamado 0 y que contenga todas las propiedades y los métodos de video HTML5 que podría esperar, incluido .currentTime.

Sin embargo, tan pronto como hago el segundo registro de $('#vid')[0] muestra el código HTML para la etiqueta de video, y no el objeto que estaba después llamado 0. Obtengo los mismos resultados para console.log($('#vid')["0"]) y console.log($('#vid').get(0)).

¿Hay alguna manera de llegar al objeto llamado 0 en el objeto devuelto por $('#vid') que funciona en jQuery?

Answer 1

Creo que está tratando de interactuar con el elemento de video antes de que esté listo.

intentar algo como esto:

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

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

Fuente: HTML5 Video - Chrome - Error settings currentTime

Answer 2

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

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

Here es un exemple jsFiddle.

Answer 3

Estoy teniendo exactamente el mismo problema (con audio). No creo que la respuesta aceptada resuelva o explique el problema en absoluto, en gran parte porque no es una solución jquery.

Lo curioso es que puedo conseguir la propiedad horaActual, e incluso puede asegurarse de que el sonido ya ha jugado antes de tratar de establecer horaActual y se produce el mismo error, por lo que no creo que esto tiene algo que hacer con los medios siendo 'listo'.

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 

Una solución es utilizar un setTimeout

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

... pero me gustaría entender por qué está fallando!

Answer 4

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

Answer 5

También es posible usar un try - catch para evitar este problema:

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

}); 

Answer 6

tuve un problema similar, pero no puede utilizar el detector de eventos porque trabajo con códigos de tiempo y haga clic en funciones para establecer la corriente hora. Pero también encontré una solución de trabajo.Cada vez que haga clic en un botón (cada botón tiene una variable de tiempo diferente) este es el código dentro de la función de clic:

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

Así, con 0,5 segundos de espera antes de disparar la función de la InvalidStateError no ocurrirá nunca más. Tal vez es una solución rápida y sucia, pero funciona;)

Answer 7

Tuve el mismo problema con el audio. Es un desastre :). Tienes que reproducir el audio antes de que puedas configurar el Tiempo actual. No encontré otra forma de evitarlo. Aquí hay un buen hilo de referencia: https://github.com/johndyer/mediaelement/issues/243

Reproduzca el elemento, luego configure un detector de eventos para el evento de "reproducción" que establecerá la hora actual. Tuve que evitar un ciclo infinito, así que configuré un 'loadPlayed' fuera del método. Puede que no sea elegante, pero es lo que funciona, así que lo guardo.

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