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

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

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

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

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

任何建议都很好。谢谢


当前回答

你可以这样做

$('video').trigger('play');
$('video').trigger('pause');

其他回答

我喜欢这个:

$('video').click(function(){
    this[this.paused ? 'play' : 'pause']();
});

希望能有所帮助。

作为lonesomeday答案的延伸,你也可以用

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

注意,这里没有调用get()或eq() jQuery函数。用于调用play()函数的DOM数组。这是一条需要牢记的捷径。

你可以这样做

$('video').trigger('play');
$('video').trigger('pause');
<video style="min-width: 100%; min-height: 100%; " id="vid" width="auto" height="auto" controls autoplay="true" loop="loop" preload="auto" muted="muted">
<source src="video/sample.mp4" type="video/mp4">
<source src="video/sample.ogg" type="video/ogg">
</video>
<script> 
$(document).ready(function(){
document.getElementById('vid').play(); });
</script> 

我还做了这样的工作:

$(window).scroll(function() {
    if($(window).scrollTop() > 0)
        document.querySelector('#video').pause();
    else
        document.querySelector('#video').play();
});