HTML5视频标签音量控制丢失 [英] HTML5 video tag volume control missing

查看：118
本文介绍了HTML5视频标签音量控制丢失的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的网站上没有出现HTML5视频中的音量控制，请参见屏幕截图:视频在播放时开始播放，但没有声音.视频还可以在VLC和Windows Media Player中正常播放(带有声音).

The volume control in HTML5 videos on my website is not appearing, see screenshot: The video plays when started, but without any sound. The videos also play fine (with sound) in VLC and Windows Media Player.

我已经在Chrome(65.0.3325.162)，Firefox(59.0.1)和Android(在三星平板电脑上)上进行了测试.我的系统的容量可以与其他应用程序和YouTube视频配合使用.

I have tested in Chrome (65.0.3325.162), Firefox (59.0.1), and Android (on a Samsung tablet). The volume of my system is fine with other applications, and YouTube videos.

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

Here is the (minimal) code (adding additional attributes like height and poster etc. makes no difference to the problem):

<!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视频本身有关.

When I tested with a sample video on http://techslides.com/demos/sample-videos/small.mp4 the controls appeared. It seems to have something to do with the encoded mp4 video itself.

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

I have now removed the video urls. I re-encoded the videos using VLC, and they are now working correctly.

推荐答案

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

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

Why are these HTML5 video problems cropping up now after 5+ years?

TLDR: Your code routes around video content farms and their ad-click revenue by short circuiting MP4 content and eyeballs per second, this is retaliation. It's par for the course.

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

Browser developers have busted your HTML5 <video> browser embed code, either on purpose or by accident around the codecs needed to decode them. They own the source code of the browser that interprets and decodes your HTML5 MP4 file for presentation in the browser content area. Chrome developers corner the market on MP4 Videos and had their arms twisted by the powers that be. So the browser sees that the codec required to decode your MP4 is likely from an unauthorized area, and thus here we are scratching our heads as to why chrome isn't showing a volume button.

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

My requirements has to be that HTML5 Video is fixed on server side, I can't require users to fiddle around with their chrome flags or installing a plugin that corrects the bug. It has to just work by default on the latest Chrome, Safari, Firefox then IE, preferably in that order.

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

The video plays, but at zero volume. No volume button is ever presented either during initial load, nor during or after playback. The mp4 download and go-full screen buttons are presented and work correctly during playback.

是的，新媒体播放器的镶边标记已禁用:

And yes, the chrome flags for new media player are disabled:

此代码是从以下类似代码演变而来的: http://camendesign.com/code/video_for_everybody

This code was evolved from the likes of: 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>

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

The above code is the code that used to work, but got broken.

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

There are many options to clean and re-encode an MP4 video, some free others non-free. One way is open the MP4 file with VLC or other video player or software that has and open/save/reencode/convert tools in it, and save it out to a different video encoding format.

我能够用Java编写一个方便的花花公子脚本来遍历打开MP4文件的每个MP4文件，清理掉流浪汉的污点(如果存在)，然后保存并重新部署mp4文件，现在一切正常.然后按计划执行此操作.

I was able to cook up a handy dandy script in Java to iterate over every MP4 file crack open the MP4 file, clean out the hobo taint if it exists then save and redeploy the mp4 file, and now all is well. Then do this on a schedule.

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

  1. 从工具集中消除错误的HTML5 video嵌入标签.显示带有html5 <img .../>标签的图像，并在播放按钮上覆盖以表示这是视频，当用户单击时，打开一个新选项卡，在该选项卡中原始MP4视频在浏览器中播放:正确显示了音量按钮，或者最坏的情况是，用户将MP4视频下载到磁盘，然后可以使用视频播放器从磁盘将其打开.
  2. 使用其他知道正确方法的浏览器或开源浏览器.
  3. 尝试切换新媒体控件" chrome://flags，也许在将来的某个时候，Chrome开发人员将推出修复程序，并且不会因mp4闻到数字版权侵犯的证据而感到惊讶
  4. 为大型播放器内容提供商提供先锋和眼球点击收入，只需使用<a href="">whatever</a>标签将用户重定向到能够正确显示视频的网站.
  1. Eliminate the bugged HTML5 video embed tag from your tool set. Display an image with an html5 <img .../> tag, overlay a play button so as to indicate this is a video, when the user clicks either open a new tab where the raw MP4 video plays in browser: the volume button is shown correctly, or worst case the user downloads the MP4 video to disk, and they can open it up from disk with their video player.
  2. Use a different browser or an open source browser, that know how to do the right thing.
  3. Try toggling on the 'new media controls' chrome://flags, maybe at some point in the future the Chrome Devs will push a fix and it won't freak out on the evidence that the mp4 smells of digital rights violations.
  4. Yield the vanguard and eyeball click revenue to the big player content providers, just use an <a href="">whatever</a> tag to redirect users to the websites who are able to show video correctly.

比赛即将开始.

这篇关于HTML5视频标签音量控制丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆