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 object-fit属性
Jul 27 HTML / CSS
CSS3五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
May 06 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
Aug 28 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 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下统计用户在线时间的一种尝试
2010/08/26 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
js表单验证实例讲解
2016/03/31 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
python实现通过shelve修改对象实例
2014/09/26 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
详解python中list的使用
2019/03/15 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
python中数字是否为可变类型
2020/07/08 Python
Python reques接口测试框架实现代码
2020/07/28 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
小学红领巾中秋节广播稿
2014/01/13 职场文书
《只有一个地球》教学反思
2014/02/14 职场文书
三方协议书范本
2014/04/22 职场文书
建议书的格式
2014/05/12 职场文书
留守儿童工作方案
2014/06/02 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
试用期辞职信范文
2015/03/02 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书