我们的学校项目中有一个广告项目。我正在尝试模仿大多数广告视频,在那里您可以在计时器为0时使用“跳过”按钮播放广告视频。
这是我的示例https://jsfiddle.net/aLq4mt69/12/
#navmenu.events {
ul {
list-style-type: none;
list-style-image: none;
li {
display: inline;
}
li a {
background: $p-dark;
margin: 4px;
padding: 5px 20px 5px 20px;
color: white;
}
}
}
#navmenu.events-categories {
ul {
list-style-type: none;
list-style-image: none;
li {
display: inline;
}
li a {
margin: 1px;
padding: 2px 5px 2px 5px;
}
}
}
.video-wrapper {
position: fixed;
right: 0;
bottom: 0;
width: 100%;
min-height: 100%;
}
.video {
position: fixed;
right: 0;
bottom: 0;
width: 100%;
min-height: 100%;
}
.playButton {
border-radius: 100px;
border: 8px solid #fff;
height: 100px;
position: absolute;
width: 100px;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
cursor: pointer;
display: block;
opacity: 0.95;
transition: opacity 150ms;
}
.playButton:before {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 50px;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 0;
left: 0;
right: -10px;
bottom: 0;
margin: auto;
}
.content {
position: fixed;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.button {
background-color: #ddcccc;
border: 1px solid black;
color: black;
font-family: Arial;
font-size: small;
text-decoration: none;
padding: 3px;
position: absolute;
top: 50%;
}
问题是,当视频甚至没有开始播放时,我也不知道如何在启动时停止计时器。而且我不知道如何同步“播放”按钮和“跳过”按钮,例如我暂停视频,计时器也会暂停。
请帮助