我试图用JQuery控制HTML5视频。我在一个选项卡界面中有两个剪辑，总共有六个选项卡，其他的只有图像。我试图使视频剪辑播放时，他们的标签被点击，然后停止时，任何其他被点击。
这一定是一个简单的事情要做，但我似乎不能让它工作，我使用的代码播放视频是:
$('#playMovie1').click(function(){
$('#movie1').play();
});
我读过，视频元素需要在一个函数中公开，以便能够控制它，但找不到一个例子。我能够使它工作使用JS:
document.getElementById('movie1').play();
任何建议都很好。谢谢
当前回答
你可以这样做
$('video').trigger('play');
$('video').trigger('pause');
其他回答
我喜欢这个:
$('video').click(function(){
this[this.paused ? 'play' : 'pause']();
});
希望能有所帮助。
我使用了fantybox和jQuery来嵌入视频。给它一个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>`
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使用选择器
$("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();
OR
document.getElementById('video_ID').play(); document.getElementById('video_ID').pause();
var vid = document.getElementById("myVideo"); function playVid() { vid.play(); } function pauseVid() { vid.pause(); } <video id="myVideo" width="320" height="176"> <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"> <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> <button onclick="playVid()" type="button">Play Video</button> <button onclick="pauseVid()" type="button">Pause Video</button><br>
