html5 video 标签 controlslist 详解

HTML5 提供了内置的视频播放控件，其中 video controlslist 是其中一个很有用的属性。video controlslist 属性可以用于告诉浏览器在视频播放过程中应该显示哪些默认的用户界面控件。下面我们将从几个方面来介绍 video controlslist 的详细使用。

一、启用videocontrolslist

video controlslist 属性可以应用于 video 元素，使用它需要简单的在 HTML 代码中的 video 标签中添加 controlslist 属性，设置其值为显示的控件列表。默认情况下，video 元素的 controlslist 属性的值为empty。

<video src="example.mp4" controls controlslist="nodownload"></video>

上面的代码显示了 controlslist 属性的一个例子，nodownload 属性值告诉浏览器在显示控件时不显示“下载”按钮。

二、控制 video controlslist 的显示

控制 video controlslist 的显示是非常简单的，只需要设置 videco controlslist CSS 伪类的 display 属性即可。该属性默认值为 “block”，在下面的例子中，我们设置为 “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 设置为了白色半透明背景和红色进度条。

四、控制 video controlslist 的内容

video controlslist 的内容可以轻松地通过 JavaScript 来修改。下面的例子演示了如何使用原生 JavaScript 访问 video 元素和它的相关控件，从而修改这些控件的文本内容。

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 中的一些控件的文本内容进行了修改。

五、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 对音量控件进行了样式更改（音量控件的背景变为半透明黑色，滑块通过渐变实现亮度变化等）。

六、结论

通过以上对 video controlslist 的详细阐述，我们可以发现它是一个功能强大的属性，可以帮助我们控制浏览器在视频播放过程中应该显示哪些默认的用户界面控件，而且它的使用非常灵活和可定制性强。我们可以根据实际需要在页面中进行设置，以便更好地控制视频播放的用户体验。