背景视频可在 Firefox 上运行，但无法在 Chrome 上运行 [关闭]答案

【问题标题】：Background video working on Firefox but not working on Chrome [closed]背景视频可在 Firefox 上运行，但无法在 Chrome 上运行 [关闭]
【发布时间】：2018-11-18 09:04:56
【问题描述】：

背景视频在 Firefox 上运行良好，但在 Chrome 中运行良好，谁能告诉我问题所在？我尽力解决这个问题，但每次都失败了。但是有的时候自动在chrome上运行并自停。

这是网站的链接。

【问题讨论】：

对我来说，Win 10 上的 Chrome 运行良好。但是，在 Mac 上，这是一项安全功能，只有在视频静音时自动播放才会起作用。因此，即使您的视频本身没有音频，也请使用mute 属性将其静音（只需添加即可）

标签： javascript php html css wordpress

【解决方案1】：

在 JQuery 中添加静音，以便视频在 Chrome 中播放

<!-- home banner video -->
        <video id="video"  poster="https://briolaundry.com/wp-content/uploads/2017/05/bg-main.jpg" autoplay loop>
            <!--<source src=""> -->
            <source src="https://briolaundry.com/wp-content/uploads/2017/05/Brio-HomePage-Hero-473358135.webm">
            <source src="https://briolaundry.com/wp-content/uploads/2017/05/home-banner.ogv">
    </video>

JQuery：

window.onload = function () {
    var element = document.getElementById('video');
    element.muted = "muted";
}

【讨论】：

【解决方案2】：

试试这个：添加如下参数

<video id="bg_video" playsinline autoplay muted loop controls="controls">

然后用 CSS 移除控件

/* This used to work for the parent element of button divs */
/* But it does not work with newer browsers, the below doesn't hide the play button parent div */

*::-webkit-media-controls-panel {
  display: none!important;
  -webkit-appearance: none;
}

/* Old shadow dom for play button */

*::-webkit-media-controls-play-button {
  display: none!important;
  -webkit-appearance: none;
}

/* New shadow dom for play button */

/* This one works! */

*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}

【讨论】：