使用 setTimeout() 延迟 YouTube 出现在屏幕上

Question

我想做的是使用 setTimeout() 将 YouTube 从出现在屏幕上延迟几秒钟直到点击封面。

封面被点击，YouTube 将在 1、3、3、4 秒后出现。

现在的工作方式是，点击封面后，YouTube 会立即出现。

我想用setTimeout()设置点击封面后YouTube出现在屏幕上的时间。

我怎样才能做到这一点？

const load = (function () {
  "use strict";

  function _load(tag) {
    return function (url) {
      return new Promise(function (resolve) {
        const element = document.createElement(tag);
        const parent = "body";
        const attr = "src";
        element.onload = function () {
          resolve(url);
        };
        element[attr] = url;
        document[parent].appendChild(element);
      });
    };
  }
  return {
    js: _load("script")
  };
}());

(function manageCover() {
  "use strict";

  function show(el) {
    el.classList.remove("hide");
    document.querySelector(".curtain").classList.add("slide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const thewrap = cover.parentNode.querySelector(".container");
    hide(cover);
    show(thewrap);

  }
  const cover = document.querySelector(".jacket");
  cover.addEventListener("click", coverClickHandler);
}());


const videoPlayer = (function makeVideoPlayer() {
  "use strict";

  function onPlayerReady(event) {
    const player = event.target;
    player.setVolume(100); // percent
  }
  let hasShuffled = false;

  function onPlayerStateChange(event) {
    const player = event.target;
    const shufflePlaylist = true;

    if (!hasShuffled) {
      player.setShuffle(shufflePlaylist);
      player.playVideoAt(0);
      hasShuffled = true;
    }
  }

  function addVideo(video) {

    const playlist = "M7lc1UVf-VE";

    new YT.Player(video, {

      width: 640,
      height: 360,
      host: "https://www.youtube-nocookie.com",
      playerVars: {
        autoplay: 0,
        controls: 1,
        loop: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1,
        playlist
      },
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
      }
    });
  }

  function init(opts) {
    load.js("https://www.youtube.com/player_api").then(function () {
      YT.ready(function () {
        addVideo(opts.video);
      });
    });
  }
  return {
    init
  };
}());

(function iife() {
  "use strict";

  function show(el) {
    el.classList.remove("hide");
  }

  function initPlayer(wrapper) {
    videoPlayer.init({
      video: wrapper.querySelector(".video")
    });
  }

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.parentElement;
    show(wrapper);
    initPlayer(wrapper);
  }

  const cover = document.querySelector(".jacket");
  cover.addEventListener("click", coverClickHandler);
}());

html,
body {
  height: 100%;
  background: #000000;
  padding: 0;
  margin: 0;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
  width: 100%;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
  padding: 8px 8px;
}

.curtain-wrapper {
  min-width: 40%;
  max-width: 640px;
  margin: auto;
}

.curtain-ratio-keeper {
  position: relative;
  padding-top: 56.25%;
}

.curtain {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: 3px solid red;
  box-sizing: border-box;
  border-radius: 25px;
  overflow: hidden;
  background: transparent;
}

.container {}

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all ease 8s;
}

.panel-left {
  left: 0%;
  background-color: rgb(91, 96, 106);
}

.panel-right {
  left: 50%;
  background-color: rgb(229, 211, 211);
}

.curtain.slide .panel-left {
  transform: translateX(-100%);
}

.curtain.slide .panel-right {
  transform: translateX(100%);
}

.video-wrapper {
  min-width: 40%;
  max-width: 640px;
  margin: auto;
}

.video-ratio-keeper {
  position: relative;
  padding-top: 56.25%;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.jacket {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  margin: auto;
  cursor: pointer;
  border-radius: 25px;
}

.play {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  min-width: 70px;
  min-height: 70px;
  max-width: 30%;
  max-height: 30%;
  fill: red;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  cursor: pointer;
}

.wrap {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 25px;
}

.wrap,
.jacket {
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
}

.wrap iframe {
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
}

.hide {
  display: none;
}

<div class="outer">
  <div class="tcell">
    <div class="curtain-wrapper">
      <div class="curtain-ratio-keeper">
        <div class="curtain">
          <div class="container">
          </div>
          <div class="video-wrapper">
            <div class="video-ratio-keeper">
              <div class="wrap">
                <div class="video video-frame">
                </div>
              </div>
            </div>
          </div>
          <div class="panel-left">
          </div>
          <div class="panel-right">
          </div>
          <div class="jacket" title="Play" style="width:22%; height:auto;">
            <svg class="play" width="100%" height="100%" viewBox="0 0 64 64">
              <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
                        M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以在 initPlayer 函数中添加您的 setTimout，例如

function initPlayer(wrapper) {
  setTimeout(function() {
    videoPlayer.init({
      video: wrapper.querySelector(".video")
    }
  )}, 4000);
}

使用 setTimeout() 延迟 YouTube 出现在屏幕上

Using setTimeout() to delay YouTube from appearing on the screen

javascript

html

css

youtube-api

settimeout