【译】解决HTML5 MP4(H.264)视频模糊的问题

翻译 2016年08月30日 16:23:10

MP4视频文件是所有主要的现代浏览器都认可和接受的文件格式。如果你想知道具体的支持情况,请查看 Can I Use

但是!当 HTML5视频标签Video 嵌入网页中,如果没有正确配置好你的MP4视频会得到一个模糊图像的视频。发生这种情况的原因是,这种类型的视频和其编码模式有一些具体的要求没有得到正确的处理。

学习使用以下简单的建议将帮助你满足这些需求,将为您的web页面生成你清晰的MP4视频。


建议:

1、如果可以的话,请使用标准的 4:3 或16:9 的视频大小比例请看原因

2、使用大小的倍数4:3或16:9的纵横比和16的倍数(16 x16像素正方形块级区域的编码器)

4:3比例的公式 16:9的宽高比公式
Width: 64*n / Height: 48*n Width: 256*n / Height: 144*n

* 备注:n可以是任何的自然数。


3、如果您已经有一个自定义大小视频和你想要迅速调整为一个完美的看,尝试“MP4视频大小校正器”这个页面上。

附加技巧: 在chrome 浏览器中添加 Hack css 方法

-webkit-filter: brightness(108.5%);

同时使用 .webm.mp4 的文件格式 。(.webm 要放在 .mp4 的前面).


参考文章:

原文阅读:blurry-html5-video

html5 <video>播放mp4格式视频没有图像的解决办法

本文主要介绍在html中引用video标签,没有图像的解决办法。

关于HTML5中Video标签无法播放mp4的解决办法

1、首先先排除掉代码问题、路径问题、浏览器不支持问题等。 2、首先我自己从网上下载的一个MP4文件,IE10和谷歌都能正常播放。然后自己用格式化工厂转换了一个RMVB文件为MP4,然后就...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

html5网页中用video标签无法播放MP4视频的解决方法

今天一位朋友Q我说:为什么我录制的MP4视频在本地可以播放但是使用html5的video多媒体播放标签不能正常播放只有一个进度条而不显示图像?当时我也很好奇MP4视频可以用video标签播放呀,我就经...
  • houerfei
  • houerfei
  • 2016年11月21日 20:45
  • 19041

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

解决chromium对html5 标签的 mp3 等视频音频网页的兼容性问题

webkit内核的兼容性问题,如果是真正的webkit内核代码的问题,这样的问题很少,如果存在,chrome一定也存在这类问题,这类问题一般从webkit升级的代码中解决;还有一类问题是比较常见的,就...

解决chromium对html5 标签的 mp3 等视频音频网页的兼容性问题

webkit内核的兼容性问题,如果是真正的webkit内核代码的问题,这样的问题很少,如果存在,chrome一定也存在这类问题,这类问题一般从webkit升级的代码中解决;还有一类问题是比较常见的,就...

html5 Video控件视频播放,电脑和手机上都能兼容。(mp4格式 电脑和android、ios都能播放)

playVideo({             //所有参数,elemt和src为必填其他看需求怎么要求             //elemt为播放控件要插入的容器,src为视频文件地址,pre...

屏幕录制H.264视频,AAC音频,MP4复用,LibRTMP实时直播

屏幕录制H.264视频,AAC音频,MP4复用,LibRTMP实时直播
  • avsuper
  • avsuper
  • 2014年04月26日 10:34
  • 7135

屏幕录制H.264视频,AAC音频,MP4复用,LibRTMP实时直播

本文转载自:http://lib.csdn.net/article/57/40046?knId=1544 上周完成了屏幕录制的程序,实时抓屏、录音,视频采用H.264压缩,音频采用AAC...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【译】解决HTML5 MP4(H.264)视频模糊的问题
举报原因:
原因补充:

(最多只允许输入30个字)