ビデオを一時停止しても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は、いくつかの方法と続け一つは2つのコピーを作成、二回呼び出されているということでしょうですもう一方を一時停止しても再生されます。

あなたのコードでは、videoplayer varは後でappendを使って作成したビデオタグを参照することはありません。以前は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のを使用： html5 video playing twice (audio doubled) with JQuery .append()

と

Auto-play an HTML5 video on Dom Load using jQuery

：ソースとして

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

が複数の場所があります