解决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 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
纯CSS3实现表单验证效果(非常不错)
Jan 18 HTML / CSS
让IE可以变相支持CSS3选择器
Jan 21 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
html Table 表头固定的实现
Jan 22 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
css3 实现文字闪烁效果的三种方式示例代码
Apr 25 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 07 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将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
给Function做的OOP扩展
2009/05/07 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
浅析vue中的nextTick
2020/12/28 Vue.js
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
Python中装饰器高级用法详解
2017/12/25 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
营业经理岗位职责
2013/11/10 职场文书
继承权公证书
2014/04/09 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
三八节祝酒词
2015/08/11 职场文书