文章/答案/技术大牛

发布

社区首页 >问答首页 >视频js玩家只需在手机上轻点即可暂停/播放

问视频js玩家只需在手机上轻点即可暂停/播放
EN

Stack Overflow用户

提问于 2015-01-21 23:31:13

回答 3查看 5.6K关注 0票数 4

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

回答 3

Stack Overflow用户

发布于 2015-04-20 15:46:54

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

而不是video.js文件在.js文件中包含开发人员版本video.dev.js
Redefine tap，然后再初始化videojs播放器：

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

票数 7

Stack Overflow用户

发布于 2021-07-08 16:27:23

您可以禁用控件

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

票数 0

Stack Overflow用户

发布于 2019-09-12 15:08:08

您可以将nativeControlsForTouch = true传入

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

或者在JavaScript中：

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

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

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28070934

复制

相似问题

问视频js玩家只需在手机上轻点即可暂停/播放
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问视频js玩家只需在手机上轻点即可暂停/播放EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问视频js玩家只需在手机上轻点即可暂停/播放
EN