HTML5的Video标签有部分MP4无法播放的问题解析(多图)


Posted in HTML / CSS onAugust 18, 2017

现在网页视频的应用极为广泛,在实际项目中发现有些MP4文件可以在H5网页中正常播放,但有些却不行,这是为什么呢?

1、首先我自己从网上下载的一个MP4文件,IE10和谷歌都能正常播放。然后自己用格式化工厂转换了一个RMVB文件为MP4,然后就不能播放。

如下图,我选择MP4格式转换,里面的配置文件也调了很多遍,但是就是播放不了,IE10完全没反应,谷歌倒是能出声音,但是影像出不来。

HTML5的Video标签有部分MP4无法播放的问题解析(多图)

2、我直接在文件右击属性里面看文件属性-详细信息,基本都一样。

3、我用potplayer播放两个不同的文件,用potplayer查看2个文件的属性,发现了不一样的地方,

网上下载的能正常使用video标签播放的视频属性如下图

HTML5的Video标签有部分MP4无法播放的问题解析(多图)

我们可以看到视频编码是AVC

而我自己用格式化工厂转码的视频编码如下

HTML5的Video标签有部分MP4无法播放的问题解析(多图)

发现我自己转码的视频编码是mp4v。

4、在格式化工厂里面找到AVC编码的格式,如下图

HTML5的Video标签有部分MP4无法播放的问题解析(多图)

5、选用AVC格式的编码,重新转码后,使用video标签播放就可以正常播放了。

归根结底,还是视频编码格式的问题,并不是网页程序的问题。

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持!

HTML / CSS 相关文章推荐
css3绘制天猫logo实现代码
Nov 06 HTML / CSS
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
浅谈html5 响应式布局
Dec 24 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 HTML / CSS
css height属性中的calc方法详解
Jun 03 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
小程序实现悬浮按钮的全过程记录
Oct 16 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 #HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 #HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
Aug 17 #HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 #HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 #HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 #HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 #HTML / CSS
You might like
PHP之数组学习
2011/05/29 PHP
php仿QQ验证码的实例分析
2013/07/01 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
php上传文件常见问题总结
2015/02/03 PHP
php实现文件上传基本验证
2020/03/04 PHP
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
员工保密协议书
2014/09/27 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
追悼会答谢词
2015/01/05 职场文书
财务部岗位职责范本
2015/04/14 职场文书
业务员管理制度范本
2015/08/06 职场文书
教你一步步实现一个简易promise
2021/11/02 Javascript
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers