我有一个带有视频元素的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>
任何解决方案或修复都将受到赞赏
答案 0 :(得分:1)
我遇到了同样的问题。它似乎发生在Safari 11中,但不是在Safari 9或更早版本中。这是我使用的解决方法。
我已经将“未缩放”类应用于视频元素本身,将其缩放回原始大小,然后使用宽度和高度来缩小它。这样,视频容器中的其他内容将保持缩放,但视频控件的大小合适。
在HTML中,将“未缩放”类添加到视频中,然后删除高度和宽度。
<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%;
}