Question

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

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

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

FullScreen源代码

<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;
            }
        }

Answer 1

HTML5全屏功能的Webkit和Gecko实现之间有所不同。 Gecko自动添加CSS规则"width: 100%; height: 100%"以将其调整为屏幕尺寸。但是，Webkit会将元素的原始尺寸居中放置在黑色背景上。要在Webkit上实现相同的行为，请将以下CSS规则添加到您的元素中：

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

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

1 个答案: