全屏视频部分在 Firefox 中工作，但不是在 chrome 中答案

【问题标题】：Full screen video work partially in firefox but not chrome全屏视频部分在 Firefox 中工作，但不是在 chrome 中
【发布时间】：2015-11-11 08:02:54
【问题描述】：

使用 webrtc 广播实时视频流的视频容器。

最初禁用全屏视频。用户单击设置广播按钮后，将启用停止/全屏 btn。

全屏在 Firefox 中部分工作，但在 chrome 中不起作用。下面是firefox视频中的截图，只出现在左上角。

全屏源代码

<button id="fullscreeniframe" class="button" disabled>Fullscreen</button>

document.getElementById('fullscreeniframe').disabled = false;

var videosContainer = document.getElementById('videos-container') 

document.getElementById('fullscreeniframe').onclick = function() {

                if (videosContainer.requestFullscreen) {
                videosContainer.requestFullscreen();
              } else if (videosContainer.mozRequestFullScreen) {
                videosContainer.mozRequestFullScreen(); // Firefox
              } else if (videosContainer.webkitRequestFullscreen) {
                videosContainer.webkitRequestFullscreen(); // Chrome and Safari
                alert("ABCD");
                // nid to call scaleVideos();
              }
            };

我还有一个 scaleVideos 功能。不确定它是否会中断我的全屏代码？还是我必须使用它？如果有怎么办？

我的ScaleVideo功能代码

function scaleVideos() {
            var videos = document.querySelectorAll('video'),
                length = videos.length,
                video;

            var mydiv = document.getElementById("LiveConferencing");
            var curr_width = mydiv.offsetWidth;
            var curr_height = mydiv.offsetHeight;

            var minus = 130;
            var windowHeight = curr_height;
            var windowWidth = curr_width;
            var windowAspectRatio = windowWidth / windowHeight;
            var videoAspectRatio = 4 / 3;
            var blockAspectRatio;
            var tempVideoWidth = 0;
            var maxVideoWidth = 0;

            for (var i = length; i > 0; i--) {
                blockAspectRatio = i * videoAspectRatio / Math.ceil(length / i);
                if (blockAspectRatio <= windowAspectRatio) {
                    tempVideoWidth = videoAspectRatio * windowHeight / Math.ceil(length / i);
                } else {
                    tempVideoWidth = windowWidth / i;
                }
                if (tempVideoWidth > maxVideoWidth)
                    maxVideoWidth = tempVideoWidth;
            }
            for (var i = 0; i < length; i++) {
                video = videos[i];
                if (video)
                    video.width = maxVideoWidth - minus;
            }
        }

【问题讨论】：

据我所知，html5视频不需要全屏缩放...虽然我没有直播经验...
在 Firefox 中有一个全屏视频控件，但在 chrome 中没有.. 这就是为什么我要创建一个 btn 来使视频全屏..
但是您调用了 webkit (Chrome) 的全屏方法...如果您不使用 scaleVideos 函数会发生什么？
我评论了函数 scaleVideos() ，但它仍然没有全屏显示。我相信函数 scaleVideos() 用于定义视频容器的大小？我不太确定这一点，因为我从别人那里接手了这个项目..
也不太确定。我总是使用没有全屏容器的 html5 视频。只需选择视频元素本身并请求全屏即可。也许区别在于流，或者您遇到了一些编解码器问题？（ogg vs mp4 vs webm）？抱歉，没办法了……

标签： javascript html video fullscreen

【解决方案1】：

HTML5 全屏功能的 Webkit 和 Gecko 实现之间存在差异。 Gecko 自动添加 CSS 规则 "width: 100%; height: 100%" 以将其调整为屏幕尺寸。然而，Webkit 将元素的原始尺寸置于黑色背景上。要在 Webkit 上实现相同的行为，请将这些 CSS 规则添加到您的元素中：

#yourElementId:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

【讨论】：