iframe/HTML5 API を介して Youtube 動画を制御するための JavaScript コードのバグを特定するのに苦労していました。
メイン ドキュメント ページのデモ コードに戻りました。
https://developers.google.com/youtube/iframe_api_reference
...そして驚いたことに、そこからデモ コードを使用して何も変更しない場合でも、同じ一貫性のない動作が見られます。
この動作は、このページをロードすると、プレーヤーが自動再生される場合 (コードの意図) とそうでない場合があります。ロードは常に成功します。また、コメントに反して、プレーヤーは 6 秒後に停止することはないようです。
ブレークポイントは、少なくとも問題の一部がonPlayerReady()
常に呼び出されているわけではないことを確認します。でブレークポイントを設定するとonPlayerReady()
、通常は到達せず、プレーヤーが自動再生に成功するまで到達するだけです。
もちろん、この動作は私のインターネット接続の速度と信頼性に依存している可能性があります。これは有線であり、そうでなければかなり高速に見えます. 私はちょうどそれをテストしました -- 24 Mbps で、かなり一貫しているようです。
HTML に表面的な変更を加えると、ロード時にページが自動再生されることがありますが、常にではありません。時々、自動再生または onPlayerReady ブレークポイントにヒットせずに、数秒ごとに 5 回連続してリロードし、6 回目にリロードすると、正常に自動再生されます。
Mac OS 10.8.4 で Chrome v30.0.1599.101 を使用しています。
コードがベータ版で流動的であり、まだ製品レベルではないことはわかっていますが、試してみることができることを望んでいました.
上記のAPIリファレンスページに掲載されたコードが変更された場合に備えて、私が使用しているコードはFYIです。繰り返しますが、私は単一の文字を変更していません。
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
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: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>