javascript - 如何在没有控件的情况下暂停 video.js 上的视频

Question

我正在使用 video.js。这是我如何实现它的。

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

如您所见，控件已禁用。但是我想在点击这个视频时暂停它。有人可以告诉我我该怎么做。

Answer 1

根据此处的文档（https://github.com/videojs/video.js/blob/master/docs/api.md），以下 javascript 应该可以工作：

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

暂停后，我认为视频应该恢复播放？jsFiddle 工作示例：http: //jsfiddle.net/fR2Xs/

Answer 2

另一种方法是启用控件并将其显示值设置为无。这样您就可以暂停视频并且控件不可见。

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