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

<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>

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

<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 Answers 3

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

1. Instead of video.js file include developer's version video.dev.js

2. Redefine tap in your .js file before the initialization of videojs player:

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

You can disable controls

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

if you disabled controls, but hope click video pause, you can customize touch event, that.play() is customize method

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

You can pass nativeControlsForTouch = true in

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

OR In JavaScript:

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

This will enabled the native controllers for mobile view