src/index.html - patch - alexxhub/playerjs

src/index.html
128 строк4 KB
apavlov3rednet
Update index.html
01 мар 2026, 15:03
01 мар 2026, 15:03afeacbe
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Custom Video Player</title>
    <link rel="stylesheet" href="./css/player.css" />
  </head>
  <body>
    <div class="player" data-player>
      <div class="player__video-wrapper">
        <video class="player__video" poster="poster.jpg">
          <source src="video.mp4" type="video/mp4" />
          <source src="video.ogg" type="video/ogg" />
          Ваш браузер не поддерживает HTML5 видео.
        </video>
        <button class="player__big-play" aria-label="Play"></button>
      </div>

      <div class="player__controls">
        <div class="player__controls-row">
          <button class="control-btn js-play" aria-label="Play/Pause"></button>
          <button class="control-btn js-skip-back" aria-label="Back 10 seconds">
            -10
          </button>
          <button
            class="control-btn js-skip-forward"
            aria-label="Forward 10 seconds"
          >
            +10
          </button>

          <div class="time">
            <span class="time__current">0:00</span>
            <span class="time__separator">/</span>
            <span class="time__duration">0:00</span>
          </div>

          <div class="volume">
            <button
              class="control-btn js-mute"
              aria-label="Mute/Unmute"
            ></button>
            <input
              class="volume__range js-volume"
              type="range"
              min="0"
              max="1"
              step="0.05"
              value="1"
            />
          </div>

          <div class="speed js-speed">
            <button
              class="control-btn js-speed-toggle"
              aria-label="Playback speed"
            >
              1x
            </button>
            <div class="speed__menu js-speed-menu">
              <!-- пункты скоростей добавит JS -->
            </div>
          </div>

          <div class="player__share">
            <button class="player__share-btn js-share-current">
              Ссылка с таймкодом
            </button>
            <button class="player__share-btn js-share-clean">
              Ссылка на видео
            </button>
          </div>

          <button
            class="control-btn js-fullscreen"
            aria-label="Fullscreen"
          ></button>
        </div>

        <div class="player__progress">
          <input
            class="player__progress-range js-progress"
            type="range"
            min="0"
            max="100"
            value="0"
          />
          <div class="player__progress-buffer js-buffer"></div>
          <div class="player__segments js-segments"></div>
        </div>
      </div>
    </div>

    <script type="module">
      import { VideoPlayer } from "./src/js/index.js";

      const playerEl = document.querySelector("[data-player]");

      const segments = [
        { start: 0, end: 60, title: "Вступление" },
        { start: 60, end: 210, title: "Основная часть" },
        { start: 210, end: 320, title: "Демонстрация" },
        { start: 320, end: 9999, title: "Итоги" },
      ];

      const player = new VideoPlayer(playerEl, {
        defaultVolume: 1,
        updateUrlByTime: true,
        segments,
      });

      const shareCurrentBtn = document.querySelector(".js-share-current");
      const shareCleanBtn = document.querySelector(".js-share-clean");

      shareCurrentBtn.addEventListener("click", () => {
        const link = player.getShareLinkWithCurrentTime();
        navigator.clipboard?.writeText(link);
        console.log("Ссылка с таймкодом:", link);
      });

      shareCleanBtn.addEventListener("click", () => {
        const link = player.getShareLinkWithoutTime();
        navigator.clipboard?.writeText(link);
        console.log("Ссылка без таймкода:", link);
      });
    </script>
  </body>
</html>