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

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。