HTML5 缺少视频标签音量控制

Question

我网站上HTML5个视频的音量控制没有出现，看截图：视频开始播放，但没有声音。这些视频在 VLC 和 Windows 媒体播放器中也可以正常播放（有声）。

我已经在 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

您似乎使用了静音视频。因此，音量控制未显示。

看看这个：

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

Answer 2

为什么这些 HTML5 视频问题在 5 年多之后突然出现？

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

浏览器开发人员已经破坏了您的 HTML5 <video> 浏览器嵌入代码，可能是有意或无意地围绕解码它们所需的编解码器。他们拥有浏览器的源代码，可以解释和解码您的 HTML5 MP4 文件，以便在浏览器内容区域中显示。 Chrome 开发人员垄断了 MP4 视频市场，他们的手臂被当权者扭曲了。因此浏览器发现解码您的 MP4 所需的编解码器可能来自未经授权的区域，因此我们在这里绞尽脑汁想知道为什么 chrome 没有显示音量按钮。

我的要求必须是 HTML5 视频固定在服务器端，我不能要求用户 fiddle 使用他们的 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 视频中手动清除第 3 方污点。

有很多选项可以清理和重新编码 MP4 视频，有些是免费的，有些是非免费的。一种方法是使用 VLC 或其他视频播放器或带有 open/save/reencode/convert 工具的软件打开 MP4 文件，然后将其保存为不同的视频编码格式。

我能够在 Java 中编写一个方便的花花公子脚本来遍历每个 MP4 文件破解打开 MP4 文件，清除流浪汉污点（如果存在）然后保存并重新部署 mp4 文件，然后现在一切都很好。然后按计划执行此操作。

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

从您的工具集中删除错误的 HTML5 video 嵌入标签。显示带有 html5 <img .../> 标签的图像，覆盖播放按钮以指示这是一个视频，当用户单击打开一个新选项卡时，原始 MP4 视频在浏览器中播放：音量按钮显示正确，或者最坏的情况是用户将 MP4 视频下载到磁盘，他们可以使用视频播放器从磁盘打开它。
使用不同的浏览器或开源浏览器，知道如何做正确的事情。
尝试打开 'new media controls' chrome://flags，也许在未来的某个时候，Chrome 开发人员会推出一个修复程序，它不会惊慌失措证据表明 mp4 有侵犯数字权利的味道。
为大玩家内容提供商提供先锋和眼球点击收入，只需使用 <a href="">whatever</a> 标签将用户重定向到能够正确显示视频的网站。

游戏正在进行中，请抓紧时间。

HTML5 缺少视频标签音量控制

HTML5 video tag volume control missing

html

video

volume

html5-video

为什么这些 HTML5 视频问题在 5 年多之后突然出现？

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

之前的样子，我期待看到的：

我正在使用的精简代码：

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