最近接到客戶需求, 要求我們的網頁直播播放器更加符合廣大人民群眾的使用習慣,實現雙擊全屏的效果.目前網頁直播播放器使用了開源的 VideoJS, 它的預設效果是單擊播放區域暫停, 只能通過右下角的最大化按鈕觸發最大化. 要實現雙擊全屏播放的效果, 就要對 VideoJS 動點小手術, 下面介紹下其中兩個關鍵的步驟.

一. 禁用單擊暫停

google 得知已經有人提過這樣的 issue, google 能夠通過關鍵詞搜尋到 github 上面的 issues, 這一點非常的贊啊. 點選這個 issue 的連結進去, 可以看到, 作者回答並且給出了答案.

正如圖中作者指出的, 通過下面一段 css 來遮蔽

.vjs-tech {
    pointer-events: none;
}

二. 啟用雙擊全屏

接下來就是啟用雙擊全屏了. 用到一個 VideoJS 的 HotKeys 外掛, 這個外掛預設開啟了 VideoJS 的雙擊全屏播放效果, 並且在全屏播放狀態下, 再次雙擊退出全屏.整合這個外掛, 只需兩步:

1. 引用JS

<script src="//cdn.sc.gl/videojs-hotkeys/0.2/videojs.hotkeys.min.js"></script>

2. 配置 VideoJS 啟用外掛

videojs('vidId'
 
).ready(function() {
  this.hotkeys({
    volumeStep: 0.1,
    seekStep: 5,
    enableVolumeScroll: false, //禁用滑鼠滾輪調節問音量大小
    enableModifiersForNumbers: false
  });
});

以上完成了 VideoJS 網頁直播播放器雙擊全屏的效果. 可以訪問 EasyDSS流媒體伺服器官網 體驗效果.