Кнопка воспроизведения с таймером обратного отсчета с кнопкой пропуска, как рекламные видеоролики - PullRequest
Новая
       35

Кнопка воспроизведения с таймером обратного отсчета с кнопкой пропуска, как рекламные видеоролики

0 голосов
/ 26 августа 2018

у нас есть рекламный проект в нашем школьном проекте.И я пытаюсь подражать большинству рекламных видео там, где вы можете воспроизвести рекламное видео с помощью кнопки «Пропустить», когда таймер выключится 0.

Вот мой пример https://jsfiddle.net/aLq4mt69/12/

.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%;
}
<div class="video-wrapper">
    <video class="video" id="bVideo" >
      <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
    </video>
    <div id="playButton" class="playButton" onclick="playPause()"></div>
  </div>
  
	<div class="content">
		<div>
				<a href="" id="Skip" class="button">Skip</a>
		</div>
	</div>
  
  
  <script>
  var adVideo = document.getElementById("bVideo");
var SkipButton = document.getElementById("Skip");
var counter = 15;
var newElement = document.createElement("p");
newElement.innerHTML = "You can skip in 15 seconds.";
var id;

SkipButton.parentNode.replaceChild(newElement, SkipButton);

id = setInterval(function() {
    counter--;
    if(counter < 1) {
        newElement.parentNode.replaceChild(SkipButton, newElement);
        clearInterval(id);
    } else {
        newElement.innerHTML = "You can skip in " + counter.toString() + " seconds.";
    }
}, 1000);

/*------------Play Button---------------*/
function playPause() {
  var el = document.getElementById("playButton");
  if (adVideo.paused) {
    adVideo.play();
    el.className ="";
  } else {
  
    adVideo.pause();
    el.className = "playButton";
  }
}

adVideo.addEventListener("click", playPause, false);
  </script>

Проблема в том, что я не знаю, как остановить таймер при запуске, когда видео даже не запускается.И я не знаю, как синхронизировать кнопку «Воспроизведение» и кнопку «Пропустить», как, например, я приостанавливаю видео, и таймер тоже останавливается.

Пожалуйста, помогите

...