Youtube API有時還沒有準備好

我試圖使用他們的API包含YouTube視頻。然而，有時（真隨機大多數時候它的工作原理），當我點擊我的播放按鈕，我得到一個錯誤：Youtube API有時還沒有準備好

Cannot read property 'playVideo' of undefined

這是我包括API：

var player; 
 

 
function onYouTubeIframeAPIReady() { 
 
    player = new YT.Player('video-intro', { 
 
     width: 100, 
 
     height: 100, 
 
     videoId: '<id>', 
 
     playerVars: { 
 
      color: 'white', 
 
      controls: 0, 
 
      showinfo: 0 
 
     } 
 
    }); 
 
} 
 

 
$(document).ready(function() { 
 
    $('#play-intro').click(function() { 
 
     player.playVideo(); 
 
     $('#video-intro').addClass('showvid'); 
 
    }); 
 
});

#video-intro { 
 
    display: none; 
 
    &.showvid { 
 
    display: block; 
 
    } 
 
}

<head> 
 
    <script src="https://www.youtube.com/iframe_api"></script> 
 
</head> 
 

 
<body> 
 
    <div id="video-intro"></div> 
 
    <a id="play-intro">Play</a> 
 
</body>

來源

2017-07-03 Cake

您需要調用事件才能啓動播放器。在加載之前，您無法播放視頻。不過爲什麼你會得到未定義的錯誤。我已添加事件和功能現在檢查。更好的例子可以在這裏enter link description here

var player; 
 

 
function onYouTubeIframeAPIReady() { 
 
    player = new YT.Player('video-intro', { 
 
     width: 100, 
 
     height: 100, 
 
     videoId: 'TZbUi0FP5AM', //T7Kmc7T-pjY (old, short) 
 
     playerVars: { 
 
      color: 'white', 
 
      controls: 0, 
 
      showinfo: 0 
 
     }, 
 
     events: { 
 
      'onReady': onPlayerReady, 
 
      'onStateChange': onPlayerStateChange 
 
      } 
 
    }); 
 
    
 
} 
 
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(); 
 
}  
 
     
 
     
 
     
 
$(document).ready(function() { 
 
    $('#play-intro').click(function() { 
 
     onYouTubeIframeAPIReady(); 
 
     
 
     $('#video-intro').addClass('showvid'); 
 
    }); 
 
});

#video-intro { 
 
    display: none; 
 
    &.showvid { 
 
    display: block; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<head> 
 
    <script src="https://www.youtube.com/iframe_api"></script> 
 
</head> 
 

 
<body> 
 
    <div id="video-intro"></div> 
 
    <a id="play-intro">Play</a> 
 
</body>

來源

2017-07-03 11:38:30

嗯，不過現在我的視頻開始在後臺播放已經（我聽到這個聲音，持續6秒鐘）。我只希望它按下按鈕時播放。另外，我的「關閉/停止」按鈕不再有效。我的關閉按鈕調用這些函數：player.pauseVideo（）; player.seekTo（0）;.但它給出了停止視頻和pauseVideo不存在的錯誤。 – Cake

你的意思是你想播放器播放/暫停按鈕，或者你需要外部按鈕來播放？ @Cake –

檢查這個例子http://jsfiddle.net/BeUFb/326/ @Cake –

發現不幸的是它不是在SO片段工作。嘗試首先顯示元素（您的CSS不起作用），然後致電player.playVideo()，否則會出現錯誤，如問題所示。

使用下面的CSS展現你的iframe，

#video-intro { 
    display: none; 
} 
#video-intro.showvid { 
    display: block !important; 
}

HTML：

<div id="video-intro"></div> 
<a id="play-intro">Play</a> 
<script src="https://www.youtube.com/iframe_api"></script> 
<script> 
    var player; 

    function onYouTubeIframeAPIReady() { 
    player = new YT.Player('video-intro', { 
     width: 100, 
     height: 100, 
     videoId: 'TZbUi0FP5AM', //T7Kmc7T-pjY (old, short) 
     playerVars: { 
     color: 'white', 
     controls: 0, 
     showinfo: 0 
     } 
    }); 
    } 
    document.getElementById("play-intro").addEventListener("click", function() { 
    document.getElementById('video-intro').className = 'showvid'; 
    player.playVideo(); 
    }); 
</script>

Fiddle

來源

2017-07-03 12:00:20

Youtube API有時還沒有準備好

回答

相關問題