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 测试版。

视频标签放大移动Chrome（Android）

1 个答案: