您好,登錄后才能下訂單哦!
小編給大家分享一下如何通過(guò)html5自定義video標(biāo)簽的海報(bào)與播放按鈕功能,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
1.默認(rèn)播放按鍵不好看
2.設(shè)置自定義封面圖
以上這兩點(diǎn)都想自定義
1.使用div把video標(biāo)簽蓋住
2.div中顯示自定義的海報(bào)圖片與按鈕
1.海報(bào)圖片作為div的背景
注:無(wú)論是橫圖還是豎圖,都希望按原比例顯示在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" >
<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" >
<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();
}
看完了這篇文章,相信你對(duì)“如何通過(guò)html5自定義video標(biāo)簽的海報(bào)與播放按鈕功能”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。