暂停视频不会停止HTML5视频标签中的音频

Question

我暂停使用其pause()方法的视频..问题是音频继续播放...我也尝试从Firefox的Javascript控制台中暂停它。 。 什么都没发生。该视频格式为.ogg，甚至没有在Chrome中播放（因为我认为它不受支持）。 我在Amazon S3上托管了视频，并且完美流传。我正在动态创建元素，从JSON请求中加载它的信息。 下面是一些代码：

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

我已经发布了类似的问题之前......但现在我使用的是其他浏览器，所以我想我必须创建一个新的问题。

---

这里是工作的代码（感谢用户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

我的猜测是，showVideo被称为两次一些如何和创建两个副本，其中一个保持甚至在你打电话给另一个人的时候也会打。

在您的代码中，videoplayer var不会引用稍后创建的视频标签并附加，它会指向之前拥有该id的任何视频标签，我假设在您清空该框时会被删除，但可能会留在记忆中（并继续播放声音）。

只是我最好的猜测，但无论哪种方式，最好使用视频元素的API来设置源和其他参数，而不是清空盒子和重建标记。

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

此外，100％不是width/height属性的有效值。您需要使用CSS来制作视频以填充区域。

Answer 2

嘿家伙我有一个类似的问题，这是与真棒编码器解决。看看这篇文章。这可能是非常有用的。 HTML5 Video Controls do not work

如果您使用HTML属性：

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

删除自动播放。

然后使用jquery使用自动播放代替：

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

至于源有多个位置： html5 video playing twice (audio doubled) with JQuery .append()

和

Auto-play an HTML5 video on Dom Load using jQuery