&video&标签，如何在iphone手机上运行
[问题点数：30分]
本版专家分：0
CSDN今日推荐
本版专家分：0
本版专家分：21152
2015年8月优秀小版主2015年5月优秀小版主2015年4月html5优秀版主
2015年7月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！|
其他相关推荐混一口饭吃而已，无他。
html5 video播放调研
来源：http://materliu.github.io/all/web/mobile//%E5%9F%BA%E4%BA%8Eweb%E7%BD%91%E9%A1%B5%E8%A7%86%E9%A2%91%E6%92%AD%E6%94%BE%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98.html
什么情况下可以使用HTML5播放？ 要支持HTML5播放，浏览器必须同时满足两个条件：浏览器能解析HTML5标准的Video标签。浏览器能对H.264编码的视频做解码。我们再来细细的说一说这个问题，我们先来解释下什么是HTML5。HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML（标准通用标记语言下的一个应用）标准版本；现在仍处于发展阶段，但大部分浏览器已经支持某些 HTML5 技术。HTML5播放视频，使用的是HTML5标准里的 video 标签，基本用法查看这里，更高级的接口定义请参阅W3C规范文档。 由于Video是HTML5规范里新增的标签，那么一定要浏览器能解析Video标签，否则肯定无法使用HTML5。
那么单单能解析HTML5的Video标签是否就能这个正常播放呢？视频是经过编码的，编码格式是H.264视频格式。所谓编码，其实就是一种压缩算法，要压缩，那么一定要解压缩，视频格式的解压缩就是解码，如果浏览器本身无法对视频文件进行解码，那么同样播放不出来。
所以综上，视频播放必须要满足上述两个条件，缺一不可。
为什么有些安卓手机无法播放视频？ 首先，要解答这个问题，请先看问题1。看过问题1，我们知道安卓播放跟厂商支持情况有关，其实前端JS这边对VIDEO标签的解析和H264的解码做不了什么实质的事情，我们只能尽量使用html5的API接口找到hack各种设备的方案，但关键还是看厂商支持情况，所以要在前端实现适配难度很大。
安卓由于严重的系统碎片化问题，导致不同的厂商、不同的浏览器对上述两种条件的支持各不相同，所以安卓没法简单的说到底是否支持HTML5播放，甚至同一个厂商的不同机型，其特点都不一样，我们遇到过单独支持flash的，单独支持html5的，或者二者都支持的，甚至还有都不支持的，另外还有明明实际上能使用HTML5播放但API又返回说不支持播放的。对此我们针对不同的Android设备和浏览器做了些矫正和强制判断，许多问题需要Case
by Case去解决。
对于HTML5和flash都不支持的安卓，我们怎么办？ 问题1里我们说过，安卓设备上我们遇到过单独支持flash的，单独支持html5的，或者二者都支持的。但基于web的视频播放无非就这两种功能方案，如果都不支持怎么办？其实还有个方案，就是MP4链接的形式，我们称之为MP4Link?，如下图：
这个看起来像个播放器，其实我们只是在播放区域放了一张长得像播放器的静态图片，在图片上我们设置了链接，指向到视频MP4文件，用户点击”播放按钮“（实际点击的是图片链接），触发浏览器本身的特性，会自动打开MP4文件，这个时候有些浏览器会自动调用设备默认的视频播放器，或者会问用户，当前是要下载还是要播放。
这个图片的真实DOM结构是：
我们已知的一些播放问题设备和浏览器
小米1 & 小米2（MIUI V5系统）
系统自带的浏览器API返回不支持H.264，但实际上点击可以进入全屏，MIUI自己拉起系统播放器播放视频
矫正为使用HTML5
三星系列，主要是Note2，S3等
系统自带的浏览器API返回不支持H.264，但实际上可以播放
矫正为使用HTML5
QQ手机浏览器
点击播放以后强制使用浏览器自带的皮肤，无法使用
QQ浏览器的皮肤外观和体验都还不错，可以接受该体验
微信4.\*版本运行在安卓4.0+的系统
播放无法全屏，点击全屏没反应
建议升级到微信5.0+，微信自身未针对安卓4.0做播放适配，未实现安卓4.0要求的全屏API
微信5.0+版本运行在MIUI系统
概率性出现点击无法播放，点击全屏按钮以后即可播放
前端逻辑做了hack处理，针对微信for安卓，点击视频以后自动全屏播放（体验有点仿iPhone）
腾讯微博 Android版
安卓4.0+概率性出现视频可以播放，但不显示画面，安卓2.3.\*无法拉起flash，同时也不支持HTML5
正在跟微博跟进中
微信4.\*版本在安卓4.0+系统
播放视频点全屏按钮无效
安卓4.0开始全屏功能需要APP响应安卓的系统接口才有效，而微信4.\*版本并未实现该接口，微信在5.0才开始支持，可以使用伪全屏解决，详见问题9
微信5.0版本在搭载MIUIV5的小米1手机上
全屏以后会花屏
微信内部逻辑处理问题，可以使用伪全屏解决，详见问题9
统一播放器是如何选择当前设备应该用什么内核的播放器呢？ 统一播放器在移动设备的判断流程如下图： ios设备除Mac系统以外都在html5 PC设备，含Mac系统都走flash Android设备低于4.0都走flash Android4.0以上系统会做些矫正，QQ手机浏览器3.×版本和Firefox浏览器使用MP4链接。微信4.2以上版本、MIUI原生浏览器实际是支持HTML5但JS
API返回不支持，这里做了矫正强制使用HTML5。其他浏览器根据canPlayType接口判断是否支持H.264解码，支持则使用HTML5，否则使用Flash.
移动设备能在网页里播放直播吗？ ios的HTML5直播是使用HLS技术，该技术只有ios系统才支持，所以用chrome、safari修改userAgent模拟是看不到效果的，可能会黑屏。 安卓手机基本不支持HLS，则只能使用flash播放直播，如果您使用的安卓设备不支持flash（能安装flash跟支持flash是两回事），则无法播放直播节目。
那么对于安卓这个问题该怎么解决？好消息是，安卓的手机QQ浏览器4.2版本开始原生支持HLS，使用手机QQ浏览器就能播放直播，遇到这个问题，我们建议是引导用户使用手机QQ浏览器。那么如果你是自己App里内嵌WebView?，希望支持直播，那么要么搞定flash，要么搞定HLS，或者直接找wwjs要腾讯视频适合安卓的SDK开发包。
移动设备播放能做到自动播放吗？ 由于移动设备系统的限制，在打开一个网页以后，必须要用户手动物理点击一次才能自动播放，而且在点击一次以后，再播放其他视频，就可以做到自动播放不需要再点击了。那有没有办法突破呢？经过我们测试，部分iPhone设备，可以先调用video.pause()，然后再调用video.play()接口可以实现自动播放，但仅仅是部分设备有效，而且是同样的机型、同样的系统版本、同样的设置，有些机器可以有些无效，初步估计可能跟越狱有关，但还不完全确认。
安卓设备上目前还没发现可以自动播放的情况。
如果你不是在普通浏览器上使用统一播放器，而是自己的webview，那么其实可以在调用webview的时候设置几个属性，就可以打开视频的自动播放功能：
uiWebView.allowsInlineMediaPlayback = YES;
uiWebView.mediaPlaybackRequiresUserAction = NO;
微信是已经实现了自动播放接口，但需要根据域名申请权限，默认是禁止的，申请权限请联系微信的同学。
移动设备能通过接口调整音量吗？ 这个系统限制了，不能通过接口去修改音量，移动设备其实用户很方便的使用手机侧面调整音量大小。 为此，apple对限制接口做过解释：https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
系统全屏和伪全屏的区别和使用场景 首先，先明确下系统全屏和伪全屏的区别。
在点击视频全屏的时候，调用浏览器遵循HTML5的全屏API，将播放器占满整个屏幕
点击全屏时，通过页面的DOM元素和样式修改播放器的尺寸，让播放器撑大到当前页面的100%宽度或者高度
控制栏和播放界面使用浏览器或者系统的样式，前端不可修改，也不能增加或删减元素，无法控制其表现
视频文件播放解析是浏览器或系统，控制栏和播放界面使用自己通过CSS设计的样式，可以新增或删减元素，能看到浏览器的标题栏和底部的控制栏
为什么有伪全屏的场景？有以下几个原因： 1. 系统全屏无法满足需求，比如需要在全屏的时候展示视频标题、App下载按钮、清晰度切换等 2. 规避系统全屏的bug，我们已知有如下几个场景：
微信4.\*版本在安卓4.0+系统
播放视频点全屏按钮无效
安卓4.0开始全屏功能需要APP响应安卓的系统接口才有效，而微信4.\*版本并未实现该接口，微信在5.0才开始支持
微信5.0版本在搭载MIUIV5的小米1手机上
全屏以后会花屏
微信内部逻辑处理问题
可能还有我们未知的全屏问题，所以为了规避系统全屏的bug，我们可以伪全屏的形式实现。
那么是不是任何场景或者设备都能实现伪全屏呢？
设备或系统
是否可使用伪全屏
安卓2.3.\*
√ 默认使用flash播放，由flash player负责全屏逻辑，目前未发现不能全屏的情况
√ 可以使用伪全屏
√ 可以使用伪全屏
iPhone、iPod Touch
× 由于系统限制，播放视频自动进入系统全屏，所以无法使用伪全屏
网页要使用伪全屏要做什么工作？ 伪全屏，本质是用CSS修改播放器的width、height、left、top、zindex、position等样式参数，那么自然可能会影响网页其他元素的展现，也会受到网页元素的影响，例如会被网页里更高层级的div遮挡，收到body或者父容器的margin padding等影响。播放器本身的逻辑只能放大播放器，对于页面元素是否要做些调整（比如将遮挡播放器的元素暂时隐藏）就需要页面响应播放器的onfullscreen事件来写一些页面逻辑的代码做配合了。
iPhone、iPod全屏播放样式能修改吗？ iPhone、iPad播放视频是使用的系统全屏，见问题9的详细说明，系统全屏是系统接管，是调用的系统播放器实现的播放，所以前端不能修改其样式和表现。
web无插件解码播放H264/H265(js解码HTML5播放)
h5+vue video使用
Video JS视频播放插件
没有更多推荐了，阅读 25115
& & 上一篇介绍了html5标签video（播放器）初始化需要做的一些工作，如何简单快速使用html5的播放器，本文将重点介绍如何用JS来操作video标签，也就是如何对video做一些简单基本的操作，包括了播放器的播放、暂停，音量的读取、设置等写相关操作，从而开始播放器的扩展之路。
& & 本文的目录：& &&
& & 第一、获取影片总时长
& &&对播放器（video）操作，首先要得到的是影片的一些信息，其中一个就是总时长，除了内容以为，总时长也是第一时间要显示的。在对video进行操作的的前先给video标签添加一个ID，这样方便我们获取video元素
&video id="myVideo" controls preload="auto" width=300 height="165"
poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/5242020.jpg"
src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4"&
& & 设置一个ID后，那么就可以开始操作了，要获取总时长，要用到video的一个事件-loadedmetadata，这个事件的触发表示元数据（媒体的一些基本信息）已经加载完成，用addEventListener监听事件
var myVideo = document.getElementById('myVideo');//获取video元素
myVideo.addEventListener("loadedmetadata", function(){
&&&&//要执行的代码
&& & 好了，已经监听了，那么接下来要做的就是获取总时长，其实就是一个属性-duration
var myVideo = document.getElementById('myVideo')//获取video元素
myVideo.addEventListener("loadedmetadata", function(){
&&&&tol = myVideo.//获取总时长
& & 需要注意的是获取到的在总时长的单位为秒，显示的时候根据需要去转换。& &&
&&&&第二、播放、暂停
& & 对播放器来说最基本的一个功能就是播放和暂停了，而在获取总时长后，接着的操作也就是播放和暂停。这个时候用到了video的两个方法就是play和pause
var myVideo = document.getElementById('myVideo')//获取video元素
myVideo.addEventListener("loadedmetadata", function(){
tol = myVideo.//获取总时长
function play(){
myVideo.play();
function pause(){
myVideo.pause();
& & 需要注意的是，当播放结束后再运行play方法将会从头播放。
& & 第三、获取影片的播放时间和设置播放点
& &&播放器能播放和暂停后，那么接下来需要看到的就是影片播放了多久，播放到哪个时间点了。这个操作跟获取总时长很相似，都是需要监听一个事件和获取一个属性的值，那么用到的是video的timeupdate事件和currentTime属性
//播放时间点更新时
myVideo.addEventListener("timeupdate", function(){
&&&&var currentTime = myVideo.currentT//获取当前播放时间
&&&&console.log(currentTime);//在调试器中打印
& & 运行后会在控制台看到很多数据...
& & 我们经常会接到一个要求，那就是上次看到了10分钟了，这次看要从第十分钟开始看，那么这个时候就需要设置播放点了，设置播放点用得还是currentTime属性，currentTime属性是可读写的，要注意的是设置值的单位是秒，如果播放点不是秒为单位那就要进行转换&
//设置播放点
function playBySeconds(num){
&&&&myVideo.currentTime =
& & 第四、音量的获取和设置
& & 播放器播放的过程中能暂停、播放，知道现在播放到哪里了和可以从某个时间点开始播放，那么接下来操作的就是音量了。这一点跟第三相似，获取音量可以直接用volume属性就可以了，但是在这里还要介绍的是音量改变的触发事件，方面以后需要自定义UI使用，那就是volumechange事件
//音量改变时
myVideo.addEventListener("volumechange", function(){
&&&&var volume = myVideo.//获取当前音量
&&&&console.log(volume);//在调试器中打印
& & 当你通过控制条来改变音量时，你会看到调试里面有很多数据。要注意的是音量的范围值为0~1，一般在UI中都是用百分比，所以需要的时候要进行转换。
& & 音量是可以通过改变属性来设置的，跟播放的时间点是相似的，只不过音量设置的是volume属性
//设置音量
function setVol(num){
&&&&myVideo.volume =
& & 下面是完整的代码：
&!DOCTYPE html&
&&&&&title&Video step2&/title&
&&&&&meta http-equiv="Content-Type" content="text/ charset=UTF-8"/&
&&&&&video id="myVideo" controls preload="auto" width=300 height="165"
&&&&poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/5242020.jpg"
&&&&src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4"&
&&&&&/video&
var myVideo = document.getElementById('myVideo')//获取video元素
&&&&,tol = 0 //总时长
myVideo.addEventListener("loadedmetadata", function(){
&&&&tol = myVideo.//获取总时长
function play(){
&&&&myVideo.play();
function pause(){
&&&&myVideo.pause();
//播放时间点更新时
myVideo.addEventListener("timeupdate", function(){
&&&&var currentTime = myVideo.currentT//获取当前播放时间
&&&&console.log(currentTime);//在调试器中打印
//设置播放点
function playBySeconds(num){
&&&&myVideo.currentTime =
//音量改变时
myVideo.addEventListener("volumechange", function(){
&&&&var volume = myVideo.//获取当前音量
&&&&console.log(volume);//在调试器中打印
//设置音量
function setVol(num){
&&&&myVideo.volume =
& & 总结：通过这四个步骤来了解html5标签video（播放器）的基本操作，而这些操作主要是通过JS来监听video的事件和对video属性的读写来完成的，熟悉这四点即可灵活的在使用播放器，再根据应用场景来调整即可。
& 著作权归作者所有
人打赏支持
码字总数 35388
前端工程师
HTML5的Video标签可以说算是HTML5的重头戏，各大浏览器都纷纷响应，现代浏览器都能支持Video标签，基于Video标签的播放器也越来越多，但问题是每个浏览器所支持的视频格式不同，想在各大浏览...
记笔记，免忘记！最近用到了视频插件zyMedia。这个插件的简介地址：https://github.com/ireaderlab/zyMedia 问题一： 首先视频的上方显示的标题，实例是这样写的data-config='{"mediaTitle":...
HTML5和CSS3不仅仅是两项新的Web技术标准 HTML5和CSS3不仅仅是两项新的Web技术标准，更代表了下一代HTML和CSS技术。虽然HTML5的标准规范还没有正式发布，但是未来的发展前景已经可以预见，那...
课工场CC老师
也许有时你需要在网站上播放一些音频和视频文件，也许你正在建立一个在线社区需要有分享和播放音乐和视频的功能。下面介绍的这些免费jQuery插件也许有你需要的。 1. Acorn Media Player Acor...
尽管 HTML5 规范在 2014 年之前不会有正式版本，很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门，原生支持了以前只可能使用 ...
Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日) 本周Windows 8开发学习资源更新 本周Silverlight学习资源更新 本周Windows Phone开发学习资源更新 本周WPF学习资源推荐 本周...
最近有在学习html5中video标签（播放器）的使用，这里做一些学习笔记，方便自己查阅和记录，本文是第一篇，将介绍的是使用该标签初始化该做的哪些工作。 网上的教程其实也不少了 w3cschool里...
大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公众号：Web前端之巅 博客园：http://www.cnblogs.com/lvonve/ CSDN...
大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公众号：Web前端之巅 博客园：http://www.cnblogs.com/lvonve/ CSDN...
iPhone、iPad 如何播放网页调用优酷视频? 5 条评论 分享 按投票排序按时间排序 6 个回答 赞同4反对，不会显示你的姓名 寒塘渡月，借我一生 与梦私奔 http://sometime.me 陶铖、知乎用户、范红...
嘻哈开发者
没有更多内容
加载失败，请刷新页面
1、table表格合并 tables.dtGridColumns = [
{id: 'schoolName', title: '学校', type: 'string', columnClass: 'text-center', fastQuery:true, fastQueryType:'eq',rowsp......
按照原有层级结构拷贝文件 import jsonimport osimport shutil# 将src下指定类型的文件按照原有层级结构，拷贝到to目录下def copy_files(src, to, file_types):
file_path...
1、简介 Laravel Excel 在 Laravel 5 中集成 PHPOffice 套件中的 PHPExcel ，从而方便我们以优雅的、富有表现力的代码实现Excel/CSV文件的导入和 导出 。 该项目的GitHub地址是： https://gi...
杭州白小白
1、Kafka 安装 官网下载 kafka_2.11-1.1.1.tgz，解压后，修改kafka的配置文件：config/server.properties broker.id=0 # 在集群内必须唯一 advertised.host.name=192.168.10.100 # 配置对外I...
云中游的鱼
缓存方案 1 概述 1.1 缓存什么？ 1.2 怎么缓存 1.3 怎么用缓存 2 缓存策略 2.1 概述 2.2 分级缓存 2.3 分层缓存 3 缓存治理 4 缓存使用 5 缓存误区 #参考文献 缓存什么 缓存读写分离 缓存策略...
我们在js的学习中，往往很多东西看过之后，一段时间不用，就忘记了。或者当时就没有深入的理解，能促使我们不断深入学习的动力最好的办法往往参加些面试，能找到自己的不足也能加深之前学的知...
MNIST数据集输出手写数字识别准确率 大纲 5.1 MNIST数据集 5.2 模块化搭建神经网络 5.3 手写数字识别准确率输出 目标 利用MNIST数据集巩固模块化搭建神经网路的八股，实践前向传播和反向传播...
当前只有Win的版本，Mac自行百度（笑） 很多人用git命令行不熟练，那么可以尝试使用sourcetree进行操作。 然鹅~~sourcetree又一个比较严肃的问题就是，很多人不会跳过注册或者操作注册。 废话...
概述 不知道为什么公司的测试服务器上执行df -h命令直接卡死,然后百度找到了问题的解决方式 解决方式 首先就是使用strace去追踪到底在哪里卡住了 strace df -h 如果没有这个命令那么去安装一...
bboysoulcn
近日，一篇《疫苗之王》刷爆了朋友圈，疫苗的安全问题被推到了风口浪尖，腾讯安全反诈骗实验室团队推出了“腾讯安心计划”小程序，方便用户便捷地查询疫苗安全信息。 这样一个暖心的小程序是...
没有更多内容
加载失败，请刷新页面
文章删除后无法恢复，确定取消删除此文章吗？
亲，自荐的博客将通过私信方式通知管理员，优秀的博客文章审核通过后将在博客推荐列表中显示
确定推荐此文章吗？
确定推荐此博主吗？
聚合全网技术文章，根据你的阅读喜好进行个性推荐
指定官方社区
深圳市奥思网络科技有限公司版权所有网站运营 网站推广 网站管理 网站修复 网站搬家 网站经验
html5网页中用video标签无法播放MP4视频的解决方法
今天一位朋友Q我说：为什么我录制的MP4视频在本地可以播放但是使用html5的video多媒体播放标签不能正常播放只有一个进度条而不显示图像？当时我也很好奇MP4视频可以用video标签播放呀，我就经常用，毕竟是好朋友我还是亲自去筛查了一下问题，这不结论处来了，其实就是一个视频编码的问题，格式虽然都是MP4但是html中只支持H.264的编码格式，无奈只能重新转换一下编码了。
为了避免大家遇到同样的问题我在这里就给大家普及一下html5关于&video&标签的知识吧：
在使用html4协议做网站时我们想要在网页上播放一个视频要不使用flash去播放，要么就是嵌入式页面来实现，对于html5来说这两种方法非常的不方便因为一个牛逼哄哄的&video&出现了，这个标签的功能就是让多媒体文件可以很方便的在网页中播放。
html中播放一个视频只需要一个标签：
&video src="http://sp.ntaotu.com/localhost-wordpress-phpstudy.mp4" controls="controls" width="500" height="300"&&/video&
代码虽然少了很多，但是功能却很健全，这就是html5的亮点之一吧！
关于&video&标签所支持的视频格式和编码：
MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器
通过上面的信息我们会发现只有h264编码的MP4视频（MPEG-LA公司）、VP8编码的webm格式的视频（Google公司）和Theora编码的ogg格式的视频（iTouch开发）可以支持html5的&video&标签。
如果浏览器不支持video标签怎么办？
比如IE浏览器还有老版本的浏览器对html5的支持不太好，当用户用这些浏览器打开我们带有视频的网页怎么办呢？
我们可以把代码这样写：
&video src="http://sp.ntaotu.com/localhost-wordpress-phpstudy.mp4" controls="controls" width="500" height="300"&您的浏览器不支持播放该视频！&/video&
这样在不支持html5的浏览器中就会提示“您的浏览器不支持播放该视频！”啦！
关于video标签的扩展参数说明：
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式，这样我们只要多准备几个不同格式的视频就可以了。
&video width="500" height="250" controls="controls"&
&source src="movie.ogg" type="video/ogg"&
&source src="movie.mp4" type="video/mp4"&
您的浏览器不支持此种视频格式。
autoplay :出现该属性意味着视频在就绪后将自动播放，用法：autoplay="autoplay"
controls :出现该属性意味着向用户显示控件，如播放按钮等，用法：controls="controls"
height:设置高度
width:设置宽度
loop:自动重播，用法：loop="loop"
preload:视频在页面加载时进行加载并预备播放，用法：preload="auto" - 当页面加载后载入整个视频；preload="meta" - 当页面加载后只载入元数据；preload="none" - 当页面加载后不载入视频。注意：若使用了autoplay，则忽略preload
src:要播放视频的url
关于&video&标签我就介绍到这里，相信大家都对这个标签有了深刻的了解！
友情支持：
HTML5中的video标签（无法显示画面）
关于HTML5中Video标签无法播放mp4的解决办法
html5-video视频标签播放视频实现过程中遇到的一系列问题。
html5 video标签不能播放mp4的问题
微信端iphone 使用video标签播放不了视频
HTML5 Video标签播放MP4失败的问题
关于HTML5中video标签在webstorm中使用绝对路径不能播放视频的解析
HTML5里video标签支持哪些格式的视频文件？
video标签支持的视频格式
浅谈html5 video标签嵌入视频
没有更多推荐了，浅谈html5 video标签嵌入视频
前面谈到了网页怎么嵌入flash视频，就想到了另一个问题，flash格式视频在手机上播放，需要手机安装flash播放插件，而且flash视频绝对无法在苹果手机上播放，因为苹果对flash的不支持，导致现在flash前景堪忧。当然目前已经有些插件可以支持苹果手机播放flash视频。
这里就要谈一谈html5的video标签了。html5功能的强大是毋庸置疑的，而且作为一款为苹果量身定做的前端技术，现在html5对各浏览器的支持也越来越好，在手机端的支持也是让我觉得没有什么可以相比的。
在html5中嵌入视频非常简单，仅仅只需要如下代码就可以实现了：
&video id="media" width="720" height="400" controls&
&source src="http://minkbooks.com/content/trailer.mp4"&
&source src="http://minkbooks.com/content/trailer.ogg"&
html5标签的属性：
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。height pixels 设置视频播放器的高度。loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。muted muted 规定视频的音频输出应该被静音。poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。src url 要播放的视频的 URL。width pixels 设置视频播放器的宽度。
当然，如果想要很漂亮的播放外观呢？那么就可以用html5播放器了，目前有很多html5播放器，比如
本人觉得videojs是一个很不错的选择，下面就介绍下这个播放器的使用。
第一步：在官网下载video.js和video-js.css以及video-js.swf
第二步：在head标签引入
&!--video.js html5视频播放器--&
&link rel="stylesheet" type="text/css" href="assets/lib/css/video-js.css"&
&script src="assets/lib/js/jquery.js"&&/script&
&script src="assets/lib/js/movive/video.js"&&/script&
&!--IE低版本支持--&
&script src="assets/lib/js/movive/html5media.js"&&/script& 可以看到有一个html5media.js的类库，这个类库是对IE低版本的支持，大家都知道，IE对html5的支持不太好，这个看项目需求可以加入。直接网上就可以下载。
第三步：body里加入video标签
&video id="Html5Video" class="video-js vjs-default-skin" preload controls autoplay
width="100%"
poster="assets/images/movie/poster.jpg"&
&source id="src1" src="assets/movie/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /&
&source id="src2" src="assets/movie/zhiyan.ogv" type='video/ codecs="theora, vorbis"' /&
&source id="src3" src="assets/movie/linyoujia.webm" type='video/ codecs="vp8, vorbis"' /&
您的浏览器不支持 video 标签。
&/video&html5支持三种格式的视频：mp4,ogv,和webm。首先要准备一个 mp4 格式的视频(h264)，可以在苹果设备中使用；其次要准备 ogv 格式的视频，用在火狐浏览器中；最后要准备一下 webm 格式的视频，这个可以用在谷歌浏览器等。这样就确保支持几乎所有的主流浏览器了。
在这里还要多说一点，可能是技术发展的原因，各种浏览器对这三种格式的支持没有那么绝对了，比如：mp4格式的视频，在谷歌,搜狗，火狐，手机端等都可以正常播放，其他两种格式大致也是这种情况。而且，video标签对视频格式的支持好像也没有那么绝对了，至少我放入wmv,avi格式的视频也是可以播放的，感兴趣的同学可以试试啦，这里我就不多讲了。在这里要重点强调的一点是视频的准备，我们准备mp4,ogv,webm格式的视频，可能会遇见明明是mp4格式的视频，为什么不能播放呢？而且用一些转码软件转码视频给mp4,ogv,webm格式的视频也是无法播放，这里可能是转码的问题，比如：mp4要求是h246，可是按照要求转码后，可能还是无法播放。这里给各位大侠推荐一款视频转换软件，专门为html5量身定做的：Freemake Video Converter。直接转码为html5视频，就会转换给MP4,ogv.webm三种格式的视频，并且会生成相应的代码。
第四步：js
&script& _V_.options.flash.swf = "assets/lib/js/movive/video-js.swf";&/script&
加入这段代码，就可以在不支持的浏览器自动切换为flash播放。
最后，在服务器部署后，会发现视频可能无法播放，这是因为IIS里我们没有配置mime类型的支持，把mp4,ogv,webm这三种格式的支持都配置好了，视频就可以正常播放了。至于如何配置，百度搜索一下就知道了，有很多的，而且最好配置的文件类型要符合相应的格式，但我试了一下，发觉文件类型没有什么影响...如果配置后，还是无法播放，那么可能就是文件类型不对，具体看情况而定吧。
HTML5的Video标签的属性,方法和事件汇总
html5 页面嵌入视频
HTML5的Video标签的属性,方法和事件汇总及Video填充满父div的大小
关于html5 video currentTime 在chrome浏览器下设定失败问题解决
jsp中插入html5的video标签
web项目引用html5 video标签实现视频播放的坑
H5标签 video标签的使用
HTML5 video 视频标签使用介绍
关于H5中的&video&&/video&标签的用法总结
h5+vue video使用
没有更多推荐了，