html5标签video在谷歌浏览器下autoplay属性失效不会自动播放

HTML部分

CSS部分

/* 视频 */
.li-video {
    width: 402px;
    height: 402px;
    position: absolute;
    left: 350px;
    top: 550px;
    /* display: none; */
    border: 1px solid #1071BD;
}
.li-video video{
    background: #000;
    width: 100%;
    height: 100%;
}

效果图

video.png

解释

因为新版本的谷歌浏览器考虑到用户体验，部分视频在自动播放准备就绪后，会自动把音量调整到最大而播放，所以自18年就屏蔽了video的自动播放这一属性，不过在观察video标签的属性可以发现它的另一个属性muted，muted 属性是一个 boolean(布尔) 属性。muted 属性设置或返回音频/视频是否应该被静音（关闭声音）。所以将muted属性加上后，浏览器可以自动播放但是为静音状态下，这时可以添加属性controls控件，用户可以自己手动点击播放，从而视频有声音。可以发现，淘宝的详情页也是如此，一开始进去页面后，视频自动播放无声视频，鼠标点击控件的播放按钮才有声音。

自古以来，开发水平就与头发量成反比，不怕生活给了一地鸡毛，就怕给了一地头发。