方法一：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;

    }

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