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

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

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

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

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

任何建议都很好。谢谢


当前回答

这是我们可以使用的简单方法

jquery上的按钮点击功能

$("#button").click(function(event){
    $('video').trigger('play');
    $('video').trigger('pause');
}

谢谢

其他回答

你可以这样做

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

我是这样做到的:

jQuery( document ).ready(function($) {
    $('.myHTMLvideo').click(function() {
        this.paused ? this.play() : this.pause();
    });
});

我所有的HTML5标签都有myHTMLvideo类

在这里找到答案@ToolmakerSteve,但必须这样微调: 暂停所有

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

或者玩所有

$('video').each(function(index){
    $(this).get(0).play();
});

我还做了这样的工作:

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

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

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

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