使用JQuery播放/暂停HTML 5视频。

I am trying to control HTML5 videos using JQuery. I have two clips in a tabbed interface, there are six tabs in total, the others just have images. I am trying to make the video clips play when their tab is clicked and then stop when any of the others are clicked.

我正在尝试使用JQuery控制HTML5视频。我有两个夹在标签界面，总共有六个标签，其他的只是有图像。我试着让视频片段在他们的标签被点击时播放，然后在其他人被点击的时候停止。

This must be a simple thing to do but I cant seem to get it to work, the code I am using to play the video is:

这必须是一个简单的事情，但我似乎不能让它工作，我用来播放视频的代码是:

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

I have read that the video element needs to be exposed in a function to be able to control it but can't find an example. I am able to make it work using JS:

我已经读过了，视频元素需要在一个函数中公开，以便能够控制它，但不能找到一个示例。我可以用JS做它的工作:

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

Any advice would be great. Thanks

任何建议都是好的。谢谢

15 个解决方案

#1

Your solution shows the issue here -- play is not a jQuery function but a function of the DOM element. You therefore need to call it upon the DOM element. You give an example of how to do this with the native DOM functions. The jQuery equivalent -- if you wanted to do this to fit in with an existing jQuery selection -- would be $('#videoId').get(0).play(). (get gets the native DOM element from the jQuery selection.)

您的解决方案显示了这里的问题——play不是jQuery函数，而是DOM元素的函数。因此，您需要将其命名为DOM元素。您将给出一个如何使用本机DOM函数执行此操作的示例。jQuery等价——如果你想这样做，以适应现有的jQuery选择——将是$('#videoId').get(0).play()。(从jQuery选择中获取本地DOM元素。)

#2

This is how I managed to make it work:

这就是我如何做到的:

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

All my HTML5 tags have the class 'myHTMLvideo'

我所有的HTML5标签都有myHTMLvideo这个类

#3

You can do

你可以做

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

#4

Why do you need to use jQuery? Your proposed solution works, and it's probably faster than constructing a jQuery object.

为什么需要使用jQuery?您所建议的解决方案是可行的，而且它可能比构造jQuery对象要快。

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

#5

For pausing multiple videos I have found that this works nicely:

对于暂停的多个视频，我发现这很好用:

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

This can be put into a click function which is quite handy.

这可以放进一个非常方便的点击功能。

#6

As an extension of lonesomeday's answer, you can also use

作为lonesomeday答案的延伸，你也可以使用。

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

Notice that there is no get() or eq() jQuery function called. DOM's array used to call play() function. It's a shortcut to keep in mind.

注意，没有调用()或eq() jQuery函数。DOM的数组用于调用play()函数。这是记住的捷径。

#7

I like this one:

我喜欢这一个:

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

Hope it helps.

希望它可以帮助。

#8

I use FancyBox and jQuery to embedd a video. Give it an ID.

我使用FancyBox和jQuery来嵌入视频。给它一个ID。

Perhaps not the BEST solution could toggle play/pause differently - but easy for me and IT WORKS! :)

也许不是最好的解决方案可以用不同的方式来切换游戏/暂停——但是对我来说很简单，而且很有效!:)

In the

在

`

”

<input type="hidden" id="current_video_playing">

<input type="hidden" id="current_video_status" value="playing">

<video id="video-1523" autobuffer="false" src="movie.mp4"></video>

<script>

// Play Pause with spacebar

$(document).keypress(function(e) { 

    theVideo = document.getElementById('current_video_playing').value

    if (e.which == 32) {

        if (document.getElementById('current_video_status').value == 'playing') {

            document.getElementById(theVideo).pause();

            document.getElementById('current_video_status').value = 'paused'

        } else {

            document.getElementById('current_video_status').value = 'playing'

            document.getElementById(theVideo).play();

        }

    }

});

</script>`

#9

Just as a note, make sure you check if the browser supports the video function, before you try to invoke it:

就像一个注释，在你尝试调用它之前，一定要检查浏览器是否支持视频功能。

if($('#movie1')[0].play)
    $('#movie1')[0].play();

That will prevent JavaScript errors on browsers that don't support the video tag.

这将防止浏览器中不支持视频标签的JavaScript错误。

#10

use this.. $('#video1').attr({'autoplay':'true'});

使用这个. .$(' # video1 ').attr({“播放”:“真实”});

#11

I also made it work like this:

我还让它这样工作:

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

#12

@loneSomeday explained it beautifully , here one solution which might also give you good idea how to achieve play/pause functionality

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

play/pause of video on click

播放/暂停视频点击。

#13

By JQuery using selectors

通过使用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');

By Javascript using ID

通过Javascript使用ID

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

OR

或

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

#14

This is the easy methods we can use

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

on jquery button click function

在jquery按钮上单击函数。

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

Thanks

谢谢

#15

<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>