How to pause video on video.js without controls

Question

I'm using video.js. Here's how I have implemented it.

<video id="example_video_1" class="video-js vjs-default-skin" loop preload="auto" width="530" height="530" poster="<?php echo $iurl; ?>" autoplay>
<source src="<?php echo $vurl; ?>" type='video/mp4' />
</video>

As you have noticed, the controls are disabled. But I would like to pause this video when it's clicked. Can someone tell me how I can do that.

Answer 1

According to the documentation here (https://github.com/videojs/video.js/blob/master/docs/api.md), the following javascript should work:

HTML

<video id="example_video_1" onclick="togglePause()" class="video-js vjs-default-skin" loop preload="auto" width="530" height="530" poster="<?php echo $iurl; ?>" autoplay>
<source src="<?php echo $vurl; ?>" type='video/mp4' />
</video>

Javascript

var myPlayer = videojs("example_video_1");
togglePause = function(){
  if (myPlayer.paused()) {
    myPlayer.play();
  }
  else {
    myPlayer.pause();
  }
}

After being paused, I assumed the video should resume playing? jsFiddle working example: http://jsfiddle.net/fR2Xs/

Answer 2

Another way of doing it is by enabling the controls and setting their display value to none. This way you can pause the video and controls are not visible.

.vjs-control-bar, .vjs-big-play-button {
   display: none !important;
}