当浏览器缩放超过75％时自动播放不起作用

Posted 2021-05-05

或多或少一个完整的菜鸟在这里，如果这个问题完全荒谬，请提前道歉！

实际上，我正在构建一个单页网站（艺术目的） - 本网站上包含的是一个设置为自动播放的video-bg。自动播放功能适用于所有浏览器（减去IE）和我迄今为止测试过的所有设备。

只有一个问题......

由于这个菜鸟无法理解的原因，自动播放仅在浏览器内置缩放设置为75％或更低时才有效。为了仔细检查这一点，我尝试用'控件'嵌入视频。然而，结果是相同的，当浏览器缩放设置为75％或更低时视频自动播放，并且当用户/观看者提示（点击“播放”控制）时它只会播放超过75％。

由于我无法弄清楚的原因，自动播放（在我的情况下）受到浏览器缩放的影响？

我在Muse工作......很可能是一个失礼的人？

html：

<div class="video-container">
<video autoplay muted loop id="video-bg">
<source src="assets/maskon.mp4" type="video/mp4">
Your browser does not support HTML5 video. Please update to view video content :) 
</video>
</div>

CSS：

<style>
#video-bg {
position: relative;
min-width: 100%;
height: 100vh;
}
.video-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
min-height: 100%;
min-width: 100%;
}
</style>

使用错误的代码插入功能的进一步道歉...代码示例正在预览大约一半的代码丢失？

答案

您的代码正常在Firefox中运行！

这可能是WebKit的html5视频错误之一

你应该使用javascript的.play()函数来自动播放！

如下链接：

Video auto play is not working in Safari and Chrome desktop browser

在</video>之后添加此代码

<script>
    document.getElementById('vid').play();
</script>

另一答案

更新 - 临时解决方案

感谢@kaiido，我找到了解决这个问题的临时解决方案。

在window.onresize = function() { requestAnimationFrame(function() { document.getElementById("video-bg").play();})};之后插入代码：</video>允许在所有缩放分辨率下使用功能性自动播放功能。

然而，当放大/缩小时，仍然有点错误（页面需要经常重新加载），现在是一个很好的解决方法:-)