blocks|key|1227829|text|您将需要覆盖默认的点击行为。为此-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1227830|1227831|而不是video.js文件在.js文件中包含开发人员版本video.dev.js|ordered-list-item|offset|length|style|BOLD|1227832|Redefine+tap，然后再初始化videojs播放器：|1227833|1227834|videojs.MediaTechController.prototype.onTap+=+function(){+if+(this.player().controls())+{+if+(this.player().paused())+{+this.player().play()；}+else+{+this.player().pause()；};|1227835|entityMap^0|0|0|J|L|0|0|U|0|0|0|4U|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|R|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|S|8|@$F|T|G|U|H|I]]|9|@]|A|$]]|$1|J|3|K|5|E|7|V|8|@$F|W|G|X|H|I]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@$F|10|G|11|H|I]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|P|$]]

You will need to override default tap behaviour. For that - 

<ol>
<li>Instead of video.js file include developer's version video.dev.js</li>
<li>Redefine tap in your .js file before the initialization of videojs player:

<pre><code> videojs.MediaTechController.prototype.onTap = function(){
 if (this.player().controls()) {
 if (this.player().paused()) {
 this.player().play();
 } else {
 this.player().pause();
 }
 }
 };
</code></pre></li>
</ol>

blocks|key|1138186|text|您可以将nativeControlsForTouch+=+true传入|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1138187|data-setup='{"nativeControlsForTouch":+true}'|code-block|syntax|javascript|1138188|或者在JavaScript中：|1138189|videoJs('videoElement',+{nativeControlsForTouch:+true});|1138190|这将为移动视图启用本机控制器|1138191|entityMap^0|4|T|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

You can pass <code>nativeControlsForTouch = true</code> 
in 

<pre><code>data-setup='{"nativeControlsForTouch": true}'
</code></pre>

OR In JavaScript: 

<pre><code>videoJs('videoElement', {nativeControlsForTouch: true});
</code></pre>

This will enabled the native controllers for mobile view

blocks|key|1143165|text|您可以禁用控件|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1143166|videoJs('videoId',+{controls:+false});|code-block|syntax|javascript|1143167|如果您禁用了控件，但希望点击视频暂停，您可以自定义触摸事件，that.play()是自定义方法|offset|length|style|CODE|1143168|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()
++++++}
++++}
++})
})|1143169|entityMap^0|0|0|U|B|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

You can disable controls
<pre class="lang-js prettyprint-override"><code>videoJs('videoId', {controls: false});
</code></pre>
if you disabled controls, but hope click video pause, you can customize touch event, <code>that.play()</code> is customize method
<pre class="lang-js prettyprint-override"><code>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()
 }
 }
 })
})
</code></pre>

I have a lot of responsive html5 videos on my website and I'd like to just play/pause them by click/tap on video. And it's working like that on desktop but on smartphones if you tap on video it just showing controls so you need tap second time on the controls to play/pause. Is there any way to video.js player act similar on mobile as on desktop. One tap on video (not controls) play second tap pause. this is my code. Please for help 

<pre><code>&lt;div class="wrapper"&gt;
&lt;div style="max-width: 400px;margin:auto"&gt;

&lt;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}}'&gt;
 &lt;source src="example.mp4" type='video/mp4' /&gt; 

 &lt;source src="example.webm" type='video/webm' /&gt;
&lt;/video&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

Video js. player pause/play with a single tap on a mobile

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我的网站上有很多响应式的html5视频，我只想通过点击/点击视频来播放/暂停它们。它在桌面上是这样工作的，但在智能手机上，如果你点击视频，它只会显示控件，所以你需要再次点击控件才能播放/暂停。有没有办法让video.js播放器在移动设备上的表现像在桌面上一样。在视频(不是控件)上点击一次，播放第二次点击暂停。这是我的代...

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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