html5標(biāo)簽video在谷歌瀏覽器下autoplay屬性失效不會(huì)自動(dòng)播放

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)擊控件的播放按鈕才有聲音。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容