<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";}}

?

轉載于:https://www.cnblogs.com/zhangbob/p/8400109.html

總結

以上是生活随笔為你收集整理的微信开发中，H5的video标签使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。