Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/475.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在光滑的旋转木马上暂停视频_Javascript_Video.js_Slick.js - Fatal编程技术网

Javascript 在光滑的旋转木马上暂停视频

Javascript 在光滑的旋转木马上暂停视频,javascript,video.js,slick.js,Javascript,Video.js,Slick.js,2我需要一些帮助,我在光滑的滑动同步旋转木马上使用了几个videojs html播放器。我的问题是当我点击其他转盘缩略图转到第一个视频继续播放的其他视频时。我想在单击任何缩略图时暂停任何视频 我的html是: <div class="slider-for"> <div class="video-wrap"> <video id="example_video_1" class="video-js vjs-sublime-skin

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>

有了这个功能,我只能暂停第一个视频,我想得到一些帮助的功能,当我点击一个缩略图,我可以暂停任何播放视频,它应该为所有的缩略图也工作。有人能帮我吗?

您遇到的主要问题是,您有几个具有相同ID的视频标签:“示例视频1”


我建议每个视频标签都有自己的ID,这样你就可以单独访问它们了

谢谢你的回答。这很有道理,但我忘了说,因为我已经尝试更改ID了。
这种情况下的问题是,一个缩略图应该在播放时暂停任何视频,它不应该链接到暂停特定视频,我不知道如何才能做到这一点
了解它的工作原理更有意义:



在Kalima TV上播放一些视频并单击一些缩略图转到下一步时,第一个视频在隐藏时继续播放音频。
 _V_("example_video_1").ready(function(){

  var player = this;

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

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

});