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 標(biāo)簽。
        </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

解釋

因?yàn)樾掳姹镜墓雀铻g覽器考慮到用戶體驗(yàn)，部分視頻在自動(dòng)播放準(zhǔn)備就緒后，會(huì)自動(dòng)把音量調(diào)整到最大而播放，所以自18年就屏蔽了video的自動(dòng)播放這一屬性，不過(guò)在觀察video標(biāo)簽的屬性可以發(fā)現(xiàn)它的另一個(gè)屬性muted，muted 屬性是一個(gè) boolean(布爾) 屬性。muted 屬性設(shè)置或返回音頻/視頻是否應(yīng)該被靜音（關(guān)閉聲音）。所以將muted屬性加上后，瀏覽器可以自動(dòng)播放而且為靜音狀態(tài)下。這時(shí)可以添加屬性controls控件，用戶可以自己手動(dòng)點(diǎn)擊播放，從而視頻有聲音?？梢园l(fā)現(xiàn)，淘寶的詳情頁(yè)也是如此，一開始進(jìn)去頁(yè)面后，視頻自動(dòng)播放無(wú)聲視頻，鼠標(biāo)點(diǎn)擊控件的播放按鈕才有聲音。