<video></video>是HTML5新加入的標簽,最近流行的h5開發多以video技術集成一個H5頁面,效果也是很6的。現在總結一下用到的技術,主要的使用環境是微信,部分屬性一些手機的默認瀏覽器不支持,這些還需要讀者親測。
<videoid="videoID"src="video.mp4"poster="loadbg.jpg" 視頻封面preload="auto"x-webkit-airplay="allow"x5-video-player-type="h5" 啟用H5播放器,是wechat安卓版特性x5-video-player-fullscreen="true" 全屏設置,設置為 true 是防止橫屏x5-video-orientation="portraint" 播放器支付的方向,landscape橫屏,portraint豎屏,默認值為豎屏webkit-playsinline="true" 這個屬性是ios 10中設置可以讓視頻在小窗內播放,也就是不是全屏播放playsinline="true" IOS微信瀏覽器支持小窗內播放style="object-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";}}
?