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 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
Html5 语法与规则简要概述
Jul 29 HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
处理textarea中的换行和空格
Dec 12 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动态创建Web站点的方法
2011/08/14 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
PHP解决中文乱码
2017/04/28 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
Django基础之Model操作步骤(介绍)
2017/05/27 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
python 自定义对象的打印方法
2019/01/12 Python
python字符串反转的四种方法详解
2019/12/02 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
python自动生成证件号的方法示例
2021/01/14 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
迟到检讨书大全
2014/01/25 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
合作意向协议书
2015/01/29 职场文书
初中班干部工作总结
2015/08/10 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
Nginx 匹配方式
2022/05/15 Servers