App下載

怎么通過html5自定義video標(biāo)簽的海報(bào)與播放按鈕功能？代碼詳解！

幼稚園新童鞋 2021-08-10 15:00:36 瀏覽數(shù) (3275)
反饋

今天小編和大家分享有關(guān)于：“怎么通過html5自定義video標(biāo)簽的海報(bào)與播放按鈕功能？”這個(gè)問題的相關(guān)解決方法希望對(duì)大家這方面的學(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();
}

最終效果

這樣就達(dá)到了之前的目的

總結(jié)：關(guān)鍵的還是 ：background-position: center;

那么以上所述是小編給大家介紹的怎么通過html5自定義video標(biāo)簽的海報(bào)與播放按鈕功能？希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。更多的內(nèi)容都可以在W3Cschool網(wǎng)站中進(jìn)行學(xué)習(xí)! 


HTML5

0 人點(diǎn)贊