App下載

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

一級退堂鼓選手 2021-08-16 10:00:43 瀏覽數(shù) (5316)
反饋

我們在平常中在使用不同的視頻app的時候打開一個視頻，在點擊播放之前會看到一張封面圖，點擊之后封面消失，隨即播放視頻。那么今天我們就來講講有關(guān)于：“在前端中怎么使用video poster屬性設(shè)置視頻封面？”這個問題的相關(guān)解決方法！

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

poster 屬性規(guī)定視頻下載時顯示的圖像或用戶點擊播放按鈕前顯示的圖像。如未設(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>

補充：有時會出現(xiàn)視頻封面無法鋪滿的情況，需要使用object-fit屬性鋪滿整個屏幕

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


HTML5

0 人點贊