需求：希望視訊播放時可以全屏播放，沒有進度條、播放按鈕等與系統相關的元素，視訊的寬度大於高度，並自動播放

瀏覽器效果展示：

實現全屏：

蘋果全屏相容，屬於文件內全屏

playsinline="true"

x-webkit-airplay="true"

webkit-playsinline="true"

安卓全屏相容，脫離文件全屏，當我退出全屏隱藏video以及外層盒子時，會有短暫的黑屏出現，現在還沒解決！

x5-video-player-type="h5"

x5-videoplayer-fullscreen="true"

實現視訊滿屏播放：

由於提供的視訊寬度大於高度，無法實現滿屏，所以在豎屏時，我把video旋轉90度，同時讓video的width等於window的height，height等於window的width，同時算一下偏移距離。當橫屏後就符合了我們的需求，所以需要把js新增的樣式清空

if(window.orientation == 0 || window.orientation == 180) { //豎屏的時候
	$("#video").width($(window).height());
	$("#video").height($(window).width());
	var _w = $("#video").width();
	var _h = $("#video").height();
	var _l = -(_w - _h) / 2;
	$("#video").css({
		"marginLeft": _l,
		"marginTop": -_l,
	})
} else {
	$("#video").attr("style", "none")
}
 

當瀏覽器視窗的大小改變時，也需要重新執行上述方法。

實現自動播放：

必須要有與使用者的互動事件，click，tap等互動觸發，PC端是可以通過靜音使video自動播放的

HTML結構：

<div class="videobox" id="videobox">
    <video id="video" src="flash/video.mp4" preload="true" loop="loop" playsinline="true" x-webkit-airplay="true" webkit-playsinline="true" x5-video-player-type="h5" x5-videoplayer-fullscreen="true"></video>
</div>
 

CSS結構：

.videobox{display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; background: rgba(0,0,0,0.8);}
#video{ background: transparent;}

/*手機豎屏時video翻轉90度*/
@media all and (orientation : portrait){
	#video{transform: rotate(90deg);-webkit-transform: rotate(90deg);}
}

JS結構：

$(".btn").click(function() {

	$(".videobox").show();
	var videotimer = setInterval(function() {
		if($("#video").get(0).currentTime > 0) {
			$("#video").show();
			clearInterval(videotimer);
		}
	}, 100);

	if(window.orientation == 0 || window.orientation == 180) { //豎屏的時候
		$("#video").width($(window).height());
		$("#video").height($(window).width());
		var _w = $("#video").width();
		var _h = $("#video").height();
		var _l = -(_w - _h) / 2;
		$("#video").css({
			"marginLeft": _l,
			"marginTop": -_l,
		})
	} else {
		$("#video").attr("style", "none")
	}
})
$(window).resize(function() {
	if(window.orientation == 0 || window.orientation == 180) { //豎屏的時候
		$("#video").width($(window).height());
		$("#video").height($(window).width());
		var _w = $("#video").width();
		var _h = $("#video").height();
		var _l = -(_w - _h) / 2;
		$("#video").css({
			"marginLeft": _l,
			"marginTop": -_l,
		})
	} else {
		$("#video").attr("style", "none")
	}
})