Question

В колледже, в котором я работаю, я пытаюсь получить видео на YouTube для автоматического воспроизведения на баннере веб-страницы. API не загружается каждый раз правильно. Я не уверен, что я мог сделать, чтобы попытаться это исправить.

Я пробовал:

Перемещение добавления сценария youtube API только тогда, когда DOM готов.
Размещение кода сверху и снизу страницы.
Проверка, правильно ли создан объект проигрывателя, и если нет, попытаться воссоздать его, что, как я узнал, нарушает API.

Если я удаляю страницу со всем и просто получаю баннер, видео загружается чаще, но все же не в 100% случаев.

Здесь я предоставил скрипт на странице, которая загружает видео через API YouTube.

Обновление: Из того, что я могу сказать, войдя в консоль, объект проигрывателя не полностью инициализируется. Если он создан неправильно, то вот как выглядит распечатка объекта:

Y {b: null, a: null, h: null, closure_uid_165988549: 1, g: 1, …}

А вот когда все сделано правильно:

Y {b: Wa, a: iframe#ytplayer, h: div#ytplayer, closure_uid_16195269: 1, g: 1, …}

Я ошибся, не найдя videoId. Видео устанавливается каждый раз перед вызовом функции, поэтому это не должно быть проблемой.

<div id="ytplayer"></div>

  <script>
    defer(function() {if(window.mobile === true) { $('#ytplayer').remove(); }});
     var ready;
    // Replace the 'ytplayer' element with an <iframe> and
    // YouTube player after the API code downloads.
    var player;
    // var videoId = 'ZCESafUzSRo';
  function onYouTubeIframeAPIReady() {
      checkFunction();
    }

    function checkFunction() {
      console.log("checkFunction called");
      setYTready(ready);
    }
    function setYTready(ready) {
      console.log("setYT ready called");
      ready = true;
      mtuPlayerCreate(player);
    }

    function mtuPlayerCreate(player) {
      console.log("mtu create called");



      if((player == undefined) && ( document.getElementById("play-yt") != null)) {
    console.log("Creating player");
      player = new YT.Player('ytplayer', {
        height: '52.65%',
        width: '100%',
        playerVars: {
          'controls': 0,
          'showinfo': 0,
          'rel': 0,
          'iv_load_policy': 3
        },
        videoId: videoId,
        events: {
          'onReady': onPlayerReady,
          // Removing the following if loop shouldn't be enabled
          onStateChange: 
          function(e){
            if (e.data === YT.PlayerState.ENDED) {
              player.playVideo(); 
            }
          }
        }
      });

    }
    console.log("player redo below");
    console.log(player);
      if(player.A == false) {
      //setTimeout(function() {location.reload();}, 2000); 
    } else {
      return;
    }
  }


    function onPlayerReady(event) { /* configuring default playing and mute settings */
      console.log("on ready has been called")
      var autoPlay = 1;
      var autoMute = 1;
      if(autoPlay === 1) { event.target.playVideo(); }
      if(document.getElementById('play-yt') && autoPlay === 1) { document.getElementById('play-yt').className = 'pause'; }else if(document.getElementById('play-yt')) { document.getElementById('play-yt').className = 'play'; }
      if(autoMute === 1) { event.target.mute(); }
      if(document.getElementById('mute-yt') && autoMute === 1) { document.getElementById('mute-yt').className = 'mute'; }else if(document.getElementById('mute-yt')) { document.getElementById('mute-yt').className = 'loud'; }
      if(document.getElementById('yt-yt')) { document.getElementById('yt-yt').className = ''; }
    }

    window.onload = function() { /* this handles what happens when the player and its buttons are clicked on */

            document.getElementsByClassName('media-black')[0].onclick=function(e) { 
        if(e.target.id !== 'yt-yt' && e.target.id !== 'mute-yt') {
          if(player.getPlayerState() === -1 || player.getPlayerState() === 2  || player.getPlayerState() === 5) {  
            player.playVideo(); 
            if(document.getElementById('play-yt')) { document.getElementById('play-yt').className = 'pause'; }
            if (window._gaq) _gaq.push(['_trackEvent', 'Wide Video', 'Played', window.location.href]);
          }else{
            player.pauseVideo(); 
            if(document.getElementById('play-yt')) { document.getElementById('play-yt').className = 'play'; }
            if (window._gaq) _gaq.push(['_trackEvent', 'Wide Video', 'Paused', window.location.href]);
          }
        }
        else if(e.target.id === 'yt-yt' && e.target.id !== 'mute-yt') {
          window.open('http://www.youtube.com/watch?v=' + videoId, '_blank');
          player.pauseVideo();
          if(document.getElementById('play-yt') && document.getElementById('play-yt').className === 'pause') { document.getElementById('play-yt').className = 'play'; }
          if (window._gaq) _gaq.push(['_trackEvent', 'Wide Video', 'Went to YouTube', window.location.href]);
        }else{
          if(player.isMuted() || player.getVolume() === 0) { player.unMute(); player.setVolume(100); document.getElementById('mute-yt').className = 'loud'; }else{ player.mute(); document.getElementById('mute-yt').className = 'mute'; }
          if (window._gaq) _gaq.push(['_trackEvent', 'Wide Video', 'Sound Adjusted', window.location.href]);
        }
      };



    }

    //
    //This could be improved, test if it's mobile and load if not instead of loading and then removing if mobile
    //
    // Load the IFrame Player API code asynchronously.
    document.addEventListener("DOMContentLoaded", function(event) { 
      console.log("dom ready!");
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  });
  </script> 
</div>

Что нужно сделать, это:

Загрузить API
Загрузить объект проигрывателя с указанным идентификатором видео
Добавьте фрейм в правильное место
Автозапуск видео.

Это нужно делать каждый раз при загрузке страницы.

Mauricio Arias Olave · Answer 1 · 29 января 2019

Я не уверен, почему вы загружаете iframe-плеер YouTube таким образом, но я сделал это jsfiddle - изменив ваш код - и я получаю работающий iframe YouTube Player.

Это изменения, которые я сделал - вы можете найти больше комментариев в измененном коде:

Я прокомментировал строку mtuPlayerCreate - вы пытаетесь добавить еще один YouTube Iframe?
Добавить функцию onPlayerStateChange для установки функциональности для элементов HTML - возможность управления iframe - "воспроизведение / пауза, (не) отключение звука видео" .
Значение controls было равно 0, я установил его на 1 для проверки правильности управления iframe YouTube, щелкая элементы HTML.

Это код jsfiddle :

// No need for replace the elemnt - YouTube Iframe Player will load in this object and HTML element:
var player;

// This is your videoId "you had it commented".
// it was the video is not available:
//var videoId = 'ZCESafUzSRo';

// Video: "Microsoft Windows Mixed Reality update | October 2018" - by Microsoft Hololens.
var videoId = '00vnln25HBg';

// Check whether iframe is mute.
var isUnMuted = false;

// Here, the YouTube Player API will build the iframe in the "ytplayer" HTML element
// and in the "player" variable.
function onYouTubeIframeAPIReady() {
  player = new YT.Player('ytplayer', {
    height: '52.65%',
    width: '100%',
    playerVars: {
      'controls': 1, 
      'showinfo': 1,
      'rel': 0,
      'iv_load_policy': 3,
      'autoplay': 1,
      'loop': 1,
    },
    videoId: videoId,
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });

  // After loading the iframe, set the "playVideo" onclick event on "playButton" anchor element.
  document.getElementById('play-yt').onclick = function() {
    player.playVideo();
  };

  // Thanks to this answer, here you can check the status of "mute" - I culdn't make it work, in the "onPlayerStateChange" function though.
  // Source: https://stackoverflow.com/a/36436765/4092887
  document.getElementById('mute-yt').innerHTML = 'MUTE';
  document.getElementById('mute-yt').onclick = function() {
    player.mute();
  };

  document.getElementById('yt-yt').innerHTML = 'UNMUTE';
  document.getElementById('yt-yt').onclick = function() {
    player.unMute();
  };

}

function checkFunction() {
  console.log("checkFunction called");
  setYTready(ready);
}

function setYTready(ready) {
  console.log("setYT ready called");
  // Not sure what you're doing here = do you want load another youtube iframe?
  //mtuPlayerCreate(player);
}

function mtuPlayerCreate(player) {
  console.log("mtu create called");



  if ((player == undefined) && (document.getElementById("play-yt") != null)) {


  }
  console.log("player redo below");
  console.log(player);
  if (player.A == false) {
    //setTimeout(function() {location.reload();}, 2000); 
  } else {
    return;
  }
}

/* configuring default playing and mute settings */
/* You only need set here the following line: */
function onPlayerReady(event) {
  event.target.playVideo();
}

/* this handles what happens when the player and its buttons are clicked on */
/* You can do it in this way instead: */
function onPlayerStateChange(e) {
  // Removing the following if loop shouldn't be enabled.
  // This is for emulate "loop" functionality.
  if (e.data === YT.PlayerState.ENDED) {
    player.playVideo();
  }

  // If the video is PLAYING, set the onclick element for pause the video.
  // Once the "playButton" is clicked, the video will be paused.
  if (e.data == YT.PlayerState.PLAYING) {
    document.getElementById('play-yt').innerHTML = 'PAUSE';
    document.getElementById('play-yt').onclick = function() {
      player.pauseVideo();
    };
  }

  // If the video is PAUSED, set the onclick element for pause the video.
  // Once the "playButton" is clicked, the video will resume the video = continue playing the video.
  if (e.data == YT.PlayerState.PAUSED) {
    document.getElementById('play-yt').innerHTML = 'PLAY';
    document.getElementById('play-yt').onclick = function() {
      player.playVideo();
    };
  }

}

//
//This could be improved, test if it's mobile and load if not instead of loading and then removing if mobile
//
// Load the IFrame Player API code asynchronously.
document.addEventListener("DOMContentLoaded", function(event) {
  console.log("dom ready!");
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="ytplayer"></div>

<p>
  <div>
    <span>Control your Youtube Iframe Player:</span>
  </div>

  <div id="play-yt">PLAY</div>
  <div id="mute-yt">MUTE</div>
  <div id="yt-yt">UNMUTE</div>
</p>

API YouTube не загружается постоянно

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

API YouTube не загружается постоянно

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы