H5 video poster屬性設(shè)置視頻封面的方法
發(fā)布時(shí)間：2020-05-25 17:07:06 作者：你不知道的巨蟹 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了H5 video poster屬性設(shè)置視頻封面的方法的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
打開一個(gè)視頻，在點(diǎn)擊播放之前會(huì)看到一張封面圖，點(diǎn)擊之后封面消失，隨即播放視頻。
若現(xiàn)有一需求，要你自定義給某個(gè)視頻設(shè)置封面，應(yīng)該怎么做呢？
此時(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)視頻封面無法鋪滿的情況，需要使用object-fit屬性鋪滿整個(gè)屏幕
到此這篇關(guān)于H5 video poster屬性設(shè)置視頻封面的方法的文章就介紹到這了,更多相關(guān)H5設(shè)置視頻封面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
HTML5 和小程序?qū)崿F(xiàn)拍照?qǐng)D片旋轉(zhuǎn)、壓縮和上傳功能
這篇文章主要介紹了HTML5 和小程序?qū)崿F(xiàn)拍照?qǐng)D片旋轉(zhuǎn)、壓縮和上傳功能,需要的朋友可以參考下2018-10-08
HTML5 video 上傳預(yù)覽圖片視頻如何設(shè)置、預(yù)覽視頻某秒的海報(bào)幀
這篇文章主要介紹了HTML5 video 上傳預(yù)覽圖片視頻如何設(shè)置、預(yù)覽視頻某秒的海報(bào)幀問題,需要的朋友可以參考下2018-08-28
HTML5+CSS3實(shí)現(xiàn)無插件拖拽上傳圖片（支持預(yù)覽與批量）
本篇文章主要介紹了HTML5+CSS3實(shí)現(xiàn)無插件拖拽上傳圖片（支持預(yù)覽與批量），現(xiàn)在html5提供了API以及File，F(xiàn)ileReader，XMLHttpRequest等強(qiáng)大的API，為我們拖放實(shí)現(xiàn)上傳提供2017-01-05使用spring mvc+localResizeIMG實(shí)現(xiàn)HTML5端圖片壓縮上傳的功能
這篇文章主要介紹了使用spring mvc+localResizeIMG實(shí)現(xiàn)HTML5端圖片壓縮上傳的功能,非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2016-12-16- 這篇文章主要介紹了Html5上傳圖片 移動(dòng)端、PC端通用代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-08
深入研究HTML5實(shí)現(xiàn)圖片壓縮上傳功能
下面小編就為大家?guī)硪黄钊胙芯縃TML5實(shí)現(xiàn)圖片壓縮上傳功能。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家。也給大家一個(gè)參考，一起跟隨小編過來看看吧2016-03-25html5 canvas移動(dòng)瀏覽器上實(shí)現(xiàn)圖片壓縮上傳
這篇文章主要為大家詳細(xì)介紹了html5 canvas移動(dòng)瀏覽器上實(shí)現(xiàn)圖片壓縮上傳的相關(guān)方法，提出了解決方法，分享了解決問題的思路，感興趣的小伙伴們可以參考一下2016-03-11- 這篇文章主要介紹了基于HTML5實(shí)現(xiàn)多張圖片上傳功能，在單張圖片上傳的基礎(chǔ)上實(shí)現(xiàn)多張圖片上傳功能，感興趣的小伙伴們可以參考一下2016-03-11
這篇文章主要介紹了Html5實(shí)現(xiàn)單張、多張圖片上傳功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-28
