暫停視頻不會停止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