使用 JQuery 播放/暂停 HTML 5 视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4646998/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Play/pause HTML 5 video using JQuery
提问by Barny83
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
任何建议都会很棒。谢谢
回答by lonesomeday
Your solution shows the issue here -- playis 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(). (getgets the native DOM element from the jQuery selection.)
您的解决方案在这里显示了问题——play不是 jQuery 函数，而是 DOM 元素的函数。因此，您需要在 DOM 元素上调用它。您给出了如何使用本机 DOM 函数执行此操作的示例。jQuery 等价物——如果你想这样做以适应现有的 jQuery 选择——将是$('#videoId').get(0).play(). （get从 jQuery 选择中获取本机 DOM 元素。）
回答by Miguel Tavares
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”类
回答by wonder
You can do
你可以做
$('video').trigger('play');
$('video').trigger('pause');
回答by sudo work
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();
回答by Josh Holmes
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.
这可以放在一个非常方便的点击功能中。
回答by ozanmuyes
As an extension of lonesomeday's answer, you can also use
作为lonesomeday's answer的扩展，您还可以使用
$('#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.
请注意，没有调用 get() 或 eq() jQuery 函数。用于调用 play() 函数的 DOM 数组。这是要记住的捷径。
回答by ozanmuyes
I like this one:
我喜欢这个：
$('video').click(function(){
this[this.paused ? 'play' : 'pause']();
});
Hope it helps.
希望能帮助到你。
回答by Alexander W
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>`
回答by subindas pm
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
谢谢
回答by Riyaz Hameed
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();
