如何在视频标签中显示音量控制？

Question

代码：

<video controls playsinline>
  <source src="url.mp4" type="video/mp4">
</video>

在Chrome 67之前，有一个音量控制，因此用户可以向上移动或向下移动音量：

自Chrome 67以来，用户只能将音量静音或取消静音：

我需要它，因为它适用于没有物理音量按钮的大触摸屏......

它可能位于controlslist，但唯一可用的值是nofullscreen nodownload noremoteplayback，而不是volumeslider

那么如何恢复Chrome 66中的音量控制呢？也许一些CSS，JS或HTML5可以帮助我？

Answer 1

可悲的是，我发现最好的解决方案是使用Plyr https://github.com/sampotts/plyr之类的东西。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.3.23/plyr.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.3.23/plyr.polyfilled.min.js"></script>

<video class="presentation_video_src" id="player2"  playsinline controls>
    <source src="/static/videos/intro2.webm" type="video/webm">
</video>

当前唯一受此错误困扰的主要浏览器是Chrome，因此您也可以在JavaScript !!window.chrome && !!window.chrome.webstore中添加此检查，并仅在解析为true时动态插入脚本＆css。

Answer 2

这可以通过更改浏览器设置来实现。 可以使用chrome://flags/#enable-modern-media-controls.

访问

Answer 3

暂时，您可以支持旧版UI。

访问chrome：// flags /＃enable-modern-media-controls。并禁用“新媒体控件”，然后重新启动Chrome。