带有倒数计时器的播放按钮和带有跳过按钮(例如广告视频)

时间:2018-08-26 07:31:11

标签: javascript html button video skip

我们的学校项目中有一个广告项目。我正在尝试模仿大多数广告视频,在那里您可以在计时器为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%;
}

问题是,当视频甚至没有开始播放时,我也不知道如何在启动时停止计时器。而且我不知道如何同步“播放”按钮和“跳过”按钮,例如我暂停视频,计时器也会暂停。

请帮助

0 个答案:

没有答案