如何使用空格键播放/暂停html5视频
如何使用空格键播放/暂停html5视频
提问于 2014-11-18 04:07:28
如何使用e.key使用空格键暂停html5视频？逻辑上有点问题...
<div class=modal-video id="v-5417">
<div class=video-player>
<video id=v-5417-tape preload="none">
<source type="video/mp4" src="videos/anthem-od47.mp4">
<source type="video/webm" src="videos/anthem-od47.webm">
</video>
<div class="close-modal fade-control"></div>
</div>
</div>JS
$( document ).on( 'keydown', function ( e ) {
if ( e.keyCode === 32 ) {
if (video.paused == true) {
// Play the video
video.play();
}else{
if(video.play == true){
video.pause();
}
}
}
});回答 4
Stack Overflow用户
回答已采纳
发布于 2014-11-18 04:36:12
以下是对javascript的更改：
$(window).keypress(function(e) {
var video = document.getElementById("vid");
if (e.which == 32) {
if (video.paused)
video.play();
else
video.pause();
}
});
Stack Overflow用户
发布于 2019-10-01 17:58:29
使用e.preventDefault()停止向下滚动网页。
var vid=document.getElementById('your_video_id_goes_here');
document.body.onkeypress = function(e){
if(e.which == 32){
// stops default behaviour of space bar. Stop page scrolling down
e.preventDefault();
play_pause_video
}
}
function play_pause_video() {
if (vid.paused)
{
vid.play();
}
else
{
vid.pause();
}
}Stack Overflow用户
发布于 2016-11-22 08:05:04
var videoPlayer = document.getElementById('Video1')
$(window).keypress(function(e) {
if (e.keyCode == 0 || e.keyCode == 32) {
if (videoPlayer.paused == false) {
videoPlayer.pause();
videoPlayer.firstChild.nodeValue = 'Play';
} else {
videoPlayer.play();
videoPlayer.firstChild.nodeValue = 'Pause';
}
}
});<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="/website/js/playPause.js></script>
</head>
<body>
<center>
<h1>Video</h1>
<video id="Video1" autoplay="yes">
<source src="videoName.mp4" type="video/mp4" />
</video>
</center>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26981018
复制相关文章
相似问题