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中文字镂空、透明值、阴影效果设置示例小结
Mar 07 HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
May 09 HTML / CSS
CSS3中Transition动画属性用法详解
Jul 04 HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 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录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
php的curl实现get和post的代码
2008/08/23 PHP
php生成微信红包数组的方法
2019/09/05 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
vue超时计算的组件实例代码
2018/07/09 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
js里面的变量范围分享
2020/07/18 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
python实现一次创建多级目录的方法
2015/05/15 Python
Python实现队列的方法
2015/05/26 Python
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
会计专业自我鉴定范文
2013/12/29 职场文书
幼儿园老师辞职信
2014/01/20 职场文书
婚前协议书范本
2014/04/15 职场文书
校园演讲稿汇总
2014/05/21 职场文书
倡议书范文大全
2015/04/28 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
Redis命令处理过程源码解析
2022/02/12 Redis
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技