如何使用空格键播放/暂停html5视频

Mat*_*att 4 html5-video

如何使用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>
Run Code Online (Sandbox Code Playgroud)

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();
                    }
                }
            }
        });
Run Code Online (Sandbox Code Playgroud)

Abh*_*der 8

这是您的javascript的更改:

$(window).keypress(function(e) {
  var video = document.getElementById("vid");
  if (e.which == 32) {
    if (video.paused)
      video.play();
    else
      video.pause();
  }
});
Run Code Online (Sandbox Code Playgroud)

  • 您是否用视频ID替换了getElementById? (2认同)