前两天，美团上线了洋洋H5，受到了网友的热烈追捧。里面主要是多段视频的播放和暂停。听上去很简单，但是由于腾讯的白名单限制，微信浏览器和QQ浏览器会自动将非腾讯域名的video标签中的视频添加到全屏，最后添加视频推荐。并且白名单申请入口已经关闭。本文涵盖了全屏适配和将其他元素放置在视频之上。例如下载按钮。苹果手机都嵌入了一个小视频窗口来播放。目前替代实际测量的几种解决方案。上传到腾讯视频（实测不够）gif（尺寸偏大）先上传代码//html//jsvarvideo=document.querySelector('video');videoMethod(video);functionvideoMethod(video){video.addEventListener('touchstart',function(){video.play();});setTimeout(function(){video.play();},1000);document.addEventListener("WeixinJSBridgeReady",function(){video.play();video.pause();},false);video.addEventListener('ended',function(e){video.play();})//进入全屏video.addEventListener("x5videoenterfullscreen",function(){window.onresize=function(){video.style.width=window.innerWidth+"px";video.style.height=window.innerHeight+"px";}})//退出全屏video.addEventListener("x5videoexitfullscreen",function(){window.onresize=function(){video.style.width=originalsize;video.style.height=originalsize;}})}//referencejsiphone-inline-video//css.IIV::-webkit-media-controls-play-button,.IIV::-webkit-media-controls-start-playback-button{opacity:0;指针事件：无；宽度：5px;}.videobox{宽度：4.78rem;身高：7.8rem；位置：绝对；顶部：3.2rem；左：1.2rem；}视频{宽度：4.2rem；身高：7.69rem；.22rem;顶部：.7rem；溢出：隐藏；margin-top:-.7rem;}属性详解preload="auto"是否预加载数据auto页面加载后加载整个数据元数据页面加载后加载元数据none不加载视频webkit-playsinline&&playsinline="true"小窗播放让视频不脱离文本流，但是需要webview(allowsInlineMediaPlayback=YESwebview.allowsInlineMediaPlayback=YES)，结果苹果支持，安卓不支持安卓会自动播放全屏。x-webkit-airplay="allow"字面意思是允许airplay（通过AirPlay，可以将当前视频投射到其他支持该技术的设备上。)如果是video标签，可以通过x-webkit-airplay="allow"属性开启；如果是embed标签，可以通过airplay="allow"属性启用。x5-video-player-type="h5"&&x5-video-player-fullscreen="true"&&x5-video-orientation="portraint"详细建议阅读官网文档。非常重要必看。object-fit:fill填充尺寸详情方法自动播放setTimeout(function(){video.play();},1000);//微信webview全局嵌入，WeixinJSBridgeReady方法document.addEventListener("WeixinJSBridgeReady",function(){video.play();video.pause();},false);//诱导用户触摸video.addEventListener('touchstart',function(){video.play();});覆盖加减结束，timeupdate其他事件慎用video.addEventListener('timeupdate',function(){//当视频的currentTime大于0.1时，表示黑屏时间已经过去，有视频图像，您可以删除浮动层（.pagestart的div元素）if(!video.isPlayed&&this.currentTime>0.1){$('.pagestart').fadeOut(500);video.isPlayed=!0;}})在react中使用是因为我们要实现h5的播放效果给video设置属性。但是我们知道react自定义属性需要加上data-前缀。生成的节点属性不是x5需要的属性。造成故障。感谢@weishijun14提供React15及更早版本的解决方法componentDidMount:function(){varelement=ReactDOM.findDOMNode(this.refs.test);element.setAttribute('custom-attribute','somevalue');}见https://jsfiddle.net/peterjma...React16将原生支持React16自定义属性，RC版本中有此功能，并且将很快公布。这意味着给元素添加自定义属性会非常简单：){node.setAttribute('xmlns:xlink','w3.org/1999/xlink')}}}Vue可以在模板中直接使用
可能遇到的问题（坑）Android手机全屏边线问题Android手机在播放视频时全屏的话，左右会有大约一个像素的边线露出来，不能完全覆盖屏幕。解决方法如下图所示：在监听屏幕全屏事件（video.addEventListener）的同时，手动将视频的left值设置为0。题图参考https://github.com/gnipbao/ib...https://x5.tencent.com/tbs/gu...http://zhaoda.net/2014/10/30/...。
