[解決済み】「次へ」ボタンが押されると、html5ビデオを自動的に一時停止する（javascript/jquery）。

質問

現在作成中のアプリケーションをテストするために、Webブラウザ上でi-phoneのような画面をデザインしています。ユーザーはビデオエリアをクリックすることでビデオを再生し、右上のボタンをクリックすることで次のビデオにナビゲートすることができます。

THE PROBLEM（ザ・プロブレム）。 問題は、ビデオを押して再生しているときに、「次へ」ボタンを押すと、クリックバックしていない場合は、新しいビデオが進み、バックグラウンドでそのビデオの再生音が聞こえることです。

ビデオをミュートしようとしたが、うまくいかなかった。 ユーザーが「次へ」ボタンをクリックした場合にビデオをミュートすることを試したところ、ミュートには成功しました。しかし、問題は、戻るボタンを押すとビデオが完全にミュートされ、ページを更新しない限り、音がまったく再生のされないことです*。

これは、「次へ」ボタンが押された場合にビデオをミュートしようとするために使用した jquery コードです。

$("#nextButtonTop, #prevButtonTop ").click( function (){
if( $("#topVid video:visible").prop('muted') ) {
        $("#topVid video:visible").prop('muted', true);

  } else {
    $("#topVid video:visible").prop('muted', true);


  }
});

このセクションの基本的なhtmlコードです。 このセクションの基本的なHTMLコード：

<div class="topVid channel1960s">
  <div class="testMarqueeLeft"><div>CHANNEL 1960s: Jackie Kennedy at JFK's service</div></div>
      <video loop onclick="this.paused? this.play() : this.pause()" >
      <source src="videos/1960s_Jackie_mourning_VERT.mp4" type="video/mp4">
      Your browser does not support the video tag.
      </video> </div>

理想的な解決策：「次へ」ボタンが押されると同時に一時停止する。 最終的に、ミュートはパフォーマンスの問題から理想的な解決策ではないことに気づきました（音がなくても隠し映像が再生され続けることになります）。 この「次へ」ボタンが押されると同時にビデオを一時停止する（ミュートするのではない）最良の方法は何でしょうか？ html上にインラインのjavascriptコードがすでにあり、ユーザーがそれをクリックすると再生と一時停止を行うようになっていますが 次のボタンが押されたら一時停止して、表示されたら再生できるようにする、この他の部分の追加方法がよくわかりません。

動画を一時停止させるためにこれを試したが、うまくいかなかった。

$("#nextButtonTop, #prevButtonTop ").click( function (){
  if ($('.topVid.video').is(":hidden")) {
      $('.topVid.video').pause();
  }
});

これも試してみましたが、何も

$('video').each(function(){
    if ($(this).is(":in-viewport")) {
        $(this)[0].play();
    } else {
        $(this)[0].pause();
    }
})

を使用する。

 "this.paused ? this.play() : this.pause();"

他の回答で提案されましたが、一時停止が他の要素（ビデオ自体ではなく、「次へ」ボタン）をクリックすることによって引き起こされることを考えると、これがどのように機能するのかよくわかりません。

どのように解決するのですか？

jQueryがドキュメントの最後にある場合を除き、jQueryは必ず jQuery(function($) {...}).

すべてのイベントハンドラをHTMLではなくjavaScriptで添付する。これは必須ではありませんが、すべてのインタラクティブなコードを一目で確認できるようにします。

以下のことに注意してください。 {コード と {コード {コード は {{コード {コード 要素のメソッドであり、jQueryのメソッドではありません。

これを試してみてください。

HTML

.play()

JavaScript

.pause()