您好,登錄后才能下訂單哦!
怎么在html5中自定義video標(biāo)簽實(shí)現(xiàn)海報(bào)與播放按鈕功能?很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。
1.默認(rèn)播放按鍵不好看
2.設(shè)置自定義封面圖
以上這兩點(diǎn)都想自定義
1.使用div把video標(biāo)簽蓋住
2.div中顯示自定義的海報(bào)圖片與按鈕
1.海報(bào)圖片作為div的背景
注:無論是橫圖還是豎圖,都希望按原比例顯示在div內(nèi)
css:
.yourDiv{ background-color: black; height:20em; background-image: url('./images/timg.jpg'); background-size: contain; background-repeat: no-repeat; background-position: center; }
html
<div class="yourDiv"></div>
效果
豎圖:
橫圖:
2.插入自定義播放圖標(biāo)
css
.yourDiv { background-color: black; height:20em; background-image: url('./images/timg.jpg'); background-size: contain; background-repeat: no-repeat; background-position: center; display:flex; align-items: center; } .yourDiv img { width:20%; margin-left: 40%; }
html
<div class="yourDiv"> <img src="./images/play.png"> </div>
效果
3.把div覆蓋到video標(biāo)簽上
css
.yourDiv { background-color: black; height:20em; background-image: url('./images/timg.jpg'); background-size: contain; background-repeat: no-repeat; background-position: center; display:flex; align-items: center; position: absolute; top: 0px; left: 0px; width: 100%; } .yourDiv img { width:20%; margin-left: 40%; } .father { background-color: black; width:100%; height:16em; position: relative; }
htm5
<div class="father"> <video id="video" controls="controls" autoplay="autoplay" style="width:100%;height:16em"> <source src="./videos/v1.mp4" type="video/ogg" /> <source src="./videos/v1.mp4" type="video/mp4" /> </video> <div class="yourDiv"> <img src="./images/play.png"> </div> </div>
4.觸發(fā)播放方法
html
<div class="father"> <video id="video" controls="controls" autoplay="autoplay" style="width:100%;height:16em"> <source src="./videos/v1.mp4" type="video/ogg" /> <source src="./videos/v1.mp4" type="video/mp4" /> </video> <div id="poster" class="yourDiv" onclick="play()"> <img src="./images/play.png"> </div> </div>
js
var video = document.getElementById("video"); function play(){ document.getElementById("poster").style.display = "none"; video.play(); }
看完上述內(nèi)容是否對您有幫助呢?如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章,請關(guān)注億速云行業(yè)資訊頻道,感謝您對億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。