javascript - 视频.js播放器在手机上单击即可暂停/播放

Question

我的网站上有很多响应式 html5 视频，我想通过点击/点击视频来播放/暂停它们。它在台式机上的工作方式与此类似，但在智能手机上，如果您点击视频，它只会显示控件，因此您需要再次点击控件才能播放/暂停。有什么方法可以让 video.js 播放器在移动设备上的行为与在桌面设备上的行为相似。一次点击视频(不是控件)播放第二次点击暂停。这是我的代码。请帮忙

<div class="wrapper">
<div style="max-width: 400px;margin:auto">

<video id="video1" class="video-js vjs-default-skin vjs-big-play-centered "
   loop controls preload="auto" width="auto" height="auto" 
  poster="example.png"
  data-setup='{"children": {"loadingSpinner": false}}'>
   <source src="example.mp4" type='video/mp4' />    

 <source src="example.webm" type='video/webm' />
</video>
</div>
</div>

Answer 1

您需要覆盖默认的点击行为。为此 -

1. 而不是 video.js 文件包含开发者版本 video.dev.js

2. 在初始化 videojs 播放器之前在您的 .js 文件中重新定义 tap:

      videojs.MediaTechController.prototype.onTap = function(){
         if (this.player().controls()) {
           if (this.player().paused()) {
             this.player().play();
           } else {
             this.player().pause();
           }
         }
       };