Javascript HTML5背景视频将不会播放

我对HTML5背景视频有问题。视频位于首页，应在没有声音的情况下自动启动。点击一个按钮后，它应该以20%的音量播放。 我的代码在Mozilla Firefox中工作没有任何问题。但不是在Safari或MS Edge中。在谷歌Chrome中，只有条件限制。当我进入页面时，视频不会启动，当我切换到另一个站点并返回主页时，视频工作正常

我已经删除了该卷的JS代码，并且只使用.mp4视频进行了测试。没有成功

HTML:

CSS:

---

下面是在Edge和Firefox中按预期运行的更新代码

#视频{
高度：200px；
宽度：200px；
}
功能视频_show（）{
$（“#视频”）.each（function（）{this.volume=0.0；}）；
};
函数play_sound（）{
$（“#视频”）.each（function（）{this.volume=0.2；}）；
};
功能静音_声音（）{
$（“#视频”）.each（function（）{this.volume=0.0；}）；
};

IIRC您还需要

mute

属性来自动播放视频，而无需用户交互，这是解决我在MS Edge和Google Chrome中遇到的问题的方法。它还可以与

$（“#video video”）.each（function（）{this.muted=true；}）一起使用

我听说Safari需要

自动播放

的

控件

属性。但这并不能解决我的问题-知道吗？哪种版本的Safari？FWIW这对我在Safari 12.0中的工作很好：

它可以工作。谢谢另一种视频格式不能解决我在Safari中的问题。Google Chrome需要

autoplay

的属性

mute

。

<div id="video">
    <video loop="true" preload="none" autoplay="true">
        <source src=".../video.mp4" type="video/mp4">
        <source src=".../video.webm" type="video/webm">
    </video>
</div>

video_show();
function video_show() {
  $("#video video").each(function(){this.volume = 0.0;});
};
$("button1").click(function() {
  $("#video video").each(function(){this.volume = 0.2;});
});
$("button2").click(function() {
  $("#video video").each(function(){this.volume = 0.0;});
});

#video video {
  height: auto;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  position: fixed;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: auto;
  z-index: 0;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
}