video标签 controls没有显示音量键

如果`controls`属性添加后，浏览器控制条中没有显示音量控制键，可能是因为浏览器默认的控制条样式不包含音量控制。这时我们可以使用CSS样式自定义控制条，添加音量控制键。

以下是一个添加音量控制键的示例代码：

<video src="video.mp4" controls muted class="custom-controls"></video>

/* 自定义控制条样式 */
.custom-controls::-webkit-media-controls-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px;
    border-radius: 5px;
}

/* 音量控制键样式 */
.custom-controls::-webkit-media-controls-volume-slider {
    width: 80px;
    height: 5px;
    margin: 0 10px;
    background-color: #fff;
    border-radius: 2px;
    overflow: hidden;
}

.custom-controls::-webkit-media-controls-volume-slider::-webkit-media-controls-volume-slider-container {
    width: 100%;
    height: 100%;
    background-color: #ccc;
    border-radius: 2px;
}

.custom-controls::-webkit-media-controls-volume-slider::-webkit-media-controls-volume-slider-thumb {
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
}

该代码会将浏览器默认的控制条样式覆盖，自定义一个包含音量控制键的控制条样式。你可以根据需要自行调整样式。

需要注意的是，不同浏览器对`::-webkit-media-controls-panel`等伪元素的支持程度不同，因此这种方法可能不适用于所有浏览器。