我正在尝试使用JQuery控制HTML5视频。我在选项卡式界面中有两个剪辑，总共有六个选项卡，其他只有图像。我试图在单击其选项卡时播放视频剪辑，然后在单击任何其他选项卡时停止播放。
这必须是一件简单的事情，但我似乎无法让它工作，我用来播放视频的代码是：
$('#playMovie1').click(function(){
$('#movie1').play();
});
我已经读过视频元素需要在函数中公开以便能够控制它但是找不到示例。我能够使用JS工作：
document.getElementById('movie1').play();
任何建议都会很棒。谢谢
你的解决方案在这里显示了问题 - play不是jQuery函数，而是DOM元素的函数。因此，您需要在DOM元素上调用它。您举例说明如何使用本机DOM函数执行此操作。 jQuery等价 - 如果你想这样做以适应现有的jQuery选择 - 将是$('#videoId').get(0).play()。 （get从jQuery选择中获取本机DOM元素。）
就像注释一样，在尝试调用之前，请确保检查浏览器是否支持视频功能：
if($('#movie1')[0].play)
$('#movie1')[0].play();
这样可以防止不支持视频标记的浏览器出现JavaScript错误。
通过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();
要么
document.getElementById('video_ID').play(); document.getElementById('video_ID').pause();
用这个.. $('#video1').attr({'autoplay':'true'});
我也让它像这样工作：
$(window).scroll(function() {
if($(window).scrollTop() > 0)
document.querySelector('#video').pause();
else
document.querySelector('#video').play();
});
@loneSomeday解释得很漂亮，这里有一个解决方案，也可以让你很好地了解如何实现播放/暂停功能
<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>
enter code here
<form class="md-form" action="#">
<div class="file-field">
<div class="btn btn-primary btn-sm float-left">
<span>Choose files</span>
<input type="file" multiple>
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Upload one or more files">
</div>
</div>
</form>
<video width="320" height="240" id="keerthan"></video>
<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button>
<script>
(function localFileVideoPlayer() {
var playSelectedFile = function (event) {
var file = this.files[0]
var type = file.type
var videoNode = document.querySelector('video')
var fileURL = URL.createObjectURL(file)
videoNode.src = fileURL
}
var inputNode = document.querySelector('input')
inputNode.addEventListener('change', playSelectedFile, false)
})()
function playVid() {
keerthan.play();
}
function pauseVid() {
keerthan.pause();
}
</script>
这就是我设法让它工作的方式：
jQuery( document ).ready(function($) {
$('.myHTMLvideo').click(function() {
this.paused ? this.play() : this.pause();
});
});
我的所有HTML5标签都有“myHTMLvideo”类
你可以做
$('video').trigger('play');
$('video').trigger('pause');
为什么需要使用jQuery？您提出的解决方案可行，并且它可能比构建jQuery对象更快。
document.getElementById('videoId').play();
为了暂停多个视频我发现这很好用：
$("video").each(function(){
$(this).get(0).pause();
});
这可以放入点击功能，非常方便。
作为lonesomeday的答案的延伸，你也可以使用
$('#playMovie1').click(function(){
$('#movie1')[0].play();
});
请注意，没有调用get（）或eq（）jQuery函数。 DOM的数组用于调用play（）函数。这是记住的捷径。
我喜欢这一个：
$('video').click(function(){
this[this.paused ? 'play' : 'pause']();
});
希望能帮助到你。
我在jQuery中使用FancyBox来嵌入视频。给它一个ID。
也许不是最好的解决方案可以不同地切换播放/暂停 - 但对我来说很容易，而且工作起来很简单！ :)
在里面
`
<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>`
这是我们可以使用的简单方法
在jquery按钮单击功能
$("#button").click(function(event){
$('video').trigger('play');
$('video').trigger('pause');
}
谢谢