Safari上的全屏视频无法全屏显示

时间:2019-11-29 06:54:26

标签: javascript safari html5-video

使用以下内容全屏显示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,而只是在谈论台式机浏览器。我不确定下一步该怎么做。

0 个答案:

没有答案