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制作半透明边框(Facebox)类似渐变
Dec 09 HTML / CSS
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 HTML / CSS
使用css3实现超炫的loading加载动画效果
May 07 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
CSS3实现可关闭的下拉手风琴菜单效果
Aug 31 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 HTML / CSS
几个CSS3的flex弹性盒模型布局的简单例子演示
May 12 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
Feb 01 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 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下实现农历日历的代码
2007/03/07 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
两个DIV等高的JS的实现代码
2007/12/23 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
使用npm安装最新版本nodejs
2018/01/18 NodeJs
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
Python中如何引入第三方模块
2020/05/27 Python
Android笔试题总结
2014/11/29 面试题
家长评语大全
2014/01/22 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android