需求:希望视频播放时可以全屏播放,没有进度条、播放按钮等与系统相关的元素,视频的宽度大于高度,并自动播放
浏览器效果展示:
实现全屏:
苹果全屏兼容,属于文档内全屏
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")
}
})