html5 video 標(biāo)簽 controlslist詳細(xì)使用
我要評(píng)論HTML5 提供了內(nèi)置的視頻播放控件，其中 video controlslist 是其中一個(gè)很有用的屬性。video controlslist 屬性可以用于告訴瀏覽器在視頻播放過程中應(yīng)該顯示哪些默認(rèn)的用戶界面控件。下面我們將從幾個(gè)方面來介紹 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 完全隱藏起來，不顯示任何控件列表。
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 樣式。第一個(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)容可以輕松地通過 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 = '當(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 來控制 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)榘胪该骱谏瑝K通過漸變實(shí)現(xiàn)亮度變化等）。
六、結(jié)論
通過以上對(duì) video controlslist 的詳細(xì)闡述，我們可以發(fā)現(xiàn)它是一個(gè)功能強(qiáng)大的屬性，可以幫助我們控制瀏覽器在視頻播放過程中應(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 標(biāo)簽 controlslist內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
解決html5中video標(biāo)簽無法播放mp4問題的辦法
HTML5的video標(biāo)簽的瀏覽器兼容性增強(qiáng)方案分享
HTML5 Video標(biāo)簽的屬性、方法和事件匯總介紹
html5 video標(biāo)簽controlslist的具體使用