时间戳

首页 > 解决方案 > 单击按钮将背景视频（环境视频）转换为可播放的视频

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

问题描述

我利用 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 （点击英雄上的播放按钮，视频重置并从一开始就使用底部的控件播放）。

标签： javascriptjqueryhtmlyoutube-api

解决方案

我使用了另一个 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 APIfor 视频循环，您需要添加到 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>

推荐阅读