Question

我已经利用YouTube的API创建了iframe。

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

在此按钮上单击，我希望视频重置（从头开始）并带有YouTube控件并打开声音-类似于此处的英雄https://www.hugeinc.com/work。

想知道我将如何处理？会涉及创建另一个iframe吗？

不希望将其作为模式弹出窗口

代码：

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();
}

不希望将其作为模式弹出窗口来执行。类似于此处的功能：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":""}', '*')

要重新启动它，还要使这两行代码正常工作，我在iframe src中添加了&enablejsapi=1

我还使用了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>

单击按钮即可将背景视频（环境视频）转换为可播放的视频

1 个答案: