今天在做一個分享頁面的時候需要播放視屏用了video，然后各種坑開始了：
<video src="http://xxx.mp4 " id="myVideo" poster=“XXX” controls></video>
在安卓微信 內：播放全屏並且定位在視屏上的一些東西也不見了？於是接入了同層
<video src="http://xxx.mp4 " id="myVideo" poster=“XXX” controls x5-video-player-type="h5" x5-video-player-fullscreen="true" ></video>
注： x5-video-player-type、x5-video-player-fullscreen屬性需要在播放前設置好，播放之后設置無效
此時視屏上的一些東西看見了，但是$(window).width()；$(window).height()設置后不能鋪滿整平，同層播放的時候呢出現上下黑邊，
折騰了一番用了screen.width ； screen.height
此時進入同層的時候能夠全屏播放了，但是呢頁面剛進入未播放時候出現了滾動條，而我想要的就是占滿手機屏幕就行了。反復測試了下在安卓內：
$(window).height() ： 獲取的高度是內容區域不加導航區域，而 screen.height 是整個手機區域
還有安卓進入同層上面有個返回按鈕，點擊后視屏停止播放難看，於是改變了下形式不要默認播放按鈕，不要默認poster加封面；自己寫了個播放按鈕
<video src="http://xxx.mp4 " id="myVideo" x5-video-player-type="h5" x5-video-player-fullscreen="true" ></video>
通過監聽處理：
myVideo.addEventListener('play',function(){}）
myVideo.addEventListener('pause',function(){}）
此時坑已經差不多了，但是 ios 內坑繼續了
ios內聯播放需要加上：<video src="http://xxx.mp4 " id="myVideo" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" ></video>
兼容各種全屏狀態
var ua = navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(ua)) {
$("#test_video").css({ "width":$(window).width(),"height":$(window).height()})
}else if (/android/.test(ua)) {
if (ua.match(/MicroMessenger/i) == "micromessenger") {
//微信 解決同層時候上下黑邊
test_video.style.width = screen.width + "px";
test_video.style.height = screen.height + "px";
}else{
//QQ微博等
$("#test_video").css({ "width":$(window).width(),"height":$(window).height()})
}
}else{
$("#test_video").css({ "width":$(window).width(),"height":$(window).height()})
}
還有通過object-position 設置顯示位置、視屏是否鋪滿容器
myVideo.style["object-position"]= "0px 0px" //頂部
var offsetY = myVideo.clientHeight - (myVideo.clientWidth * myVideo.videoHeight / myVideo.videoWidth)
myVideo.style["object-position"]= "0px " + offsetY + "px" //底部
myVideo.style["object-fit"]= "fill" //視屏鋪滿容器
通過上面，通過特定布局在同層內還是可以實現假象的內聯播放的，上面視屏，下面區域加上滾動條來處理