App下載

在前端中怎么使用video poster屬性設(shè)置視頻封面？video視頻封面實(shí)現(xiàn)方法分享！

來(lái)源: 一級(jí)退堂鼓選手 2021-08-16 10:00:43 瀏覽數(shù) (5884)
反饋

我們?cè)谄匠Ｖ性谑褂貌煌囊曨lapp的時(shí)候打開(kāi)一個(gè)視頻，在點(diǎn)擊播放之前會(huì)看到一張封面圖，點(diǎn)擊之后封面消失，隨即播放視頻。那么今天我們就來(lái)講講有關(guān)于：“在前端中怎么使用video poster屬性設(shè)置視頻封面？”這個(gè)問(wèn)題的相關(guān)解決方法！

 此時(shí)可使用H5 video提供的poster屬性即可輕松實(shí)現(xiàn)，

poster 屬性規(guī)定視頻下載時(shí)顯示的圖像或用戶點(diǎn)擊播放按鈕前顯示的圖像。如未設(shè)置該屬性，則使用視頻的第一幀代替

Demo：

<!DOCTYPE HTML>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>視頻封面</title>

    </head>

    <body>
        <video width="400" height="400" poster="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574066857005&di=
27dc7334bc80c4336d3443e8ecde3160&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F17%2F02%2F06%2Fed0c0ddc6271b0717ca64ffdf847eab6.jpg" controls>
            <source src="https://www.w3school.com.cn/i/movie.mp4" type="video/mp4">
            <source src="https://www.w3school.com.cn/i/movie.mp4" type="video/ogg">
        </video>
    </body>

</html>

補(bǔ)充：有時(shí)會(huì)出現(xiàn)視頻封面無(wú)法鋪滿的情況，需要使用object-fit屬性鋪滿整個(gè)屏幕

今天小編就“在前端中怎么使用video poster屬性設(shè)置視頻封面？”這個(gè)問(wèn)題提供了上面這些相關(guān)內(nèi)容分享，更多有關(guān)于這方面的相關(guān)內(nèi)容我們都可以在W3Cschool中進(jìn)行了解更多的相關(guān)知識(shí)！


HTML5

0 人點(diǎn)贊