解决在HTML5中的video标签无法播放视频的方法-H5教程-PHP中文网QQ群微信公众号还没有收藏解决在HTML5中的video标签无法播放视频的方法这篇文章主要给大家介绍了关于解决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标签无法播放视频的方法的详细内容，更多请关注php中文网其它相关文章！共3篇231点赞收藏分享：.&猜你喜欢PHP中文网：独家原创，永久免费的在线，php技术学习阵地！
All Rights Reserved | 皖B2-QQ群:关注微信公众号前端在线资源
本文地址：
此文写于7年前，前端发展已经翻了好几番，本文内容可能过时，不一定有效，仅供参考。
一、前面的唠叨
我记得就是前几个月吧，有条消息说YouTube支持了HTML5视频嵌入标签video，好吧，我听说而已，因为我不是个擅长翻墙的人，到底如何我也不得而知。
与主题不相关的HTML5方面的东西我就不多说了，对于video标签，获取大家都听说了，这个标签的功能如同现在HTML语言中的img标签，就现在，比如要链接并显示一张图片，可以这样子：
&img src="mm1.jpg" />
结果就可以显示下面这张美女图片（张含韵小妹妹）：
所以，在HTML5的时代里，基本上只要一个&video>标签加一个视频的src链接地址就可以播放视频了，对于开发人员来讲真是“酷毕了”（《神话》中经典台词）。
然而，当现实照进遐想，我们不得不去正视，现在，支持HTML5 video标签的浏览器寥寥无几。我知道chrome2以及Safari是支持的，看下面这张截自chrome 2的图：
使用的代码如下：
&video width="352" height="264" controls autobuffer>
&source src="../media/cat.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>&/source>
对于Opera浏览器，您可以参阅这篇上周才发表的文章“”
对于IE浏览器，那还不知道要等到猴年马月才等到支持HTML5 video标签的时候。然而，广大劳动人民的智慧是无穷无尽的，广大开发人员的智慧也会无穷无尽的。国外领先的web开拓者们通过js，已经实现了可以让各个主流浏览器支持video标签的方法。
二、主流浏览器支持video标签
方法很简单，只要调用一段js，就可以让主流浏览器实现video标签的视频播放。
此项目已经放到Google code上，您可以点击查看。
使用方法：
要想让主流浏览器都支持HTML5标签，使用非常简单，只要链接一个js文件就可以了。所以，只要您的页面上（头部或底部）有这么段代码：
src="/svn/trunk/src/html5media.min.js"
就可以了。
对于HTML部分，使用类似下面：
&video src="video.mp4" width="320" height="240" controls autobuffer>&/video>
是不是很简单啊！
为了演示效果，我就直接把此js以及video标签签到这篇文章里，您将会在下面看到这段10秒钟的关于猫咪的视频，您可以切换IE或是Firefox或是chrome或是Safari观看（界面有差别的哦~~）。
由于下面2个资源大大拖慢了网页的加载速度，因此，今日起博客文章不直接呈现效果，大家可以点击下面的demo链接体验。
&script src="/svn/trunk/src/html5media.min.js"&&/script&
&video src="/study/media/cat.mp4" width="352" height="264" controls autobuffer&&/video&
当加载完毕，点击播放按钮，就可以看到视频播放了。
或者您也可以狠狠地点击这里：
三、一些说明
此js文件，您可以点击下面两处下载（右键 – [目标|链接]另存为）：
2. 本站下载，但流量烧不起，已关闭
实现的原理大致是使用了flash技术，使用flash播放器嵌入视频的方式，使得IE及Firefox支持video标签。这个播放器称为flowplayer，具体我也不是很了解。
关于视频格式
目前，这种多浏览器支持方法所支持的视频格式有限，为mp4和ogv格式，否则视频可能不会播放。
可能遇到的问题
您可能会遇到这样的问题：我明明链接的是mp4格式的文件啊，为什么在IE及Firefox下有问题。如果您遇到的问题是在这两个浏览器下视频不播放，或是播放时只有声音而没有图像，而在chrome浏览器或是Safari下良好，则您可能要仔细您mp4文件的编码格式了。
对于编码，我不在行，好像是视频要存储为h.264文件，不要问我是什么东西，我也不知道，这可能还要靠您自己解决了。
最后，百无聊赖，先上一张Safari浏览器下的截图，原因是，Safari下的播放器真是卡哇伊。
本文为原创文章，转载请注明来自[]
本文地址：
（本篇完）
相关文章 (0.393) (0.376) (0.248) (0.179) (0.162) (0.150) (0.086) (0.075) (0.075) (0.075) (RANDOM - 0.012)
标签： , , , , , ,
赞助商推荐()：
想学到点真东西？
如果你有1~3年前端开发经验，不妨
想找个师兄入门前端？不妨
想成为高薪全栈工程师？
热门总排行18:45 提问
video m3u8
在ios先做视频播放
video 标签
播放的m3u8
显示页面一打开
不是直接播放 内容
需要点击视频
然后全屏播放的
有没有方法直接加载后 直接播放
&video id="video_player"
width="640" height="352" controls="controls" src=""&
Your browser does not support the video tag.
按赞数排序
SAP及mySAP商务套件HTML5 让开发人员可以更轻松地提供大量WEB体验。标签是令人兴奋的新添内容，不再需要外部音乐播放器，使音频的提供像显示图像一样简单。有了基于标准的音频控件和让用户更易于与声音进行交互的新浏览器功能，你可以轻松的在WEB页面上定制MP3播放器了。
这和浏览器版本型号都有关
需要下一些支持相关浏览器的插件。
看一下这个链接：
ios 不支持自动播放，需要用户事件。trigger的也不行。
刚看到一个solution ,说是写一个同步的ajax请求，你可以试试。
其他相关推荐
其他相似问题使用html5 video实现视频播放
在前面的《》系列文章中，我们学习了如何使用html5 canvas进行绘图。在html5中，我们不仅可以按照自己的意愿绘制图形，还可以使用html5提供的&video&标签实现视频播放、使用html5提供的&audio&标签实现音频播放。今天，我们就来初步学习如何使用html5的&video&标签实现视频播放功能。在html5出现之前，想要在浏览器中实现视频播放功能，就必须使用额外的插件或控件来实现。不过，自从html5问世以后，这样的局面有所改变。现在，我们使用html5的video标签，可以不依赖于任何第三方的插件或控件，直接在浏览器中实现视频播放功能，俗话说「知己知彼，百战百胜」。对于video标签而言，同样也是如此，只有先了解了video标签，使用起来才能得心应手。现在，我们就来看看video标签具备哪些标签属性(如果video标签具有以下属性就表示启用该属性所表示的功能，不添加对应的属性就表示禁用对应的功能)：video标签属性基本描述width设置视频播放器的宽度height设置视频播放器的高度src设置用于播放的视频的URLautoplay设置视频在加载完毕后自动开始播放。属性值为&autoplay&controls显示具备播放、暂停等功能的控件。属性值为&controls&loop视频在播放完毕后重新循环播放。属性值为&loop&preload指定视频在页面加载时进行加载，并预备播放。属性值为&preload&，如果使用 &autoplay&，则忽略该属性。在了解了video标签之后，下面我们就使用html5的video标签来实现视频播放。&!DOCTYPE html&
&meta charset=&UTF-8&&
&title&HTML5 video视频播放入门示例&/title&
&!-- 具备自动播放、显示用户控件、播放完毕后循环播放功能的video标签 --&
&video id=&myVideo& src=&Enola - I Can Make A Mess.mp4& autoplay=&autoplay& controls=&controls& loop=&loop&&
您的浏览器不支持video标签。
&/html&现在，我们打开浏览器，看一看具体的效果：使用video标签添加的视频播放器值得注意的是：html5的video标签目前只支持播放.mp4、.ogg、.webm等几种格式的视频文件，暂不支持其他格式的视频文件。此外，不同的html5浏览器支持的视频文件格式也略有不同，这种状况可能会在未来的html5中得以改善。为了更好地兼容各种浏览器，你可以为一个video标签添加多个source子标签，每个source标签引用一个不同格式的视频文件。这样，html5浏览器会自动在这些source标签中从上到下依次寻找并识别出该浏览器可以播放的第一个视频文件并进行播放，从而实现兼容多个浏览器的视频播放功能。&!DOCTYPE html&
&meta charset=&UTF-8&&
&title&HTML5 video视频播放入门示例&/title&
&!-- 具备自动播放、显示用户控件、播放完毕后循环播放功能的video标签 --&
&video id=&myVideo& autoplay=&autoplay& controls=&controls& loop=&loop&&
&!-- 提供多种格式的视频文件，以便浏览器从中播放自身支持的视频文件 --&
&source src=&北京欢迎你.mp4& &&/source&
&source src=&北京欢迎你.ogg& &&/source&
&source src=&北京欢迎你.webm& &&/source&
您的浏览器不支持video标签。
我们认为：
用户的主要目的，是为了获取有用的信息，而不是来点击广告的。因此本站将竭力做好内容，并将广告和内容进行分离，确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信：只有给用户带来价值，用户才会给我们以回报。
CodePlayer技术交流群1：
帮朋友打一个硬广告：
P2P网贷系统(Java版本) 新年低价大促销，多年P2P技术积累，系统功能完善（可按需定制，可支持第三方存管、银行存管），架构稳定灵活、性能优异、二次开发快速简单。
另可提供二次开发、安装部署、售后维护、安全培训等一条龙服务。
外行看热闹，内行看门道。可以自信地认为，在系统设计上，比市面上的晓风、迪蒙、方维、绿麻雀、国融信、金和盛等P2P系统要好。
深圳地区支持自带技术人员现场考察源代码、了解主要技术架构，货比三家，再决定是否购买。
也可推荐他人购买，一旦完全成交，推荐人可获得实际售价 10% 的返现。
有意向者，详情请
联系，工作时间立即回复。现象：插入如下代码后仍然无法看视频（注：视频已确认为浏览器支持格式）
&video controls="controls" width="500px" height="300px" preload="metadata"&
&source src="video/FF4.ogv" type="video/ogg"&
&source src="video/FF4.webm" type="video/webm"&
&source src="video/FF4.mp4" type="video/mp4"&
原因：IIS的MIME中未注册MP4、ogg、webm相关类型，导致IIS无法识别
解决方法：在IIS中注册MP4、ogg、webm类型，以下以MP4为例，ogg和webm以此类推：
1、在IIS中双击MIME类型的图标
2、右键-》添加 IIS不认识的新类型
3、添加新类型的扩展名和类型标识
注意：以上图示以 .MP4 为例，如果想让视频标签兼容更多浏览器，需要将以下类型加入到MIME中
video/webm
阅读(...) 评论() &