video 全屏彈幕被遮蓋問題

需求說明：使用video.js播放視頻，要求點擊全屏按鈕的時候，彈幕可以跟視頻一起全屏。

看起來是個很簡單的需求，直覺上只要在全屏后，只要讓彈幕的z-index高過全屏的視頻不就可以了嗎。

但是實際上，全屏的元素層級似乎是最高的，用z-index無法實現彈幕在全屏視頻上出現的效果。

使用requestFullScreen, exitFullscreen, fullscreenchange事件實現全屏效果

Element.requestFullscreen()可以實現div元素的全屏，那么只要把彈幕和<video>標簽放在同一個父div里，就可以實現全屏時彈幕在<video>上的效果了：

<div class="playerLive">
  <video></video>
  <canvas class="danmu"></canvas>
</div>

　　

const playerLive = document.querySelector('playerLive');
videoWrapper.requestFullscreen();

　　

只要在父元素下，彈幕的層級比<video>高，彈幕在視頻上方的效果就能實現了。

不過，在使用的過程中需要注意，requestFullscreen使用時需要加上webkit,ms,moz等瀏覽器前綴，解決瀏覽器的兼容問題：

if (playerLive.requestFullscreen) {
  return playerLive.requestFullscreen();
} else if (playerLive.webkitRequestFullScreen) {
  return playerLive.webkitRequestFullScreen();
} else if (playerLive.mozRequestFullScreen) {
  return playerLive.mozRequestFullScreen();
} else (playerLive.msRequestFullscreen) {
  playerLive.msRequestFullscreen();
}

　　

而且，Element.requestFullscreen()在IE只支持IE11+。

document.exitFullscreen()可以讓當前頁面內退出全屏模式，要注意的是這個api是在document上，不需要是全屏的那個元素。

fullscreenchange事件可以監聽頁面的全屏狀態，頁面全屏/退出全屏都能觸發fullscreenchange事件。同樣需要給監聽事件添加瀏覽器前綴。

 

因為video.js已經自帶了一個全屏按鈕，這里自己想辦法隱藏調或者自己寫一個控制器。

作者：般犀
鏈接：https://www.jianshu.com/p/4ecc3e285c29
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

 

 

瀏覽器全屏實現方式

1.利用h5的 requestFullScreen

2.摁F11實現全屏效果

requestFullscreen全屏具體實現

1.進入全屏

 

function full(ele) {
      if (ele.requestFullscreen) {
          ele.requestFullscreen();
      } else if (ele.mozRequestFullScreen) {
          ele.mozRequestFullScreen();
      } else if (ele.webkitRequestFullscreen) {
          ele.webkitRequestFullscreen();
      } else if (ele.msRequestFullscreen) {
          ele.msRequestFullscreen();
      }
}

　　

ele：要全屏的元素，可以是document.body也可以是某一個div
思路：
1.判斷該瀏覽器是否具有requestFullscreen方法
2.有，則直接執行ele.requestFullscreen()；沒有則做瀏覽器兼容判斷。

2.exitFullScreen退出全屏

function exitFullscreen() {
    if(document.exitFullScreen) {
        document.exitFullScreen();
    } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if(document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if(document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

　　

退出全屏直接使用document調用exitFullscreen方法即可。

3.獲取當前全屏的節點

 

function getFullscreenElement() {
    return (        
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullScreenElement ||
        document.webkitFullscreenElement||null
    );
}

　　

document.fullscreenElement()：獲取當前全屏的元素。
假設id為div1的Element當前為全屏狀態則 document.querySelector("#div1")===document.fullscreenElement

4.判斷當前是否全屏

function isFullScreen() {
  return  !! (
      document.fullscreen || 
      document.mozFullScreen ||                         
      document.webkitIsFullScreen ||       
      document.webkitFullScreen || 
      document.msFullScreen 
   );
}

 

5.判斷當前文檔是否能切換到全屏

 

function isFullscreenEnabled() {
    return  (
        document.fullscreenEnabled ||
        document.mozFullScreenEnabled ||
        document.webkitFullscreenEnabled ||
        document.msFullscreenEnabled
    );
}

注意事項：

1.document下沒有requestFullscreen
2.requestFullscreen方法只能由用戶觸發，比如：在onload事件中不能觸發
3.頁面跳轉需先退出全屏
4.進入全屏的元素，將脫離其父元素，所以可能導致之前某些css的失效
解決方案：使用 :full-screen偽類 為元素添加全屏時的樣式（使用時為了兼容注意添加-webkit、-moz或-ms前綴）
5.一個元素A全屏后，其子元素要再全屏，需先讓元素A退出全屏

作者：皮卡丘_小面包
鏈接：https://www.jianshu.com/p/54729c73686a
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

 

 

后續自己寫一個視頻彈幕的demo實驗一下=。=