Не работает JavaScript в браузере

Question

document.addEventListener('DOMContentLoaded', function() {
  var video = document.querySelector(".video");
  var hotbar = document.querySelector(".hotbar");
  var play_pause = document.getElementById("play-pause");

  function togglePlayPause() {
    if (video.paused) {
      play_pause.className = "pause";
      video.play();
    } else {
      play_pause.className = "play";
      video.pause();
    }
  }

  play_pause.onclick = function() {
    togglePlayPause();
  }
}, false);

* {
  margin: 0;
  padding: 0;
}

.play {}

.pause {}

main .container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-wrap: wrap;
  background: #dbdbdb;
}

.content {
  max-width: 1280px;
  position: relative;
  overflow: hidden;
}


/* .content:hover .interface {
    opacity: 1;
    transition: .5s;
} */

.content video {
  width: 100%;
}

.interface {
  //opacity: 0;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.interface button {
  cursor: pointer;
}

.header-controls {
  width: 100%;
  height: 40px;
  background: rgba(0, 0, 0, 0.4);
}

.main-controls {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: flex;
  align-items: center;
}

.main-controls .left,
.right {
  width: 100%;
  height: 100%;
}

.main-controls .center {
  width: 150px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
}

.main-controls .center button {
  width: 30px;
  height: 30px;
  text-align: right;
  font-size: 30px;
  color: #fff;
  background: none;
  outline: none;
  border: none;
}

.footer-controls {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
}

.play-pause {
  margin-left: 5px;
}

.fullscreen {
  margin-right: 5px;
}

.footer-controls button {
  margin: 5px 10px;
  font-size: 15px;
  color: #fff;
  background: none;
  outline: none;
  border: none;
}

.footer-controls .timebar,
.hotbar {
  width: 100%;
  height: 5px;
  border-radius: 5px;
  background: #fff;
}

.footer-controls .hotbar {
  background: #ff6868;
}

.footer-controls span {
  margin: 0 10px;
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <title>Player</title>
  <link rel="stylesheet" href="player.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <main>
    <div class="container">
      <div class="content">
        <video class="video" poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"></video>
        <div class="interface">
          <div class="header-controls"></div>
          <div class="main-controls">
            <div class="left"></div>
            <div class="center">
              <button><i class="fa fa-play"></i></button>
            </div>
            <div class="right"></div>
          </div>
          <div class="footer-controls">
            <div class="play-pause"><button id="play-pause" class="play"><i class="fa fa-play"></i></button></div>
            <div class="timebar">
              <div class="hotbar"></div>
            </div>
            <div class="timer"><span>0:00/3:09</span></div>
            <div class="volume"><button><i class="fa fa-volume-up"></i></button></div>
            <div class="fullscreen"><button><i class="fa fa-arrows-alt"></i></button></div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <scripts src="script.js"></scripts>
</body>

</html>

Нажимать маленькую кнопку play.

P.S. В онлайн-редакторе скрипт срабатывает, а в браузере нет. Использую brackets редактор, все расширения выключены. В чем проблема, почему он не хочет работать в браузере? Использую ОС Ubuntu 18.04. Проверял в двух браузерах Google Chrome и Yandex Browser

БЛОГ НА HUSL

Не работает JavaScript в браузере

Ответы (0 шт):