Question

我网站上的HTML5视频中的音量控制没有显示，请参见屏幕截图：视频在启动时播放，但没有任何声音。视频在VLC和Windows Media Player中播放也很好（有声）。

我在Chrome（65.0.3325.162），Firefox（59.0.1）和Android（三星平板电脑）上进行了测试。我的系统的音量适用于其他应用程序和YouTube视频。

这是（最小）代码（添加高度和海报等其他属性对问题没有影响）：

<!DOCTYPE html>
<html lang='en'>
<body>

    <video controls src='vid1.mp4' width='500'>
    </video>

    <video controls width='500'>
        <source src='vid2.mp4' type='video/mp4' />
    </video>

</body>
</html>

我错过了一些明显的东西吗？

[1]: https://i.stack.imgur.com/qAl7D.png

编辑：

当我在http://techslides.com/demos/sample-videos/small.mp4上使用示例视频进行测试时，控件出现了。它似乎与编码的mp4视频本身有关。

我现在删除了视频网址。我使用VLC对视频进行了重新编码，现在它们正常运行。

Answer 1

为什么这些HTML5视频问题在5年以上之后又出现了？

TLDR：您的代码通过短路MP4内容和每秒的眼球来绕过视频内容农场及其广告点击收入，这是报复行为。这是课程的水准。

浏览器开发人员故意或无意间破坏了HTML5 <video>浏览器的嵌入代码，而这些代码是围绕解码它们所需的编解码器而来的。他们拥有用于解释和解码HTML5 MP4文件的浏览器源代码，以在浏览器内容区域中显示。 Chrome开发人员垄断了MP4视频市场，并被强大的力量所扭曲。因此，浏览器发现解码MP4所需的编解码器可能来自未经授权的区域，因此在这里，我们要弄清chrome为什么不显示音量按钮的原因。

我的要求是HTML5视频必须固定在服务器端，我不能要求用户摆弄他们的chrome标志或安装可纠正该错误的插件。默认情况下，它只能在最新的Chrome，Safari，Firefox和IE上正常运行，最好是按此顺序运行。

缺少HTML5视频音量按钮的情况的屏幕截图：

视频播放，但音量为零。在初始加载期间，播放期间或之后，都不会显示任何音量按钮。出现mp4下载和全屏按钮，并在播放期间正常工作。

是的，新媒体播放器的Chrome标志被禁用：

以前的样子，我希望看到的是

我正在使用的精简代码：

这段代码是从http://camendesign.com/code/video_for_everybody

之类的东西演变而来的

<html><body>
<video width="640" 
       preload="none" 
       height="360" 
       poster="some_content.png" 
       controls="controls">
    <source src="some_content.mp4"
    <source src="__VIDEO__.webm" type="video/webm" />
    <source src="__VIDEO__.ogv" type="video/ogg" /><!--[if gt IE 6]>
    <object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D348
    [endif]--><!--[if !IE]><!-->
    <object width="640" height="375" type="video/quicktime" data="__VIDEO__.mp4"
    <param name="src" value="__VIDEO__.mp4" />
    <param name="autoplay" value="false" />
    <param name="showlogo" value="false" />
    <object width="640" height="380" type="application/x-shockwave-flash"
        data="__FLASH__.swf?image=__POSTER__.jpg&amp;file=__VIDEO__.mp4"> 
        <param name="movie" value="__FLASH__.swf?image=__POSTER__.jpg&amp;file=_
        <img src="__POSTER__.jpg" width="640" height="360" />
        <p>
            <strong>No video playback capabilities detected.</strong>
            Why not try to download the file instead?<br>
            <a href="__VIDEO__.mp4">MPEG4</a>
            <a href="__VIDEO__.ogv">Ogg Theora</a>
        </p> 
    </object><!--[if gt IE 6]><!-->
    </object><!--<![endif]-->
</video>
</body></html>

上面的代码是曾经起作用的代码，但是被破坏了。

对我有用的最终解决方案：手动清除我的MP4视频中的第三方污染。

有很多选项可以清除和重新编码MP4视频，有些则免费，有些则免费。一种方法是使用VLC或其他具有其中的打开/保存/重新编码/转换工具的视频播放器或软件打开MP4文件，然后将其保存为其他视频编码格式。

我能够用Java编写一个方便的花花公子脚本来遍历打开MP4文件的每个MP4文件，清理掉流氓污点（如果存在），然后保存并重新部署mp4文件，现在一切正常。然后按计划进行。

已考虑但被拒绝的其他解决方案：

从工具集中消除错误的HTML5 video嵌入标签。显示带有html5 <img .../>标签的图像，并在播放按钮上覆盖以表示这是视频，当用户单击或打开一个新选项卡时，原始MP4视频将在浏览器中播放：正确显示了音量按钮，或者最坏的情况是用户将MP4视频下载到磁盘上，然后可以使用视频播放器从磁盘上打开它。
使用其他知道正确方法的浏览器或开放源代码浏览器。
尝试切换“新媒体控件” chrome：// flags，也许在将来的某个时候，Chrome开发人员将推动修复，并且不会因为mp4闻到数字版权侵犯的证据而感到惊讶。
向大型播放器内容提供商提供先锋和眼球点击收入，只需使用<a href="">whatever</a>标签将用户重定向到能够正确显示视频的网站。

比赛即将开始。

Answer 2

您似乎正在使用静音视频。因此，音量控制没有显示。

检查出来：

<video  src='https://www.w3schools.com/tags/mov_bbb.mp4' controls>
</video>

HTML5视频标签音量控制丢失

2 个答案:

为什么这些HTML5视频问题在5年以上之后又出现了？

缺少HTML5视频音量按钮的情况的屏幕截图：

以前的样子，我希望看到的是

我正在使用的精简代码：

对我有用的最终解决方案：手动清除我的MP4视频中的第三方污染。