我试图用JQuery控制HTML5视频。我在一个选项卡界面中有两个剪辑,总共有六个选项卡,其他的只有图像。我试图使视频剪辑播放时,他们的标签被点击,然后停止时,任何其他被点击。

这一定是一个简单的事情要做,但我似乎不能让它工作,我使用的代码播放视频是:

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

我读过,视频元素需要在一个函数中公开,以便能够控制它,但找不到一个例子。我能够使它工作使用JS:

document.getElementById('movie1').play();

任何建议都很好。谢谢


当前回答

对于暂停多个视频,我发现这很有效:

$("video").each(function(){
    $(this).get(0).pause();
});

这可以放入一个点击功能,这是相当方便的。

其他回答

var vid = document.getElementById("myVideo"); function playVid() { vid.play(); } function pauseVid() { vid.pause(); } <video id="myVideo" width="320" height="176"> <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"> <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> <button onclick="playVid()" type="button">Play Video</button> <button onclick="pauseVid()" type="button">Pause Video</button><br>

您的解决方案显示了这里的问题——play不是jQuery函数,而是DOM元素的函数。因此,您需要在DOM元素上调用它。您给出了如何使用本机DOM函数实现这一点的示例。jQuery的等效——如果你想这样做以适应现有的jQuery选择——将是$('#videoId').get(0).play()。(get从jQuery选择中获取原生DOM元素。)

为什么需要使用jQuery?您提出的解决方案是可行的,而且可能比构造jQuery对象还要快。

document.getElementById('videoId').play();

@loneSomeday解释得很好,这里有一个解决方案,可能也会给你一个很好的主意,如何实现播放/暂停功能

点击播放/暂停视频

JQuery使用选择器

$("video_selector").trigger('play');  
$("video_selector").trigger('pause');
$("div.video:first").trigger('play');$("div.video:first").trigger('pause');
$("#video_ID").trigger('play');$("#video_ID").trigger('pause');

Javascript使用ID

video_ID.play();  video_ID.pause();

OR

document.getElementById('video_ID').play();  document.getElementById('video_ID').pause();