移动 Chrome (Android) 上的视频标签缩放

Question

我正在使用 WebRTC 流作为要在移动设备（Nexus 5X + Chrome）上播放的视频标签的来源。

手机上的视频流完全随机放大到实际视频的左上角 25%。缩放发生时视频控件不会改变，几秒钟后一切恢复正常。

在桌面浏览器上永远不会出现，手机的 Chrome 控制台也不会输出任何错误。

HTML：

<div class="video-player-container ratio-16by9">
    <video class="video" autoplay height="100%" width="100%" id="video-player">
        Your browser does not support HTML5 video.
    </video></div>

SCSS：

.video-player-container {
    position: relative;
    background-color: $color-primary;
    width: 100%;
    height: 100%;
    color: white;
}

.video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    height: 100%;
    width: 100%;
}

.ratio-16by9 {
    @include aspect-ratio(16, 9);
}

@mixin aspect-ratio($width, $height) {
    position: relative;

    &:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: ($height / $width) * 100%;
    }

    .content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

Answer 1

已通过 Facebook（移动网络）视频确认。现在已经快一个月了。三星 S10，Chrome 测试版。