我试图用JQuery控制HTML5视频。我在一个选项卡界面中有两个剪辑，总共有六个选项卡，其他的只有图像。我试图使视频剪辑播放时，他们的标签被点击，然后停止时，任何其他被点击。
这一定是一个简单的事情要做，但我似乎不能让它工作，我使用的代码播放视频是:
$('#playMovie1').click(function(){
$('#movie1').play();
});
我读过，视频元素需要在一个函数中公开，以便能够控制它，但找不到一个例子。我能够使它工作使用JS:
document.getElementById('movie1').play();
任何建议都很好。谢谢
当前回答
我是这样做到的:
jQuery( document ).ready(function($) {
$('.myHTMLvideo').click(function() {
this.paused ? this.play() : this.pause();
});
});
我所有的HTML5标签都有myHTMLvideo类
其他回答
我是这样做到的:
jQuery( document ).ready(function($) {
$('.myHTMLvideo').click(function() {
this.paused ? this.play() : this.pause();
});
});
我所有的HTML5标签都有myHTMLvideo类
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>
在这里找到答案@ToolmakerSteve，但必须这样微调: 暂停所有
$('video').each(function(index){
$(this).get(0).pause();
});
或者玩所有
$('video').each(function(index){
$(this).get(0).play();
});
您的解决方案显示了这里的问题——play不是jQuery函数，而是DOM元素的函数。因此，您需要在DOM元素上调用它。您给出了如何使用本机DOM函数实现这一点的示例。jQuery的等效——如果你想这样做以适应现有的jQuery选择——将是$('#videoId').get(0).play()。(get从jQuery选择中获取原生DOM元素。)
<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>
