H5 video poster屬性——設置視頻封面

時間 2019-11-18

標籤 h5 video poster 屬性設置視頻封面简体版

原文原文鏈接

　　打開一個視頻，在點擊播放以前會看到一張封面圖，點擊以後封面消失，隨即播放視頻。html

　若現有一需求，要你自定義給某個視頻設置封面，應該怎麼作呢？ide

　此時可以使用H5 video提供的poster屬性便可輕鬆實現，post

　 poster 屬性規定視頻下載時顯示的圖像或用戶點擊播放按鈕前顯示的圖像。如未設置該屬性，則使用視頻的第一幀代替ui

　 Demospa

<!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>

　　補充：有時會出現視頻封面沒法鋪滿的狀況，須要使用object-fit屬性鋪滿整個屏幕code

1. h5視頻video
2. H5視頻------＜/video＞
3. HTML5 雜談 Video 元素的poster屬性
4. HTML5 屬性視頻video 音頻audio
5. h5視頻標籤 video
6. h5 的video視頻控件
7. 視頻 (Video) - 屬性 (Properties) - 比特率 (Bitrate)
8. h5-audio/video標籤
9. H5 video
10. h5 audio 和 video
更多相關文章...
• MySQL AS：設置別名 - MySQL教程
• C# 封裝 - C#教程
• IntelliJ IDEA代碼格式化設置
• JDK13 GA發佈：5大特性解讀

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。