Question

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

实际上，我正在构建一个单页网站（艺术目的） - 本网站上包含的是一个设置为自动播放的视频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>

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

Answer 1

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

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

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

如下链接：

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

在</video>
之后添加此代码
<script>
    document.getElementById('vid').play();
</script>

Answer 2

更新 - 临时解决方案

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

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

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

当浏览器缩放超过75％时，自动播放功能无效

2 个答案: