Selezione dell'oggetto video HTML5 con jQuery

Question

Im avendo problemi a ottenere il tag video HTML5 con jQuery. Qui è il mio codice:

codice HTML:

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

codice Javascript:

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

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

Le interruzioni del codice sulla linea .currentTime con il seguente errore:

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

Ecco il bit che non riesco a capire - il primo console.log mostra l'oggetto Mi aspetto che all'interno di questo oggetto ci sia un altro oggetto chiamato 0 e questo contiene tutte le proprietà e i metodi video HTML5 che ci si aspetterebbe, incluso .currentTime.

Tuttavia, non appena eseguo il secondo registro di $('#vid')[0], viene visualizzato il codice HTML per il tag video e non l'oggetto che ho chiamato 0. Ottengo gli stessi identici risultati per console.log($('#vid')["0"]) e console.log($('#vid').get(0)).

C'è un modo per ottenere l'oggetto chiamato 0 nell'oggetto restituito da $('#vid') che funziona in jQuery?

Answer 1

Penso che tu stia cercando di interagire con l'elemento video prima che sia pronto.

provare qualcosa di simile:

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

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

Fonte: HTML5 Video - Chrome - Error settings currentTime

Answer 2

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

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

Here è un exemple jsfiddle.

Answer 3

Ho lo stesso identico problema (con audio). Non credo che la risposta accettata risolva o spieghi il problema, soprattutto perché non è una soluzione jquery.

La cosa strana è che posso ottenere la proprietà currentTime, e posso anche fare in modo che il suono ha già giocato prima di tentare di impostare currentTime e si verifica lo stesso errore, quindi non credo che questo abbia qualcosa a che fare con i media è 'pronto'.

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 soluzione è quella di utilizzare un setTimeout

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

... ma vorrei capire perché sta venendo a mancare!

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

Si potrebbe anche usare un try - catch per evitare questo 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

Ho avuto un problema simile, ma non è possibile utilizzare il listener di eventi perché io lavoro con timecode e fare clic su funzioni per impostare la corrente tempo. Ma ho trovato anche una soluzione funzionante.Ogni volta che clicco su un pulsante (ogni singolo tasto ha una variabile tempo differente) questo è il codice all'interno della funzione click:

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

Quindi, con 0,5 secondi di attesa prima di sparare la funzione del InvalidStateError non si verifichino più. Forse è una soluzione rapida e sporca ma funziona;)

Answer 7

Ho avuto lo stesso problema con l'audio. È un disastro :). Devi riprodurre l'audio prima di poter impostare il tempo corrente. Non ho trovato altro modo di aggirarlo. Ecco una buona discussione per riferimento: https://github.com/johndyer/mediaelement/issues/243

Riproduci l'elemento, quindi imposta un listener di eventi per l'evento "in riproduzione" che imposterà l'ora corrente. Ho dovuto evitare un ciclo infinito, quindi ho impostato un "loadPlayed" al di fuori del metodo. Potrebbe non essere elegante, ma è ciò che funziona quindi lo tengo.

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