HTML部分

    <div class="li-video">
        <!-- poster="images/yx3.png" -->
        <video width="402" height="402" controls autoplay muted>
            <source src="images/video.mp4" type="video/mp4">
            您的浏览器不支持 video 标签。
        </video>
    </div>

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%;
}

效果图

解释

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