ホームページ >ウェブフロントエンド >CSSチュートリアル >タブ付きインターフェイスで jQuery を使用して HTML5 ビデオを再生および一時停止するにはどうすればよいですか?

タブ付きインターフェイスで jQuery を使用して HTML5 ビデオを再生および一時停止するにはどうすればよいですか?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-12-08 16:54:12890ブラウズ

How Can I Play and Pause HTML5 Videos Using jQuery in a Tabbed Interface?

jQuery を使用した HTML5 ビデオの再生と一時停止

このシナリオでは、jQuery を使用してタブ付きインターフェイスで HTML5 ビデオを制御することを目的としています。目的は、関連するタブがクリックされたときにビデオを再生し、他のタブがアクティブになったときに一時停止することです。

jQuery ソリューション

ビデオの再生を開始するには、次の jQuery コードを利用しています:

$('#playMovie1').click(function() {
  $('#movie1').play();
});

ただし、「play」関数の使用により問題が発生します。 jQuery 関数とは異なり、「play」はネイティブ DOM メソッドです。したがって、DOM 要素を効果的に実行するには、その要素をターゲットにする必要があります。

ネイティブ DOM 要素へのアクセスに相当する jQuery は「get」です。これをコードに統合すると、目的の再生動作を実現できます。

$('#videoId').get(0).play();

説明

「get」メソッドは、jQuery の選択範囲からネイティブ DOM 要素を取得します。 。これを「再生」機能と組み合わせることで、jQuery を使用してビデオ再生を直接制御でき、タブ付きインターフェイスでのシームレスなエクスペリエンスが保証されます。

以上がタブ付きインターフェイスで jQuery を使用して HTML5 ビデオを再生および一時停止するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。