HTML5 视频 - 如何使整个视频可点击？

Question

使用基本视频，当我点击视频而不是控件时，如何让它播放/暂停？

Answer 1

您可以为整个视频添加点击处理程序。

例如

<video id="my-video" controls src="myVideo.mp4"></video>

<script>    
   document.getElementById('my-video').addEventListener('click', function() {
       if (this.paused) {
          this.play();
       } else {
          this.pause();
       }
    });
</script>

Answer 2

<video id="video1" onClick="playPause();">

...

    function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 


<video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>

Source

Answer 3

详细信息在 Snippet 的 cmets 中

// Reference #lid and #vid
var lid = document.getElementById('lid1');
var vid = document.getElementById('vid1');

// Listen for user to click #lid then...
lid.addEventListener('click', function(event) {

  // ...if #vid1 is paused, play video...
  if (vid.paused) {
    vid.play();

    // ...else pause video
  } else {
    vid.pause();
  }

  /* The only element that needs to know click
  | events is #iid, so stop the event chain from
  | continuing.
  */
  event.stopPropagation();
}, false);

.box {
  position: relative;
  min-width: 300px;
  min-height: 170px;
}
.lid {
  position: absolute;
  width: 100%;
  /* This measurement is just enough for #lid1 
  | to cover #vid1 and keep the controls exposed
  */
  min-height: calc(100% - 32px);
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 32px;
  cursor: pointer;
}
.vid {
  position: absolute;
  height: auto;
  top: 0;
  left: 0;
}

<!--Parent positioned relative-->
<figure id='box1' class='box'>

  <!--#lid1 and #vid1 are positioned absolute-->
  <div id='lid1' class='lid'>

    <!--#vid1 is z-index:0 and #lid1 is z-index:1-->
    <video id="vid1" class="vid" src="http://html5demos.com/assets/dizzy.mp4" controls width='100%'></video>

  </div>

</figure>