Вставьте YouTube iframe после загрузки страницы.

У меня есть основное видео YouTube и некоторые связанные видео внизу. Видео YouTube загружается из параметра имени видеоизображения в моем URL-адресе. Если имя видео существует, YouTube iframe загружается при загрузке страницы, но если имя видео не существует, YT iframe не загружается, пока пользователь не щелкнет связанное видео внизу. Если пользователь нажимает на связанное видео, загружается iframe и используется одна и та же функция onPlayerReady, а onPlayerStateChange следует использовать, когда iframe загружается с начала. Как я могу вставить iframe на странице и использовать ту же самую функцию, которую я использую, когда она была загружена с самого начала. ? player.jsВставьте YouTube iframe после загрузки страницы.

var tag = document.createElement('script'), 
    firstScriptTag = document.getElementsByTagName('script')[0], 
    player; 

    tag.src = "https://www.youtube.com/player_api"; 

    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

function onYouTubePlayerAPIReady() { 
     player = new YT.Player('ytplayer', { 
      height: height, 
      width: width, 
      videoId: yt_id, 
      playerVars: { 
      wmode: "transparent", 
      controls: 0, 
      showinfo: 0, 
      rel: 0, 
      modestbranding: 1, 
      iv_load_policy: 3 //anottations 
      }, 
      events: { 
       'onReady': onPlayerReady, 
       'onStateChange': onPlayerStateChange 
      } 
     }); 
    }; 

function onPlayerReady(event) { 
    //code here 
    //I want to use this code even when the player is loaded after the   page is loaded (when the user clicks a related video at the bottom) 
} 

function onPlayerStateChange(event) { 
    //here too 
}

insert_frame.js

var tag = document.createElement('script'), 
      firstScriptTag = document.getElementsByTagName('script')[0], 
      player; 

     tag.src = "https://www.youtube.com/player_api"; 

     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

     player = new YT.Player('ytplayer', { 
      height: height, 
      width: width, 
      videoId: yt_id, 
      playerVars: { 
      wmode: "transparent", 
      controls: 0, 
      showinfo: 0, 
      rel: 0, 
      modestbranding: 1, 
      iv_load_policy: 3 //anottations 
      }, 
      events: { 
       'onReady': onPlayerReady, 
       'onStateChange': onPlayerStateChange 
      } 
     });

источник

2015-02-01 Rexhin Hoxha

Как я могу вставить IFRAME в страницу и использовать ту же функцию, которую я использую в качестве он был загружен с самого начала , ?

Если я правильно понимаю, вы хотите сделать это, потому что некоторые идентификаторы видео на URL могут быть ложными, а плеер iframe не воспроизводит видео.

Ну, вам не нужно вставлять кадр только потому, что существует видеоидентификатор, когда вы используете клик на соответствующем видеоизображении внизу, используйте параметр onError от YouTube Player API.

Данное событие срабатывает при возникновении ошибки в проигрывателе. API передает объект события функции прослушивателя событий. В этом объекте данные укажут целое число, которое идентифицирует тип ошибки , которая произошла. ...

Если идентификатор videoID на url не существует, будет отправлена ошибка. Просто спрячьте плеер, например, и покажите его, когда пользователь нажмет на соответствующее видео внизу.

С помощью этого решения вам нужно только загрузить плеер один и только один раз без вставки кадра в код, даже если идентификатор неправильный. Пример решения.

Я сделал вам небольшой пример с неправильным VideoID:

HTML

<!DOCTYPE html> 
<html> 
<head> 
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <div id="player"></div> 
</body> 
</html>

Javascript

var tag = document.createElement('script'); 

tag.src = "https://www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

// 3. This function creates an <iframe> (and YouTube player) 
// after the API code downloads. 
var player; 

function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
     height: '390', 
     width: '640', 
     videoId: 'l-gQLqv9f4', 
     events: { 
      'onError': onPlayerError, 
      'onReady': onPlayerReady, 
      'onStateChange': onPlayerStateChange 
     } 
    }); 
} 

// 4. The API will call this function when the video player is ready. 
function onPlayerReady(event) { 
    $('#player').show(); 
    event.target.playVideo(); 
} 

// 5. The API calls this function when the player's state changes. 

function onPlayerStateChange(event) { 
    if (event.data == YT.PlayerState.PLAYING) { 
    } 
} 

function stopVideo() { 
    player.stopVideo(); 
} 

function onPlayerError() { 
    console.log("error on the video id. Iframe is hiding"); 
    $('#player').hide(); //or do what you want 

}

Живая демонстрация: http://jsbin.com/mihikiqoma/1/edit?html,js,output

источник

2015-02-01 21:46:14 mpgn

Спасибо за этот хорошо объясненный ответ. Значит, вы хотите загрузить плеер, даже если он ошибается, а затем скрывает его? –

Вставьте YouTube iframe после загрузки страницы.

ответ

Смежные вопросы