背景:
video播放器默认的全屏后层级太高,想在视频全屏后在视频上方展示其他内容无法实现,看网上说的z-index取比video全屏默认最大的z-index=2147483647 更大就行 ,但是我试了之后还是没有效果,只能换种思路了,目前是禁用video自带的控制条,自定义控制条(video和想要在视频上方展示的div都要在设置全屏的div之下),可以实现想要的效果。不知道还有没有其他好的方法。
由于是做实时直播,所以进度条暂停那些的我就不用了,只写了全屏和退出全屏
js实现全屏和退出全屏
function requestFullScreen(ele) {//全屏
$("#"+ele+" .videoMap").show();
var element = document.getElementById(ele);
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
requestMethod.call(element);
//全屏之后的显示样式
$("#"+ele+" .vjs-tech").css({"width": $("#"+ele).width()+"px","height": "100%"});
};
// 退出全屏
function exitFullscreen(ele) {
$("#"+ele+" .videoMap").hide();
var elem = document;
var elemd = document.getElementById(ele);
if (elem.webkitCancelFullScreen) {
elem.webkitCancelFullScreen();
} else if (elem.mozCancelFullScreen) {
elemd.mozCancelFullScreen();
} else if (elem.cancelFullScreen) {
elem.cancelFullScreen();
} else if (elem.exitFullscreen) {
elem.exitFullscreen();
} else {
//浏览器不支持全屏API或已被禁用
};
/*
退出全屏后样式还原
*/
$("#"+ele+" .vjs-tech").css({"width": $("#"+ele).width()+"px","height": "100%"});
}