解决html5中video标签无法播放mp4问题的办法
发布时间：2017-05-07 16:28:01 作者：佚名 
我要评论
我要评论这篇文章主要给大家介绍了关于解决html5中video标签无法播放mp4问题的办法，文中介绍的非常详细，相信会对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
前言
最近发现了一个问题，在手机录制了一个1.mp4文件，主流浏览器都能正常播放。但使用格式工厂将rmvb文件转码为2.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>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
- 这篇文章主要介绍了详解Html5中video标签那些属性和方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2019-07-01
这篇文章主要介绍了HTML页面原生VIDEO标签隐藏下载按钮功能，非常不错，具有参考借鉴价值，需要的朋友参考下吧2018-05-04HTML5的Video标签有部分MP4无法播放的问题解析（多图）
这篇文章主要介绍了HTML5的Video标签有部分MP4无法播放的问题。通过代码展示了设置的过程，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。2017-08-18- 使用HTML5时就应该考虑包括桌面以及移动端的浏览器兼容问题,特别是视频方面浏览器对解码的支持会有所不同,所以下面就来分享一个HTML5的video标签的浏览器兼容性增强方案分2016-05-19
HTML5 video标签（播放器）学习笔记（二）:播放控制
这篇文章主要介绍了HTML5 video标签（播放器）学习笔记（二）:播放控制,本文讲解了获取影片总时长、播放、暂停、获取影片的播放时间和设置播放点、音量的获取和设置等内容,2015-04-24HTML5 video标签（播放器）学习笔记（一）:使用入门
这篇文章主要介绍了HTML5 video标签（播放器）学习笔记（一）:使用入门,本文讲解了使用标签、比如播放视频的路径、是否显示控制条、让视频自动播放或自动加载、让播放器规2015-04-24- 这篇文章主要介绍了HTML5 Video标签的属性、方法和事件汇总介绍,本文讲解了2015-04-24
- HTML video 适用于HTML 5+，用于定义在线观看的视频流媒体，这里简单介绍下， 方便需要的朋友2014-02-03
- html5 video标签本身有下载功能但是在video区域内，点击右键可以将“视频另存为”下面是屏蔽右键视频另存为的js代码，有此需求的朋友不要错过2013-11-12
html5视频媒体标签video的使用方法及完整参数说明详解
这篇文章主要介绍了html5视频媒体标签video的使用方法及完整参数说明详解,需要的朋友可以参考下2019-09-27
最新评论