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