视频.js。播放器在手机上单击即可暂停/播放答案

【问题标题】：Video js. player pause/play with a single tap on a mobile视频.js。播放器在手机上单击即可暂停/播放
【发布时间】：2015-01-21 15:31:13
【问题描述】：

我的网站上有很多响应式 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>

【问题讨论】：

标签： javascript ios html video video.js

【解决方案1】：

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

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

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

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

【讨论】：

对于非开发者版本的 videojs 有什么建议吗？
我和@johndoe有同样的问题

【解决方案2】：

您可以禁用控件

videoJs('videoId', {controls: false});

如果你禁用了控件，但希望点击视频暂停，你可以自定义触摸事件，that.play()是自定义方法

const that = this
this.videoObj = videojs(id, options, function () {
  this.on('touchstart', function (e) {
    if (e.target.nodeName === 'VIDEO') {
      if (!that.isPlay) {
        that.play()
      } else {
        that.pause()
      }
    }
  })
})

【讨论】：

【解决方案3】：

你可以通过nativeControlsForTouch = true 在

data-setup='{"nativeControlsForTouch": true}'

或在 JavaScript 中：

videoJs('videoElement', {nativeControlsForTouch: true});

这将为移动视图启用本机控制器

【讨论】：