文章目錄

一、問題

1.默認(rèn)播放按鍵不好看

2.設(shè)置自定義封面圖

二、思路

1.使用div把video標(biāo)簽蓋住

2.div中顯示自定義的海報圖片與按鈕

三、步驟分解

1.海報圖片作為div的背景

2.插入自定義播放圖標(biāo)

3.把div覆蓋到video標(biāo)簽上

4.觸發(fā)播放方法

一、問題

1.默認(rèn)播放按鍵不好看

2.設(shè)置自定義封面圖

二、思路

1.使用div把video標(biāo)簽蓋住

2.div中顯示自定義的海報圖片與按鈕

三、步驟分解

1.海報圖片作為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

效果

豎圖：

橫圖：

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

效果

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

4.觸發(fā)播放方法

html

js

var video = document.getElementById("video");

function play(){

document.getElementById("poster").style.display = "none";

video.play();

}

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

總結(jié)：關(guān)鍵的還是 ：

background-size: contain;

background-repeat: no-repeat;

background-position: center;;

總結(jié)

以上是生活随笔為你收集整理的html5背景图片上放按钮,html5自定义video标签的海报与播放按钮的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。