解决html5中video标签无法播放mp4问题的办法


Posted in HTML / CSS onMay 07, 2017

前言

最近发现了一个问题,在手机录制了一个1.mp4文件,主流浏览器都能正常播放。但使用格式工厂将rmvb文件转码为2.mp4却不能播放。通过查找相关的资料终于解决了,下面分享出来供大家参考学习,下面来看看详细的介绍:

问题分析

手机录制的视频属性:

解决html5中video标签无法播放mp4问题的办法
 

格式化工厂转码的视频属性:

解决html5中video标签无法播放mp4问题的办法
 

首先排除代码问题,路径问题,浏览器不支持等问题。转码后的视频编码是mp4v,这是不能播放的原因,转换为AVC(H264)编码即可。

查阅文档,关于video标签所支持的视频格式和编码:

  • MPEG4 = 带有H.264视频编码和AAC音频编码的MPEG4文件
  • WebM = 带有VP8视频编码和Vorbis音频编码的 WebM文件
  • Ogg = 带有Theora视频编码和Vorbis音频编码的Ogg文件
     

通过上面的信息我们发现只有h264编码的MP4视频(MPEG-LA公司)、VP8编码的webm格式的视频(Google公司)和Theora编码的ogg格式的视频(iTouch开发)可以支持html5的<video>标签。

解决方法

video标签允许多个source元素,source元素可以链接不同的视频文件,浏览器将使用第一个可识别的格式,这样可用来解决浏览器兼容问题。

<video controls="controls" width="100%">
  <source src="1.mp4" type="video/mp4">
  <source src="1.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

HTML / CSS 相关文章推荐
彻底弄明白CSS3的Media Queries(跨平台设计)
Jul 27 HTML / CSS
CSS3转换功能transform主要属性值分析及实现分享
May 06 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
Sep 25 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
HTML5 body设置自适应全屏
May 07 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 HTML / CSS
基于CSS制作创意端午节专属加载特效
Jun 01 HTML / CSS
Web前端页面跳转并取到值
Apr 24 #HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
Apr 24 #HTML / CSS
Html5新增标签有哪些
Apr 13 #HTML / CSS
完美解决IE8下不兼容rgba()的问题
Mar 31 #HTML / CSS
使用phonegap克隆和删除联系人的实现方法
Mar 31 #HTML / CSS
使用phonegap查找联系人的实现方法
Mar 31 #HTML / CSS
使用phonegap获取设备的一些信息方法
Mar 31 #HTML / CSS
You might like
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
node文件批量重命名的方法示例
2017/10/23 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
spyder常用快捷键(分享)
2017/07/19 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
python3.x实现发送邮件功能
2018/05/22 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
python实现随机加减法生成器
2020/02/24 Python
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
我的五年职业生涯规划
2014/01/23 职场文书
九年级政治教学反思
2014/02/06 职场文书
2014年采购员工作总结
2014/11/18 职场文书
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL