html - 视频容器 div 上的 Safari 11 css 缩放使视频控件太小

Question

我有一个 DOM 结构，其中包含一个视频元素和一个比屏幕大的容器，并使其适合屏幕(不改变其尺寸)我对其应用了一些缩放比例，发现通过应用 css 缩放比例缩小可以制作视频控件小于视频本身。

您可以在 https://jsfiddle.net/mizmaar3/osjmocc5/2/if 上查看问题你在 safari 11.x 中加载它

<div id="video-container" style="width: 600px; height: 335px; position:relative; transform:scale(0.5); transform-origin:0% 0%">
    <video src="https://iabtechlab.com/wp-content/uploads/2017/12/VAST-4.0-Short-Intro-low-resolution.mp4"
           id="video" class="video" autoplay muted controls playsinline preload="auto"
           style="width: 100%; height: auto">
    </video>
  </div>

任何解决方案或修复将不胜感激

Answer 1

我遇到了同样的问题。它似乎发生在 Safari 11 中，但不是在 Safari 9 或更早版本中。这是我使用的解决方法。

我已将“未缩放”类应用于视频元素本身，将其缩放回其原始大小，然后使用宽度和高度将其缩小。这样，视频容器中的其余内容将保持缩放，但视频控件的大小合适。

在 HTML 中，将“unscaled”类添加到视频中，并删除高度和宽度。

 <div id="video-container" style="width: 600px; height: 335px; position:relative; transform:scale(0.5); transform-origin:0% 0%">
    <video class="unscaled" src="https://iabtechlab.com/wp-content/uploads/2017/12/VAST-4.0-Short-Intro-low-resolution.mp4"
           id="video" class="video" autoplay muted controls playsinline preload="auto">
    </video>
  </div>

CSS:

.unscaled{
  transform:scale(2.0);
  transform-origin:0% 0%;
  width: 50%;
  height: 50%;
}

https://jsfiddle.net/osjmocc5/9/