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