0
У меня есть 3 слайдера, каждый из которых имеет 1 видео Youtube.Javascript не работает после обновления страницы - ПОЧЕМУ?
Каждое видео имеет пользовательские кнопки START/STOP javascript.
Мой скрипт отлично работает, когда страница загружается в первый раз. ПОСЛЕ обновления, кнопки javascript больше не работают. Фактически, они не будут работать, пока я не очистю кеш, и часто мне даже нужно перезапустить браузер.
Благодарим за отзыв!
// START STOP YOUTUBE VIDEO
\t // Inject YouTube API script
\t var tag = document.createElement('script');
\t tag.src = "//www.youtube.com/player_api";
\t var firstScriptTag = document.getElementsByTagName('script')[0];
\t firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Set global variable for the player
var playerA;
var playerB;
var playerC;
// this function gets called when API is ready to use
\t function onYouTubePlayerAPIReady() {
\t
\t // create the global player from the specific iframe (#video)
\t
\t // for Slider 1
\t \t playerA = new YT.Player('player1', {
\t \t events: {
\t \t // call this function when player is ready to use
\t \t 'onReady': onPlayerReady
\t \t }
\t \t });
\t // for Slider 2
\t \t playerB = new YT.Player('player2', {
\t \t events: {
\t \t // call this function when player is ready to use
\t \t 'onReady': onPlayerReady
\t \t }
\t \t });
\t // for Slider 3
\t \t playerC = new YT.Player('player3', {
\t \t events: {
\t \t // call this function when player is ready to use
\t \t 'onReady': onPlayerReady
\t \t }
\t \t });
\t
\t };
\t // Bind Events
\t function onPlayerReady(event) {
\t
\t \t // bind Slider 1 events
\t \t var playButton = document.getElementById("VideoPlayBtn1");
\t \t playButton.addEventListener("click", function() {
\t \t playerA.playVideo();
\t \t });
\t \t
\t \t var pauseButton = document.getElementById("VideoPauseBtn1");
\t \t pauseButton.addEventListener("click", function() {
\t \t playerA.pauseVideo();
\t \t });
\t \t // bind Slider 2 events
\t \t
\t \t var playButton = document.getElementById("VideoPlayBtn2");
\t \t playButton.addEventListener("click", function() {
\t \t playerB.playVideo();
\t \t });
\t \t
\t \t var pauseButton = document.getElementById("VideoPauseBtn2");
\t \t pauseButton.addEventListener("click", function() {
\t \t playerB.pauseVideo();
\t \t });
\t \t // bind Slider 3 events
\t \t
\t \t var playButton = document.getElementById("VideoPlayBtn3");
\t \t playButton.addEventListener("click", function() {
\t \t playerB.playVideo();
\t \t });
\t \t
\t \t var pauseButton = document.getElementById("VideoPauseBtn3");
\t \t pauseButton.addEventListener("click", function() {
\t \t playerB.pauseVideo();
\t \t });
\t \t
\t \t };<iframe id="player1" class="VideoA" src="https://www.youtube.com/embed/C0DPdy98e4c?enablejsapi=1&showinfo=0" frameborder="0" allowfullscreen="0"></iframe>
<button id="VideoPlayBtn1" >Play</button></div>
<button id="VideoPauseBtn1">Pause</button></div>
<iframe id="player1" class="VideoA" src="https://www.youtube.com/embed/C0DPdy98e4c?enablejsapi=1&showinfo=0" frameborder="0" allowfullscreen="0"></iframe>
<button id="VideoPlayBtn2" >Play2</button></div>
<button id="VideoPauseBtn2">Pause2</button></div>
<iframe id="player3" class="VideoA" src="https://www.youtube.com/embed/C0DPdy98e4c?enablejsapi=1&showinfo=0" frameborder="0" allowfullscreen="0"></iframe>
<button id="VideoPlayBtn3" >Play3</button></div>
<button id="VideoPauseBtn3">Pause3</button></div>
Ваш фрагмент кода также не работает. –
Хорошо, я решил проблему. Бит «// Inject YouTube API» нужно было поместить в отдельный скрипт и загрузить позже. – James