解决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弹性盒Flexbox布局使用实例
Apr 08 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
Dec 30 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
CSS3 @media的基本用法总结
Sep 10 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
HTML5添加禁止缩放功能
Nov 03 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
css3 实现文字闪烁效果的三种方式示例代码
Apr 25 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
Aug 23 HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 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 mkdir()定义和用法
2009/01/14 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
JS如何在数组指定位置插入元素
2020/03/10 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
Python中生成器和yield语句的用法详解
2015/04/17 Python
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
利用python汇总统计多张Excel
2020/09/22 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
计算机网络专业个人的自我评价
2013/10/17 职场文书
单位单身证明范本
2014/01/11 职场文书
麦当劳辞职信范文
2014/01/18 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
公司股东出资证明书
2014/11/01 职场文书
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL
Golang ort 中的sortInts 方法
2022/04/24 Golang