手机端video默认全屏的兼容写法

需求：希望视频播放时可以全屏播放，没有进度条、播放按钮等与系统相关的元素，视频的宽度大于高度，并自动播放

浏览器效果展示：

实现全屏：

苹果全屏兼容，属于文档内全屏

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自动播放的

谷歌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")
	}
})

手机端video默认全屏的兼容写法

猜你喜欢