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

【问题标题】：autoplay not working when browser zoom is above 75%当浏览器缩放超过 75% 时自动播放不起作用
【发布时间】：2018-01-05 04:35:43
【问题描述】：

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

实际上，我正在构建一个单页网站（艺术目的） - 该网站包含一个设置为自动播放的视频背景。自动播放功能在所有浏览器（不包括 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>

对使用错误的代码插入功能深表歉意...代码示例正在预览，大约一半的代码丢失？？

【问题讨论】：

这很可能与您的插件之一有关。检查是什么挂钩了resize 事件，因为它似乎是从那里发生的，而不仅仅是缩放变化。根据 chrome://media-internals/ 它确实收到了一个正常的暂停事件。不确定它是否是对 HTMLMediaElement.pause() 的直接调用...因此，请尝试一一禁用所有正在运行的代码，直到找到导致此行为的原因。（请注意，在 js free 页面上，这不会发生）
谢谢@Kaiido :) 这是我的第一个代码，所以我真的不了解。如果我对您的理解正确，您是说自动播放/缩放问题很可能是 Muses js 调整大小功能的结果？关于 HTMLMediaElement.pause()，不是来自我的（本机嵌入？）在代码注释上：我检查并删除了每一行/部分并进行了测试/重新测试，但仍然收到相同的最终结果。这个link 让我很兴奋，但是我是个菜鸟，我真的不知道在那里做什么。对不起，我可能误解了一切！
@Kaiido 可能是完全错误的方向 - 但是我如何理解您的评论我尝试在 object.onresize = function(){document.getElementById("video-bg").play()}; 之后插入这一行仍然没有结果......
听自己的 onresize 将是一个丑陋的解决方法。最好找到根本原因并从源头上解决它。如果你真的想走这条路，那看起来更像window.onresize = function() { requestAnimationFrame(function() { document.getElementById("video-bg").play();})};，以确保在你自己的播放调用之前调用暂停脚本。但请记住，这很丑陋，应该是你最后的手段。
@Kaiido 谢谢 :) 我同意，它很丑而且还有点小车。但是，作为一个短期解决方案，这已经足够好了！在接下来的几天里，我将进行更多研究并尽我所能从源头上修复。再次感谢！

标签： html css browser autoplay

【解决方案1】：

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

这可能是 WebKit 的 html5 视频的 bug 之一

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

如下链接：

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

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

【讨论】：

感谢您的回复！我之前尝试过上面的脚本，但没有结果，我又把它放进去，我仍然得到相同的结果......没有超过 75% 缩放的自动播放。有趣的是，您说自动播放在 Chrome 中不起作用，它在我的工作中只需将缩放设置为 80% 或更低 *在 3 台不同 PC 上的 Chrome 中测试
我之前错过了标签...@amirmohammad moradi
@divisive 你的代码在 chrome 中不适合我，但在 Firefox 中可以！！！
@divisive 您需要在 DOM 加载或更改时播放视频！看到这个：codepen.io/desandro/pen/RNBxXq

【解决方案2】：

更新 - 临时解决方案

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

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

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

【讨论】：