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教程(1):什么是CSS3
Apr 02 HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 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中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
php获取linux命令结果的实例
2017/03/13 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
浅谈angularJS 作用域
2015/07/05 Javascript
js表单验证实例讲解
2016/03/31 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
2016/05/17 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
介绍Python的@property装饰器的用法
2015/04/28 Python
Python常用的json标准库
2019/02/19 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
党课培训主持词
2014/04/01 职场文书
财产公证书格式
2014/04/10 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
重阳节活动总结
2014/08/27 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
家长意见书
2015/06/04 职场文书
怒海潜将观后感
2015/06/11 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js