9

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
user2726883
  • 161
  • 1
  • 3
  • 9

2 Answers2

23

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/

comixninja
  • 748
  • 6
  • 17
  • Thank you, I have implemented it in the header but it won't work. Here's the source. vinejar.com – user2726883 Sep 10 '13 at 19:21
  • Here's a jsfiddle working example for you: http://jsfiddle.net/fR2Xs/ After calling the videojs.play() method, the video controls are re-added to the player. I added a CSS override to keep it hidden for the time being. – comixninja Sep 11 '13 at 19:57
  • `myPlayer.paused()` should be `myPlayer.paused` as it's a property – Vince Nov 15 '18 at 13:22
1

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;
}
Sirius Clarke
  • 29
  • 3