logo标签列表

HTML5视频标签缺少音量控制

htmlvideohtml5-videovolume
4
在我的网站上，HTML5视频中的音量控制器没有显示，如下图所示：enter image description here 视频播放时没有声音。在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://istack.dev59.com/qAl7D.webp

编辑：

当我在 http://techslides.com/demos/sample-videos/small.mp4 上测试一个示例视频时，出现了控件。看来与编码后的mp4视频本身有关。

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

有示例URL可以在实际环境中查看吗？ - Offbeatmammal
好奇怪啊。看起来这似乎与我使用的特定mp4视频有关。当我链接到另一个示例视频时，控件突然出现了。http://techslides.com/demos/sample-videos/small.mp4 - Stefan
@ Kaiido 这些视频在VLC和媒体播放器中都可以正常播放，所以它们肯定有音轨。 - Stefan
我正在从Chrome下载文件，但它无法检测到正确的文件大小。此外，Firefox直接拒绝解码视频“解析MP4元数据失败”。请尝试重新编码您的视频。 - Kaiido
好的，谢谢。奇怪的是，在Chrome中下载视频链接时，我没有收到文件大小问题的报告。直接在Firefox中打开视频链接对我也不起作用。当我在Firefox中使用上面的代码时，它确实可以工作（但没有声音）。我会重新编码。 - Stefan
显示剩余2条评论
2个回答
3

为什么这些HTML5视频问题在5年后才出现？

简而言之：您的代码通过短路MP4内容和每秒钟的视觉效果来绕过视频内容农场及其广告点击收入，这是报复行为。这是家常便饭。

浏览器开发人员已经破解了您的HTML5 <video> 浏览器嵌入代码，无论是故意还是偶然，都与解码所需的编解码器相关。他们拥有解释和解码您的HTML5 MP4文件以在浏览器内容区域中呈现的浏览器源代码。Chrome开发人员垄断了MP4视频市场，并被强制执行。因此，浏览器看到解码您的MP4所需的编解码器可能来自未经授权的区域，因此我们在想为什么Chrome没有显示音量按钮。

我的要求是HTML5视频在服务器端修复，我不能要求用户调整他们的Chrome标志或安装纠正错误的插件。它必须默认在最新的Chrome、Safari、Firefox，然后是IE上正常工作。

缺失HTML5视频音量按钮案例的截图：

视频播放，但音量为零。在初始加载期间以及播放期间或之后都没有呈现音量按钮。在播放期间，MP4下载和全屏按钮会被呈现并正常工作。

So very late

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

enter image description here

它之前的样子，我期望看到的：

enter image description here

我使用的简化代码：

这段代码是从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文件，现在一切都好了。然后按计划执行此操作。
其他考虑过但被拒绝的解决方案：
  1. 从工具集中删除有缺陷的HTML5 video嵌入标签。使用带有html5 <img .../>标签的图像，叠加播放按钮以指示这是一个视频，当用户单击时，打开一个新标签，在浏览器中播放原始MP4视频：音量按钮正确显示，或者最坏的情况是用户将MP4视频下载到磁盘上，并可以使用其视频播放器打开它。
  2. 使用不同的浏览器或开源浏览器，它们知道如何做正确的事情。
  3. 尝试切换“新媒体控制”chrome://flags，也许在未来某个时候，Chrome Devs会推出修复程序，它不会因为mp4存在数字版权问题而出现故障。
  4. 将先锋和点击收入让给大型内容提供商，只需使用<a href="">whatever</a>标记将用户重定向到能够正确显示视频的网站。

游戏开始了，请抓紧时间。

1
没人谈论的愚蠢错误！对我来说，Chrome（69.0.3497.100）运行良好，但Firefox（62.0.2）播放某些MP4没有声音。我已经使用.ogg格式解决了这个问题。 - ThePhi
-1

看起来您正在使用静音视频。因此，音量控制不显示。

检查一下：

<video  src='https://www.w3schools.com/tags/mov_bbb.mp4' controls>
</video>
1
不，那不是。 - Stefan
1
谢谢你纠正我，我是 Stack Overflow 的新手。 - Raman Pratap
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接