HTML5 视频标签音量控制缺失

Question

HTML5 视频标签音量控制缺失

Ste*_*fan 5 html video volume html5-video

我的网站上的 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>

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

编辑：

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

我现在已经删除了视频网址。我使用 VLC 重新编码了视频，现在它们可以正常工作。

Answer 1

Eri*_*ski 3

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

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

<video>浏览器开发人员故意或无意地破坏了您的 HTML5浏览器嵌入代码，围绕解码它们所需的编解码器。他们拥有浏览器的源代码，可以解释和解码 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>

Run Code Online (Sandbox Code Playgroud)

上面的代码曾经可以工作，但是被破坏了。

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

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

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

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

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

比赛正在进行中，大家抓紧时间。

归档时间：	7 年，8 月前
查看次数：	6565 次
最近记录：	7 年，2 月前