javascript - 单击按钮将背景视频(环境视频)变成可播放的视频

Question

我利用 YouTube 的 API 创建了一个 iframe。

在页面加载时，环境视频设置为无声自动播放。但是，在包含 iframe 的 div 之上，我有一个按钮。

单击此按钮后，我希望视频在 YouTube 控件和声音打开的情况下重置(从头开始)- 类似于此处英雄中的那个:https://www.hugeinc.com/work .

想知道我会怎么做吗？它会涉及创建另一个 iframe 吗？

不打算将其作为模态弹出窗口

代码:

//  Load  IFrame Player API 
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Creating iframe
var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    videoId: 'jagIsKF8oVA',
    playerVars: {
      'autoplay': 1,
      'controls': 0,
      'mute': 1,
      'loop': 1,
      'rel': 0
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

//  Calls function
function onPlayerReady(event) {
  event.target.playVideo();
}

var done = false;

function onPlayerStateChange(event) {
  // if (event.data == YT.PlayerState.PLAYING && !done) {
  //   setTimeout(stopVideo, 6000);
  //   done = true;
  // }
}

function stopVideo() {
  // player.stopVideo();
}

<!-- THIS IS IN home.php-->

<button>Click me</button>

<!-- THIS IS IN hero.php -->
<section id="videoHero" class="hero hero--video">
  <div class="hero__container--teaser">
    <!-- Where the iframe is stored-->
    <div id="player"></div>
  </div>
</section>

    

不打算将其作为模态弹出窗口来执行。类似于此处的功能:https://www.hugeinc.com/work (点击英雄上的播放按钮，视频重置并从底部的控件开始播放)。

Answer 1

我使用了另一个 iframe，因为没有更改控件显示的方法，您可以查看 https://developers.google.com/youtube/iframe_api_reference了解更多信息，或者您可以执行 console.log(player) 并检查所有方法。

我用过

contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')

停止 iframe 和

contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*')

为了让这两行代码也能正常工作，我将 &enablejsapi=1 添加到 iframe src

我还为静音视频使用了 YouTube Player API，这样它会循环白屏刷新(如果不使用 YouTube Player API 来循环播放视频)您需要添加到 iframe 的 src playlist=videoId&loop=1 这将使 iframe 在视频结束时刷新)

我没有将 showinfo=0 添加到静音视频中，因为它已被弃用，并将在 2018 年 9 月 25 日之后被忽略。你可以查看https://developers.google.com/youtube/player_parameters#showinfo了解更多信息

最后，代码段不起作用。您需要制作本地 html 文件或从 sinppet iframe 中删除 sandbox 然后再次单击 Run code snippet

var modalTeaser = document.getElementById('hero__container--teaser');
  var btn = document.getElementById("myBtn");
  var iframe = document.getElementById("iframe");
  var span = document.getElementsByClassName("close")[0];
  var videoId = '88xPxULx-II';
  
  var tag = document.createElement('script');
  tag.id = 'iframe-demo';
  tag.src = 'https://www.youtube.com/iframe_api';
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('iframe', {
        videoId: videoId,
        playerVars: {
          'autoplay': 1,
          'controls': 0,
          'mute': 1,
          'loop': 1
        },
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
    });
  }
function onPlayerReady(event) {
  event.target.playVideo();
}
function onPlayerStateChange(event) {
  if (event.data === YT.PlayerState.ENDED) {
      player.playVideo(); 
  }
}

var video = document.createElement('iframe');
video.className = "ply";
modalTeaser.prepend(video);
video.style.display = 'none';

video.src = "https://www.youtube.com/embed/"+videoId+"?enablejsapi=1";
video.setAttribute('frameborder', "0");
btn.onclick = function() {
  iframe.style.display = "none";
  video.style.display = "block";
  btn.style.display = "none";
  span.style.display = "block";
  video.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*')
}

span.onclick = function() {
  iframe.style.display = "block";
  video.style.display = "none";
  btn.style.display = "block";
  span.style.display = "none";
  video.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')
}

body {
  margin: 0;
}
.close{
  z-index: 10;
  position: relative;
  display: none;
}
.ply{
  z-index: 2 !important;
}
#videoHero {
  position: relative;
  padding-bottom: calc((544 / 1280) * 100%);
  background-color: rgba(255, 0, 0, .1)
}

.hero__container--teaser {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}
.modal{
  width: 80%;
  height: 80%;
  background-color: black;
}

/* Having the following on the iframe moves the iframe out of the div (and visual). Not having them puts
the iframe in the div, but not full width not height of #videoHero*/

#player,
iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
}

#myBtn {
  position: absolute;
  top: 80px;
  left: 300px;
  z-index: 10;
  width: 100px;
  height: 100px;
  background-color: red;
}

.modal {
  display: none;
  position: fixed;
  z-index: 122;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.modal-content {
  z-index: 400;
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

<section id="videoHero" class="hero hero--video">
<button type="button" class="close" data-dismiss="modal" aria-               label="Close">
           <span aria-hidden="true">&times;</span>
    </button>
  <div id="hero__container--teaser" class="hero__container--teaser">
    <!-- #player is where the iframe is-->
    <div id="iframe" ></div>
  </div>
  <button id="myBtn">Start video</button>
</section>