Question

2我需要一些帮助，我在光滑的滑块sycing旋转木马上使用了几个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();
  };

});

使用此功能，我只能暂停第一个视频，当我点击单个缩略图时我想要一些功能的帮助我可以暂停任何播放的视频，它也适用于所有缩略图。有人可以帮帮我吗？

Answer 1

您遇到的主要问题是您有多个具有相同ID的视频标签：＆＃34; example_video_1＆＃34;。

我建议为每个视频标签提供自己的ID。然后，您就可以单独访问它们了。

在光滑的旋转木马上暂停Videojs

1 个答案: