html5背景图片上放按钮,html5自定义video标签的海报与播放按钮
文章目錄
一、問(wèn)題
1.默認(rèn)播放按鍵不好看
2.設(shè)置自定義封面圖
二、思路
1.使用div把video標(biāo)簽蓋住
2.div中顯示自定義的海報(bào)圖片與按鈕
三、步驟分解
1.海報(bào)圖片作為div的背景
2.插入自定義播放圖標(biāo)
3.把div覆蓋到video標(biāo)簽上
4.觸發(fā)播放方法
一、問(wèn)題
1.默認(rèn)播放按鍵不好看
2.設(shè)置自定義封面圖
二、思路
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
效果
豎圖：
橫圖：
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标签的海报与播放按钮的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： html中源文件回车效果无效,网页制作使
- 下一篇： 计算机专业都学什么科,大学本科计算机专业