Превратите фоновое видео (окружающее видео) в воспроизводимое видео по нажатию кнопки - PullRequest
Новая
       8

Превратите фоновое видео (окружающее видео) в воспроизводимое видео по нажатию кнопки

0 голосов
/ 21 сентября 2018

Я создал iframe, используя API YouTube.

При загрузке страницы окружающее видео настроено на автоматическое воспроизведение без звука.Тем не менее, поверх 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 (кнопка воспроизведения на герое нажата, видео сбрасывается и воспроизводится с самого начала с элементами управления внизу).

1 Ответ

0 голосов
/ 25 сентября 2018

Я использовал другой 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

Кроме того, я использовал YouTube Player API для приглушенного видео, чтобы оно зацикливало обновление при отключении (в случае не использования YouTube Player API для зацикливания видео, вам необходимо добавить в src iframe playlist=videoId&loop=1, и это сделаетОбновление iframe по окончании видеобольше информации

Наконец, фрагмент не работает.Вам нужно создать локальный html-файл или удалить sandbox из iframe sinppet, затем нажать 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>
...