そのため、各ページに異なる数のビデオがあるページがある複数ページのプロジェクトでvideo.jsを使用しています。1つの動画を再生して、そのページで再生されている他の動画を一時停止したい。私はそれを機能させましたが、私のコードは、各ページを単独で機能させるのではなく、ページ専用に作成された場合にのみ機能します。
HTML（例）
<video id="video5" poster="poster.png" class="video-js vjs-16-9 vjs-big-play-centered"
data-setup='{
"controls": true,
"autoplay": false,
"preload": "none"
}'>
<source src="video.mp4" type='video/mp4'>
</video>
JS
var player1 = videojs('video1');
var player2 = videojs('video2');
var player3 = videojs('video3');
var player4 = videojs('video4');
var player5 = videojs('video5');
var player6 = videojs('video6');
var players = [player1, player2, player3, player4, player5, player6];
players.forEach(function(player) {
player.on('play', function() {
console.log('test');
players.forEach(function(pl) {
if (pl !== player) {
pl.pause();
}
})
})
});
したがって、これらの一致するIDを持つ6つのビデオがある場合、これは正常に機能します。しかし、私が多かれ少なかれ持っているならば、それは壊れます。IDではなくクラスごとに何かを一時停止するようにJSをフォーマットする方法はありますか？試しました('.video-js').pause()が、エラーが発生します。
NM、答えを見つけました。これを残しておくと、おそらく人々が見つけやすくなります。
var medias = Array.prototype.slice.apply(document.querySelectorAll('audio,video'));
medias.forEach(function(media) {
media.addEventListener('play', function(event) {
medias.forEach(function(media) {
if(event.target != media) media.pause();
});
});
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加