1、需求
- 视频无限循环且无缝衔接,设置视频为未播放状态。
- 鼠标进入,定时器关闭;鼠标离开,定时器开启。
- 点击视频后,播放按钮消失,视频开始播放。
- 点击播放的视频后,视频暂停播放,播放按钮出现。
2、效果
3、代码
html代码:
<div class="palyBox">
<div class="playList">
<div class="list_div">
<video
class="videoItem"
id="video1"
controls
muted="ture"
src="../视频.mp4"
poster=""
>
<source
type="video/mp4"
/>
</video>
<div class="play-videoBtn" onclick="playPause(video1)">
<span>►</span>
</div>
</div>
<div class="list_div">
<video
class="videoItem"
id="video2"
controls
muted="ture"
src="../视频.mp4"
poster=""
>
<source
type="video/mp4"
/>
</video>
<div class="play-videoBtn" onclick="playPause(video2)">
<span>►</span>
</div>
</div>
<div class="list_div">
<video
class="videoItem"
id="video3"
controls
muted="ture"
src="../视频.mp4"
poster=""
>
<source
type="video/mp4"
/>
</video>
<div class="play-videoBtn" onclick="playPause(video3)">
<span>►</span>
</div>
</div>
<div class="list_div">
<video
class="videoItem"
id="video4"
controls
muted="ture"
src="../视频.mp4"
poster=""
>
<source
type="video/mp4"
/>
</video>
<div class="play-videoBtn" onclick="playPause(video4)">
<span>►</span>
</div>
</div>
<div class="list_div">
<video
class="videoItem"
id="video5"
controls
muted="ture"
src="../视频.mp4"
poster=""
>
<source
type="video/mp4"
/>
</video>
<div class="play-videoBtn" onclick="playPause(video5)">
<span>►</span>
</div>
</div>
<div class="list_div">
<video
class="videoItem six_div"
id="video6"
controls
muted="ture"
src="../视频.mp4"
poster=""
>
<source
type="video/mp4"
/>
</video>
<div class="play-videoBtn" onclick="playPause(video6)">
<span>►</span>
</div>
</div>
</div>
</div>
css代码:
/* 隐藏视频默认的播放控件 */
video::-webkit-media-controls-panel {
display: none !important;
}
.palyBox {
width: 100%;
overflow: hidden;
position: relative;
}
.playList {
display: flex;
position: absolute;
left: 0px;
}
.list_div {
position: relative;
}
.playList .videoItem {
display: flex;
justify-content: center;
align-items: center;
margin-left: 2px;
margin-right: 2px;
}
/* 隐藏视频默认的播放控件 */
video::-webkit-media-controls-panel {
display: none !important;
}
/* 自定义播放按钮的样式 */
.play-videoBtn {
position: absolute;
width: 100%;
height: 100%;
background-color: transparent;
z-index: 2;
left: 0;
top: 0;
}
.play-videoBtn span {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background-color: #000;
color: #fff;
text-align: center;
line-height: 50px;
border-radius: 25px;
cursor: pointer;
user-select: none;
z-index: 1;
}
/* 隐藏视频标签,只显示自定义播放按钮 */
video {
position: relative;
}
@media screen and (max-width: 750px) {
.palyBox {
height: 150px;
}
.playList .videoItem {
width: 200px;
height: 150px;
}
}
@media screen and (min-width: 751px) {
.palyBox {
height: 200px;
}
.playList .videoItem {
width: 360px;
height: 200px;
}
}
js代码: