手機端video預設全屏的相容寫法
阿新 • • 發佈:2019-01-02
需求:希望視訊播放時可以全屏播放,沒有進度條、播放按鈕等與系統相關的元素,視訊的寬度大於高度,並自動播放
瀏覽器效果展示:
實現全屏:
蘋果全屏相容,屬於文件內全屏
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")
}
})