2015 军考 网站建设,网站后台,wordpress屏蔽google,网站建设的销售怎么做video/video是HTML5新加入的标签#xff0c;最近流行的h5开发多以video技术集成一个H5页面#xff0c;效果也是很6的。现在总结一下用到的技术#xff0c;主要的使用环境是微信#xff0c;部分属性一些手机的默认浏览器不支持#xff0c;这些还需要读者亲…video/video是HTML5新加入的标签最近流行的h5开发多以video技术集成一个H5页面效果也是很6的。现在总结一下用到的技术主要的使用环境是微信部分属性一些手机的默认浏览器不支持这些还需要读者亲测。 videoidvideoIDsrcvideo.mp4posterloadbg.jpg 视频封面preloadautox-webkit-airplayallowx5-video-player-typeh5 启用H5播放器,是wechat安卓版特性x5-video-player-fullscreentrue 全屏设置设置为 true 是防止横屏x5-video-orientationportraint 播放器支付的方向landscape横屏portraint竖屏默认值为竖屏webkit-playsinlinetrue 这个属性是ios 10中设置可以让视频在小窗内播放也就是不是全屏播放playsinlinetrue IOS微信浏览器支持小窗内播放styleobject-fit:fill
/video 这里介绍下它的样式属性object-fit属性它有两个可以用的值fill和contain。fill是把视频拉伸或缩小是视频正好平铺在video上这样会造成影响的拉伸慎重使用而contain类似于background-size的contain值它把视频放或缩小到容器能容下的最大尺寸按照视频的分辨率放入video标签这个属性不会引起影响的变形但是如果video的宽高比不等于影响的宽高比那么会又video的背景露出。 一般产品经理希望保证影像不变形的情况下全屏播放不露出video的背景我的思路是采用contain值设置video的宽高都为100%通过操作video标签的父容器尺寸改变video显示的部分。即首先比较屏幕的宽高比和视频的宽高比得出视频的宽不够还是高不够导致露出白边然后让露出白边的video的父容器宽或高等于屏幕的宽或高通过视频的分辨率即宽高比计算出video父容器的另一个方向的长度款或高然后在屏幕上居中并且超出部分隐藏即可。注意不能直接操作video的宽或高这样会没有作用因为他的宽或高是跟着父容器走的。 献上代码 function initVideoSize() {var videoBox doc.querySelector(.videoBox);var fpsBox doc.querySelector(.fpsBox);var maxBorder Math.max(winWidth,winHeight),minBorder Math.min(winWidth,winHeight);//最大的一边screenRatio maxBorder / minBorder;//屏幕宽高比我的视频是横屏所以默认最长的是宽//视频不够宽if ( screenRatio videoRatio ) {videoBox.style.height maxBorder / videoRatio px;videoBox.style.width maxBorder px;videoBox.style.marginTop - (maxBorder / videoRatio - minBorder) / 2 px;videoBox.style.marginLeft 0;fpsBox.style.height maxBorder / videoRatio px;fpsBox.style.width maxBorder px;fpsBox.style.marginTop - (maxBorder / videoRatio - minBorder) / 2 px;fpsBox.style.marginLeft 0;} else { //视频不够高videoBox.style.width minBorder * videoRatio px;videoBox.style.height minBorder px;videoBox.style.marginLeft - (minBorder * videoRatio - maxBorder) / 2 px;videoBox.style.marginTop 0;fpsBox.style.width minBorder * videoRatio px;fpsBox.style.height minBorder px;fpsBox.style.marginLeft - (minBorder * videoRatio - maxBorder) / 2 px;fpsBox.style.marginTop 0;}} 转载于:https://www.cnblogs.com/zhangbob/p/8400109.html
