HTML5视频全屏播放

一、设置video属性(video.html)

<videosrc="video/1.mp4" webkit-playsinline="" playsinline="" x-webkit-airplay="true" airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" reload="auto" id="video"></video>

**说明：**这种方式最为简单快捷，但在安卓下视频播放完会显示广告页，无法自动跳走（解决方案参考方案二）

二、JS动态生成(index.html)

varu=navigator.userAgent;varisAndroid=u.indexOf('Android')>-1||u.indexOf('Adr')>-1;//android终端varisiOS=!!u.match(/\(i[^;]+;(U;)?CPU.+MacOSX/);//ios终端 if(isAndroid){console.log('安卓');$('.wrap').append('<div class="vidDiv aniroid"><video width="100%" height="100%" id="video" class="video" src="video/1.mp4" preload="auto" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" x-webkit-airplay="true" webkit-playsinline="true" playsinline="true"></video></div>');}if(isiOS){console.log('苹果');$('.wrap').append('<video width="100%" height="100%" id="video" class="video ios" src="video/1.mp4" preload="auto" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" x-webkit-airplay="true" webkit-playsinline="true" playsinline="true"></video>');}

**说明：**通过判断设备针对IOS、Android分开处理，以达到更好的兼容，推荐使用

三、canvas渲染(canvas.html)

varcan=document.getElementById('can')||document.createElement('canvas'),ctx=can.getContext('2d'),vid=document.getElementById('vid')||document.createElement('video'),wid=$(window).width(),hei=$(window).height()can.id='can';vid.width=wid;vid.height=hei;vid.src='video/1.mp4';vid.autoplay='autoplay';document.getElementById('wrap').appendChild(can);vid.addEventListener('play',function(){can.width=vid.width;can.height=vid.height;draw(this,ctx,wid,hei);},false)functiondraw(v,c,w,h){if(v.paused||v.ended)returnfalse;c.drawImage(v,0,0,w,h);setTimeout(draw,20,v,c,w,h);}

**说明：**安卓下对canvas绘制视频识别不是很好

四、扩展篇

1、基本属性

• src 路径
• width/height 宽高
• poster 封面图
• preload 预加载
• autoplay 自动播放
• loop 循环播放
• controls 浏览器自带控制条
• webkit-playsinline="true" | "playsinline" 禁止webkit内核下视频自动全屏
• x-webkit-ariplay = "true" 支持airplay的设备
• currentSrc 返回资源地址
• currentTime 返回当前播放进度，可设置
• duration 返回资源总时长
• paused 资源是否已停止
• ended 资源是否已播完

<videoid="video" src="mov.mp4" preload="auto" poster="" currenttime=0webkit-playsinline="true" playsinlineloopx-webkit-airplay="true" controlsautoplay>

2、事件

• canplaythrough 表示资源缓冲完毕，可以播放
• durationchange 资源长度改变，执行一次
• play 资源实际开始播放，autoplay和play()都会触发play事件
• playing 同上 执行一次
• pause 暂停时触发
• progress 资源播放过程中多次执行
• ended 结束时触发

3、方法

• play() 播放资源
• pause() 暂停资源
• load() 重新加载src指定的资源

五、这些年，我们走过的坑？

**问题：**微信X5浏览器打开时，视频会自动全屏播放，并且结束时会出现腾讯视频的广告

**方案：**给video标签添加属性 webkit-playsinline="true" playsinline="true" 可解决IOS、部分安卓机的问题

**说明：**微信团队对视频来源进行了域名限制，挂载在qq域名下可解决以上问题，目前申请白名单是关闭状态。可以使用以下方式：

1、同层播放器

• 使用x5-video-player-type声明启用同层H5播放器

<videosrc="" x5-video-player-type="h5"></video>

• 使用x5-video-player-fullscreen 重新适配新视口大小，默认进入是全屏播放

<videosrc="" x5-video-player-type="h5" x5-video-player-fullscreen="true"></video>

2、canvas绘制

**说明：**参考以上第三条（canvas渲染），通过一些H5视频插件做兼容