Pausar video no detiene el audio en la etiqueta de video html5

Question

Estoy pausando un video usando su método pause() ... el problema es que el audio continúa reproduciéndose ... También intenté pausarlo desde la Consola JavaScript en Firefox ... . no pasa nada. El video está en formato .ogg y ni siquiera se reproduce en Chrome (porque creo que no es compatible). He alojado el video en Amazon S3 y está transmitiendo a la perfección. Estoy creando el elemento dinámicamente, cargando su información desde una solicitud JSON. Aquí hay un código:

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

ya he publicado una pregunta similar antes ... pero ahora estoy usando otros navegadores, así que pensé que tengo que crear una nueva pregunta.

---

Aquí está el código de trabajo (gracias al usuario 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

Mi conjetura sería que showVideo se llama dos veces de alguna forma y creando dos copias, una de las cuales mantiene jugando incluso después de llamar a pausa en el otro.

En su código, la var de videoplayer no se referirá a la etiqueta de video que cree más adelante con append, apuntará a lo que tenía antes esa id, que supongo que se elimina cuando vacía la caja, pero podría quedarse en la memoria (y continuar reproduciendo el sonido).

Es mi mejor estimación, pero de cualquier forma sería mejor usar la API del elemento de video para establecer el origen y otros parámetros en lugar de vaciar la caja y reconstruir la etiqueta.

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

Además, el 100% no es un valor válido para los atributos de ancho/alto. Tendrá que usar CSS para hacer que el video se estire para llenar un área.

Answer 2

Hola chicos tuve un problema similar que se resolvió con codificadores realmente maravillosos. Mira esta publicación. Puede ser de gran utilidad. HTML5 Video Controls do not work

Si está utilizando el atributo HTML:

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

Retire la reproducción automática.

A continuación, utilice jquery usar reproducción automática en su lugar:

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

En cuanto a la fuente hay múltiples lugares: html5 video playing twice (audio doubled) with JQuery .append()

y

Auto-play an HTML5 video on Dom Load using jQuery