video 播放 全屏 更多控件顯示隱藏&自定義視頻控件&Shadow DOM

video 顯示隱藏播放全屏更多控件&Shadow DOM

最近做項目中用到了 H5 video標籤播放視頻,需求刪除自帶的更多控制按鈕;自以爲很簡單設定標籤的屬性,查看文檔只有一個可憐的controls布爾值屬性與這方面相關;查了半天video相關文檔,也學到了很多相關的知識.廢話不多說上代碼:

第一種:controlslist屬性(只有3個配置項)

// controlslist=“nodownload nofullscreen noremoteplayback”;

      <video
        controls
        controlslist="nodownload"  //禁用下載
        class="video-player"
        disablePictureInPicture  // 禁用畫中畫
        oncontextmenu = "return false"  //禁用鼠標右鍵
      ></video>

controlslist:取值如下,設定多個空格間隔
nodownload:取消更多控件彈窗的下載功能;
nofullscreen:取消全屏功能;
noremoteplayback:取消遠程播放視頻
controlslist=“nodownload” + disablePictureInPicture,彈窗中兩個選項全部取消後,更多按鈕自動消失了

第二種 shadow DOM

我也是第一次聽說:
shadow DOM就是瀏覽器創建的在DOM子樹。簡單來說，它是一系列的DOM元素，跟熟悉的div span一樣，只不過shadow DOM是瀏覽器添加的文檔片段(document fragment)並且能夠像DOM樹一樣在頁面中得到渲染。下面引用James Edwards的話簡要概括一下影子DOM的作用:

影子DOM通過創建文檔片段的形式高效地封裝內容，影子DOM的內容是特殊的文檔，會通過合併到主文檔的方式來創建所有被渲染的內容。
實際上一些瀏覽器已經通過影子DOM的方式來渲染瀏覽器的插件

1.查看shadow DOM

打開控制檯只有video DOM,沒有播放 暫停等元素的信息,其實video標籤的控制欄就是瀏覽器創建的shadow DOM

2.查看shadow DOM

(1)在控制設定如下(Chrome)

 

(2)shadow DOM信息如下

僞元素爲::-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;
    }

**然而覆蓋隱藏更多按鈕樣式並不生效;**可以設定disablePictureInPicture屬性,隱藏畫中畫

總結

個人理解就是以上兩點,需要隱藏取消的按鈕要根據實際情況選用以上兩種方法;定製化比較高的話,隱藏controls = false隱藏視頻控制欄,調用API play() pause()也可以實現播放等功能,根據實際需求開發;寫的比較直白,有錯誤或者不足的地方,多謝指出;

個人shadow DOM博客,寫的不錯,大家也可以看看
————————————————
版權聲明：本文爲CSDN博主「花自飄淩水自流」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_38417082/article/details/103749942