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

【问题标题】：How to show volume controls in a video tag?如何在视频标签中显示音量控制？
【发布时间】：2018-10-25 14:24:08
【问题描述】：

代码：

<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 可以帮助我？

【问题讨论】：

请提供代码。

标签： html google-chrome html5-video

【解决方案1】：

暂时，您可以支持旧 UI。

访问 chrome://flags/#enable-modern-media-controls。并禁用“新媒体控件”并重新启动 Chrome。

【讨论】：

如果 OP 正在编写一个将被成千上万的用户使用的应用程序怎么办？每个用户都必须切换到旧用户界面吗？

【解决方案2】：

很遗憾，我发现的最佳解决方案是使用 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。

【讨论】：

【解决方案3】：

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

【讨论】：