在按钮单击时将背景视频(环境视频)转换为可播放的视频

Question

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

在页面加载时,环境视频设置为自动播放,没有声音.但是,在div包含它的顶部iframe,我有一个按钮.

点击此按钮,我希望视频重置(从头开始),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 APIfor 静音视频，以便它会循环白化刷新（如果不使用 forYouTube Player API视频循环，您需要添加到 iframe 的 src 中playlist=videoId&loop=1，这将使 iframe 在视频结束时刷新）

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

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

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

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

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":""}', '*')
}