blocks|key|2718724|text|以下是对javascript的更改：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2718725|​|2718726|$(window).keypress(function(e)+{
++var+video+=+document.getElementById("vid");
++if+(e.which+==+32)+{
++++if+(video.paused)
++++++video.play();
++++else
++++++video.pause();
++}
});|code-block|syntax|javascript|2718727|2718728|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>Here's the changes to your javascript:              </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>$(window).keypress(function(e) {
  var video = document.getElementById("vid");
  if (e.which == 32) {
    if (video.paused)
      video.play();
    else
      video.pause();
  }
});</code></pre>
</div>
</div>
</p>


blocks|key|39482|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|39483|var+videoPlayer+=+document.getElementById('Video1')
$(window).keypress(function(e)+{
++if+(e.keyCode+==+0+%7C%7C+e.keyCode+==+32)+{
	if+(videoPlayer.paused+==+false)+{
++++++++++++videoPlayer.pause();
++++++++++++videoPlayer.firstChild.nodeValue+=+'Play';
++++++++}+else+{
++++++++++++videoPlayer.play();
++++++++++++videoPlayer.firstChild.nodeValue+=+'Pause';
++++++++}
++
++}
});|code-block|syntax|javascript|39484|<!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>|39485|39486|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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';
        }
  
  }
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="/website/js/playPause.js&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;center&gt;
    &lt;h1&gt;Video&lt;/h1&gt;
    &lt;video id="Video1" autoplay="yes"&gt;
      &lt;source src="videoName.mp4" type="video/mp4" /&gt;
    &lt;/video&gt;
  &lt;/center&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|38287|text|给你，这应该行得通。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|38288|//+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().|code-block|syntax|javascript|38289|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here you go, this should work.</p>

<pre><code>// 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().
</code></pre>


blocks|key|38630|text|使用e.preventDefault()停止向下滚动网页。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|38631|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();+
}
}|code-block|syntax|javascript|38632|entityMap^0|2|I|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Use <code>e.preventDefault()</code> to stop the scrolling of the web page to bottom.</p>

<pre><code>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(); 
}
}
</code></pre>


<p>How do you pause an html5 video with the spacebar using e.key? There's something off about the logic...</p>

<pre><code>    &lt;div class=modal-video id="v-5417"&gt;
    &lt;div class=video-player&gt;
                    &lt;video id=v-5417-tape preload="none"&gt;
                        &lt;source type="video/mp4" src="videos/anthem-od47.mp4"&gt;
                        &lt;source type="video/webm" src="videos/anthem-od47.webm"&gt;
                    &lt;/video&gt;
                    &lt;div class="close-modal fade-control"&gt;&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
</code></pre>

<p><strong>JS</strong></p>

<pre><code>$( 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();
                    }
                }
            }
        });
</code></pre>


How to play/pause html5 video with spacebar

如何使用e.key使用空格键暂停html5视频？逻辑上有点问题...    <div class=modal-video id="v-5417">    <div class=video-player>                    <video id=v-5417-tape preload="none">  ...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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