html5 video標簽controlslist的具體使用
我要評論HTML5 提供了內(nèi)置的視頻播放控件，其中 video controlslist 是其中一個很有用的屬性。video controlslist 屬性可以用于告訴瀏覽器在視頻播放過程中應(yīng)該顯示哪些默認的用戶界面控件。下面我們將從幾個方面來介紹 video controlslist 的詳細使用。
一、啟用videocontrolslist
video controlslist 屬性可以應(yīng)用于 video 元素，使用它需要簡單的在 HTML 代碼中的 video 標簽中添加 controlslist 屬性，設(shè)置其值為顯示的控件列表。默認情況下，video 元素的 controlslist 屬性的值為empty。
<video src="example.mp4" controls controlslist="nodownload"></video>
上面的代碼顯示了 controlslist 屬性的一個例子，nodownload 屬性值告訴瀏覽器在顯示控件時不顯示“下載”按鈕。
二、控制 video controlslist 的顯示
控制 video controlslist 的顯示是非常簡單的，只需要設(shè)置 videco controlslist CSS 偽類的 display 屬性即可。該屬性默認值為 “block”，在下面的例子中，我們設(shè)置為 “none”。這會將 video controlslist 完全隱藏起來，不顯示任何控件列表。
video::-webkit-media-controls {
display:none !important;
}
video::-webkit-media-controls-enclosure {
display:none !important;
}
video::-webkit-media-controls-play-button {
display:none !important;
}
video::-webkit-media-controls-timeline {
display:none !important;
}
video::-webkit-media-controls-mute-button {
display:none !important;
}
video::-webkit-media-controls-volume-slider {
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-fullscreen-button {
display:none !important;
}三、控制 video controlslist 的布局
video controlslist 的布局控制通常使用 CSS 來完成。在下面的例子中，我們使用了兩種不同的 CSS 樣式。第一個樣式定義了 video 整個控件列表的樣式，第二個樣式定義了進度條控件的樣式。
video::-webkit-media-controls {
background-color: rgba(255, 255, 255, 0.15);
color: #fff;
font-family: Arial, sans-serif;
text-shadow: 0 0 1px #000;
}
video::-webkit-media-controls-timeline-progress-bar {
background-color: red;
}上面的代碼將 video controlslist 設(shè)置為了白色半透明背景和紅色進度條。
四、控制 video controlslist 的內(nèi)容
video controlslist 的內(nèi)容可以輕松地通過 JavaScript 來修改。下面的例子演示了如何使用原生 JavaScript 訪問 video 元素和它的相關(guān)控件，從而修改這些控件的文本內(nèi)容。
var video = document.getElementsByTagName('video')[0];
var controls = video.getElementsByTagName('div');
for (var i = 0; i < controls.length; i++) {
var control = controls[i];
switch (control.className) {
case 'currenttime':
control.innerHTML = '當前時間';
break;
case 'playpause':
control.innerHTML = '播放/暫停';
break;
case 'remainingtime':
control.innerHTML = '剩余時間';
break;
case 'mute':
control.innerHTML = '靜音/取消靜音';
break;
case 'volumelevel':
control.innerHTML = '音量';
break;
case 'timeline':
control.innerHTML = '時間軸';
break;
case 'fullscreen':
control.innerHTML = '全屏';
break;
}
}上面的代碼將 video controlslist 中的一些控件的文本內(nèi)容進行了修改。
五、CSS Hook
除上述方法外，我們還可以使用 CSS Hook 來控制 video controlslist 的每個方面。在下面的例子中，我們使用 CSS Hook 對視頻控件進行了一些更改。
video::-webkit-media-controls-fullscreen-button,
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-volume-mute-button {
background-color: rgba(0,0,0,0.4);
}
video::-webkit-media-controls-volume-slider {
background-color: rgba(255,255,255,0.7);
-webkit-appearance: none;
}
video::-webkit-media-controls-volume-slider::-webkit-slider-thumb {
background-image: -webkit-linear-gradient(top, #b2b2b2 0%, #fff 100%);
border: 1px solid #ccc;
border-radius: 2px;
height: 24px;
width: 10px;
}上面的代碼使用 CSS Hook 對音量控件進行了樣式更改（音量控件的背景變?yōu)榘胪该骱谏?，滑塊通過漸變實現(xiàn)亮度變化等）。
六、結(jié)論
通過以上對 video controlslist 的詳細闡述，我們可以發(fā)現(xiàn)它是一個功能強大的屬性，可以幫助我們控制瀏覽器在視頻播放過程中應(yīng)該顯示哪些默認的用戶界面控件，而且它的使用非常靈活和可定制性強。我們可以根據(jù)實際需要在頁面中進行設(shè)置，以便更好地控制視頻播放的用戶體驗。
到此這篇關(guān)于html5 video標簽controlslist的具體使用的文章就介紹到這了,更多相關(guān)html5 video controlslist內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
在html5頁面中嵌入視頻的時候頁面中只顯示聲音卻不顯示圖像，本文主要介紹了HTML5 video播放有聲音無圖像的解決方法，具有一定的參考價值，感興趣的可以了解一下2024-02-21Html5 video 標簽 src 用數(shù)據(jù)流方式播放視頻
HTML5中的video標簽用于播放視頻文件的，本文介紹了Html5 video 標簽 src 用數(shù)據(jù)流方式播放視頻，具有一定的參考價值，感興趣的可以了解一下2023-09-27解決html5中的video標簽ios系統(tǒng)中無法播放使用的問題
這篇文章主要介紹了解決html5中的video標簽ios系統(tǒng)中無法播放使用的問題,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-10HTML5 video循環(huán)播放多個視頻的方法步驟
這篇文章主要介紹了HTML5 video循環(huán)播放多個視頻的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來2020-08-06HTML5 video進入全屏和退出全屏的實現(xiàn)方法
這篇文章主要介紹了HTML5 video進入全屏和退出全屏的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編2020-07-28
這篇文章主要介紹了html5自定義video標簽的海報與播放按鈕功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-04
