如何使用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();
}
}
}
});
这是您的javascript的更改:
$(window).keypress(function(e) {
var video = document.getElementById("vid");
if (e.which == 32) {
if (video.paused)
video.play();
else
video.pause();
}
});
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>
你去,这应该工作。
// Press spacebar to Play/Pause.
var body = $( 'body' );
body.keypress( function ( e ) {
if ( e.which == 32 ) {
// Stop the jerk.
e.preventDefault();
// If video is paused.
if ( theVideo.get(0).paused == true ) {
theVideo.get(0).play();
} else {
theVideo.get(0).pause();
}
}
}); // End keypress().