使用以下内容全屏显示HTML5视频的容器div。在Safari之外的所有浏览器中,视频均可以全屏显示。 Safari中的行为是视频达到其原始尺寸(似乎是视频的默认分辨率信息)。
function fullscrnf(){
var vid = document.getElementById("player");
var fullscr = document.getElementById("fullscrn");
if (vid.mozRequestFullScreen){
if (document.fullscreenElement || document.webkitFullscreenElement ||
document.mozFullScreenElement){
document.exitFullscreen();
fullscr.innerHTML = '<i class="fas fa-expand fa-lg"></i>';
}
else{
vid.mozRequestFullScreen();
fullscr.innerHTML = '<i class="fas fa-compress-arrows-alt"></i>';
}
}
else if (vid.webkitRequestFullscreen){
if (document.fullscreenElement || document.webkitFullscreenElement ||
document.mozFullScreenElement){
document.webkitExitFullscreen();
fullscr.innerHTML = '<i class="fas fa-expand fa-lg"></i>';
}
else{
vid.webkitRequestFullscreen();
fullscr.innerHTML = '<i class="fas fa-compress-arrows-alt"></i>';
}
}
}
尝试了screenfull.js以及下面的CSS规则,但仍然具有相同的行为。
object-fit: fill/contain/cover;
video:-webkit-full-screen {
width: 100%;
height: 100%;
max-height: 100%;
}
为清楚起见,我并不是在谈论iOS,而只是在谈论台式机浏览器。我不确定下一步该怎么做。