0

2私はいくつかの助けが必要です.滑らかなスライダーの同期カルーセルでいくつかのvideojs htmlプレーヤーを使用しています. 私の問題は、他のカルーセルのサムネイルをクリックして他のビデオに移動すると、最初のビデオが再生され続けることです。サムネイルをクリックしてビデオを一時停止したいと思います。

私のhtmlは次のとおりです。

<div class="slider-for">
        <div class="video-wrap">
            <video id="example_video_1" class="video-js vjs-sublime-skin vjs-big-play-centered"
  controls preload="auto" width="auto" height="auto"
  poster="images/video/cover-video2.png"
  data-setup='{}'>
 <source src="images/video/Kalima2.mp4" type='video/mp4' />
 <source src="images/video/Kalima2.webm" type='video/webm' />
 <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
        </div>
        <div class="video-wrap">
        <video id="example_video_2" class="video-js vjs-sublime-skin vjs-big-play-centered"
  controls preload="auto" width="auto" height="auto"
  poster="images/video/cover-video1.jpg"
  data-setup='{}'>
 <source src="images/video/Kalima1.mp4" type='video/mp4' />
 <source src="images/video/Kalima1.webm" type='video/webm' />
 <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
        </div>
        <div class="video-wrap">
        <video id="example_video_3" class="video-js vjs-sublime-skin vjs-big-play-centered"
  controls preload="auto" width="auto" height="auto"
  poster="images/video/cover-video-students.jpg"
  data-setup='{}'>
 <source src="images/video/Students.mp4" type='video/mp4' />
 <source src="images/video/Students.webm" type='video/webm' />
 <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
        </div>
        <div class="video-wrap">
        <video id="example_video_4" class="video-js vjs-sublime-skin vjs-big-play-centered"
  controls preload="auto" width="auto" height="auto"
  poster="images/video/cover-video3.jpg"
  data-setup='{}'>
 <source src="images/video/Kalima3.mp4" type='video/mp4' />
 <source src="images/video/Kalima3.webm" type='video/webm' />
 <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
        </div>
        <div class="video-wrap">
            <video id="example_video_5" class="video-js vjs-sublime-skin vjs-big-play-centered"
  controls preload="auto" width="auto" height="auto"
  poster="images/video/cover-video-students2.jpg"
  data-setup='{}'>
 <source src="images/video/Students2.mp4" type='video/mp4' />
 <source src="images/video/Students2.webm" type='video/webm' />
 <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
        </div>

        </div>
            <div class="video-thumb">
                <div><div id="thumb"><img src="images/video/video2.png"></div></div>
                <div><div id="thumb"><img src="images/video/video1.png"></div></div>
                <div><div id="thumb"><img src="images/video/video3.png"></div></div>
                <div><div id="thumb"><img src="images/video/video4.png"></div></div>
                <div><div id="thumb"><img src="images/video/video5.png"></div></div>

            </div>

私はこのjsを見つけます：

 _V_("example_video_1").ready(function(){

  var player = this;

  var pausebutton = document.getElementById("thumb");

  pausebutton.onclick = function(event) {
    player.pause();
  };

});

この機能を使用すると、最初のビデオのみを一時停止できます。単一のサムネイルをクリックすると、再生中のビデオを一時停止でき、すべてのサムネイルでも機能するはずです。誰かが私を助けることができますか？

4

1 に答える 1