La suspension de la vidéo n'arrête pas l'audio dans la balise vidéo html5

Question

Je mets en pause une vidéo en utilisant sa méthode pause() .. le problème est que l'audio continue de jouer ... J'ai également essayé de la mettre en pause depuis la console Javascript de Firefox .. . Rien ne se passe. La vidéo est au format .ogg et ne joue même pas dans Chrome (parce que je pense que ce n'est pas supporté). J'ai hébergé la vidéo sur Amazon S3 et elle est parfaitement diffusée. Je crée l'élément dynamiquement, en chargeant ses informations à partir d'une requête JSON. Voici un code:

function showVideo() { 
     var video = videodata; 

     var videobox = $('#videobox').first(); 
     var videoplayer = document.getElementById('videoplayer'); 

     if (video.Enabled) { 
      if ((videoplayer != null && videoplayer.currentSrc != video.Location) || videoplayer == null) { 
       console.log('Creating video elem'); 
       videobox.empty(); 
       videobox.append('<video id="videoplayer" preload="auto" src="' + 
        video.Location + '" width="100%" height="100%" autoplay="autoplay" loop="loop" />'); 
       videobox.show(); 
      } 
     } else { 
      if (videoplayer != null) { 
       videoplayer.pause(); 
       console.log('Pausing video...'); 
      } 
      console.log('Deleting video elem'); 
      videobox.hide(); 
      videobox.empty(); 
     } 
    } 

J'ai déjà posté une question similaire avant ... mais maintenant je suis en utilisant d'autres navigateurs, donc je pensais que je dois créer une nouvelle question.

---

Voici le code de travail (grâce à l'utilisateur heff!)

function showVideo() { 
    var video = videodata; 

    var videobox = $('#videobox').first(); 
    var videoplayer = document.getElementById('videoplayer'); 

    if (video.Enabled) { 
     if ((videoplayer.src != video.Location) || videoplayer.src == '') { 
      console.log('Playing video: ' + video.Location); 
      videoplayer.src = video.Location; 
      videoplayer.load(); 
      videoplayer.play(); 
      videobox.show(); 
     } 
    } else { 
     if (videoplayer.src != '') { 
      console.log('Pausing video...'); 
      videoplayer.pause(); 
      videoplayer.src = ''; 
      videobox.hide(); 
     } 
    } 
} 

Answer 1

Je dirais que showVideo est appelé deux fois une certaine façon et la création de deux exemplaires, dont un garde jouer même après avoir appelé pause de l'autre. Dans votre code, le vidéoprojecteur var ne se référera pas à la balise vidéo que vous créerez plus tard avec append, il pointera sur ce qui avait cet identifiant auparavant, que je suppose être retiré lorsque vous videz la boîte, mais pourrait Restez dans la mémoire (et continuez à jouer du son).

Juste ma meilleure estimation, mais de toute façon, il serait préférable d'utiliser l'API de l'élément vidéo pour définir la source et d'autres paramètres plutôt que de vider la boîte et la reconstruction de l'étiquette.

videoplayer.src = video.Location; 
videoplayer.autoplay = true; 
// etc. 

De même, 100% n'est pas une valeur valide pour les attributs width/height. Vous aurez besoin d'utiliser CSS pour étirer la vidéo pour remplir une zone.

Answer 2

Hé les gars j'ai eu un problème similaire qui a été résolu avec les codeurs vraiment merveilleux. Découvrez ce post. Cela pourrait être d'une grande utilité. HTML5 Video Controls do not work

Si vous utilisez l'attribut HTML:

<video id="yourvideoID" poster="Pic.jpg" loop autoplay controls width="100%"> 
 
<source src="//example.website/InnovoThermometer.mp4" type="video/mp4">   
 
</video>

Supprimer AutoPlay.

Utilisez ensuite jquery utiliser à la place AutoPlay:

$(document).ready(function() { $("#bigvid3").get(0).play(); });

En ce qui concerne la source, il y a des emplacements multiples: html5 video playing twice (audio doubled) with JQuery .append()

et

Auto-play an HTML5 video on Dom Load using jQuery