video視頻標簽自定義顯示隱藏播放控件&Shadow DOM

方法一：controlslist屬性

controlslist="nodownload nofullscreen noremoteplayback"  

controlslist僅三種屬性值，取值如下，無序，空格隔開，可單獨配置
nodownload:取消更多控件彈窗的下載功能;
nofullscreen:取消全屏功能;
noremoteplayback:取消遠程播放視頻功能

<video controls controlslist="nodownload nofullscreen noremoteplayback"><video/>

方法二：Shadow DOM

  shadow DOM就是瀏覽器創建的DOM子樹。簡單來說，它是一系列的DOM元素，跟熟悉的div span一樣，只不過shadow DOM是瀏覽器添加的文檔片段(document fragment)並且能夠像DOM樹一樣在頁面中得到渲染

video標簽在瀏覽器中渲染之后，F12查看頁面元素，你會發現播放控件（進度條，播放時長，全屏按鈕等等）其實是由一個個html標簽渲染出來的

那么我們來看一下查看控件元素的方式，如果直接F12去查看的話，你只能看到video標簽，看不到瀏覽器渲染出來的控件標簽，如下圖

 此時我們需要在瀏覽器設置中打開 Show user agent shadow DOM，操作方法以chrome為例

 

 設置完成后再去elements中查看你的video標簽，你會發現video標簽中多了一些子標簽，如下圖

 

  這些標簽和偽元素就是video中的所有控件元素

 偽元素為::-webkit-media-controls,通過名字我們就已經知道這是和視頻控制欄相關聯的標簽。然后我們可以通過設置display:none !important覆蓋樣式來將它隱藏就是這么簡單;

 以下是我在平時需求中經常有用到的，可供參考

    // 播放按鈕
    video::-webkit-media-controls-play-button {
      display: none !important;
    }
    // 當前播放時間
    video::-webkit-media-controls-current-time-display {
      display: none !important;
    }
    // 剩余時間
    video::-webkit-media-controls-time-remaining-display {
      display: none !important;
    }
    // 音量按鈕
    video::-webkit-media-controls-volume-control-container {
      display: none !important;
    }
    // 全屏
    video::-webkit-media-controls-fullscreen-button {
      display: none !important;
    }
    // 時間軸
    video::-webkit-media-controls-timeline {
      display: none !important;
    }
    // 更多選項
    video::-internal-media-controls-overflow-button {
      display: none !important;
    }

 可以根據實際業務需求做對應處理，如有錯誤或不足之處，望指出。