解决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实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
详解HTML5中的元素与元素
Aug 17 HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
Dec 20 HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 HTML / CSS
详解CSS玩转图片Base64编码
May 25 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
CSS的calc函数用法小结
Jun 25 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命令行使用方法和命令行参数说明
2014/04/08 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
Python中实现三目运算的方法
2015/06/21 Python
python简单实现获取当前时间
2016/08/27 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
Python使用贪婪算法解决问题
2019/10/22 Python
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
提高EJB性能都有哪些技巧
2012/03/25 面试题
小学新学期寄语
2014/04/02 职场文书
小学安全工作总结2015
2015/05/18 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
九年级化学教学反思
2016/02/22 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
python 制作一个gui界面的翻译工具
2021/05/14 Python