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 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
CSS伪类与CSS伪元素的区别及由来具体说明
Dec 07 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
Web时代变迁及html5与html4的区别
Jan 06 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
Apr 22 HTML / CSS
HTML中的表格元素介绍
Feb 28 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遍历文件夹与子目录的函数代码
2011/09/26 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
python连接oracle数据库实例
2014/10/17 Python
用C++封装MySQL的API的教程
2015/05/06 Python
python计算圆周率pi的方法
2015/07/11 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
2014新生大学四年计划书
2014/09/21 职场文书
springBoot基于webSocket实现扫码登录
2021/06/22 Java/Android
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript