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

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

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

在视频播放器初始化之前，重新定义.js文件中的点按：

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

Answer 2

您可以通过nativeControlsForTouch = true 在

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

或在JavaScript中：

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

这将使本机控制器具有移动视图

Answer 3

您可以禁用控件

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()
      }
    }
  })
})

视频js。玩家在手机上轻按一下即可暂停/玩游戏

3 个答案: