Sélection de l'objet vidéo HTML5 avec jQuery

Im ayant des problèmes de mise à la balise vidéo HTML5 avec jQuery. Voici mon code:

Code HTML:

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

Code Javascript:

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

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

Le code des pauses sur le .currentTime ligne avec l'erreur suivante:

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

Voici le peu que je ne peux pas comprendre - la première console.log montre l'objet, je l'espère, à l'intérieur de cet objet est un autre objet appelé 0 et cela vaut toutes les vidéos HTML5 propriétés et méthodes que vous attendez, y compris .currentTime.

Cependant dès que je fais le deuxième journal de $('#vid')[0] il affiche le code HTML de la balise vidéo, et non pas de l'objet, j'étais après appelé 0. J'obtiens exactement le même résultat pour console.log($('#vid')["0"]) et console.log($('#vid').get(0)).

Est-il un moyen d'accéder à l'objet appelé 0 de l'objet renvoyé par $('#vid') qui fonctionne en jQuery?

source d'informationauteur Jimmery

Je pense que vous essayez d'interagir avec l'élément vidéo avant qu'il soit prêt.

Essayer quelque chose comme cela:

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

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

Source: Vidéo HTML5 - Chrome - Erreur de paramètres currentTime

6

Je suis d'avoir exactement le même problème (avec audio). Je ne crois pas que l'on a accepté de répondre résout ou explique le problème, en grande partie parce qu'il n'est pas un jquery solution.

La chose étrange est que je peux obtenir la propriété currentTime, et je peux même assurez-vous que le son a déjà joué avant d'essayer de mettre en currentTime et la même erreur se produit, donc je ne crois pas que cela ait quelque chose à voir avec les médias d'être "prêt".
```
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
```
Une solution de contournement consiste à utiliser un setTimeout
```
setTimeout(function(){
            a.currentTime = 0;
        },1);
```
...mais j'aimerais comprendre pourquoi c'est un échec!

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

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

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

Ici est un jsfiddle exemple.

2

J'ai eu le même problème avec l'audio. C'est une catastrophe :). Vous avez à jouer de l'audio à l'avant, vous pouvez définir currentTime. Je n'ai trouvé aucun moyen de contourner cela. Voici un bon thread pour référence: https://github.com/johndyer/mediaelement/issues/243

Jouer l'élément, puis de définir un écouteur d'événement pour le " jeu " de l'événement qui permettra de régler l'heure actuelle. J'avais pour éviter une boucle infinie, j'ai donc mis un "loadPlayed' en dehors de la méthode. Il ne peut pas être élégant, mais c'est ce qui fonctionne donc je vais garder.
```
audioplayer.src = source;
audioplayer.play();
audioplayer.addEventListener('playing', function () {
    if (loadPlayed == false)
    {
        audioplayer.currentTime = Time;
        audioplayer.play();
        loadPlayed = true;
    }
    else {
        audioplayer.removeEventListener('playing', this);
    }
}); 
```

Vous pouvez également utiliser un try - catch pour éviter ce problème:

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

});

1

J'ai eu un problème similaire, mais ne peut pas utiliser l'écouteur d'événement parce que je travaille avec des timecodes et cliquez sur fonctions pour régler l'heure actuelle. Mais j'ai aussi trouvé une solution qui fonctionne. Chaque fois que je clique sur un bouton (chaque bouton a une autre variable de temps) c'est le code dans la fonction de clic:
```
$("#movie").get(0).play();
setTimeout(function () {
     $("#movie").get(0).currentTime = my_time_variable;
}, 500);
```
Donc de l'attente de 0,5 secondes avant le déclenchement de la fonction de la InvalidStateError ne puissent plus se produire. C'est peut-être un moyen rapide et sale solution mais ça marche 😉

Vous devez vous connecter pour publier un commentaire.