前两天,美团上线了洋洋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/...。