iframe/HTML5 APIを使用してYouTube動画を制御するJavaScriptコードのバグを特定できませんでした。YouTube iFrame APIの動作が非一貫性/非決定性
私はメインのドキュメントページ上のデモ・コードに戻った:
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>
これで一貫性のない動作が発生するのは、dropbox:http://dl.dropboxusercontentです。com/u/1035381/abbreviator/youtubetest.html。通常は6秒間の再生(正しい動作ではない)から再生され、時には6秒以上前に再生され、停止せずに再生されます(正しい動作でもありません)。これはWin 7のChrome 30.0.1599.101 m(この日付の時点で「最新」) –
実際のプロジェクトでは、YouTubeが提供するデモコードよりも複雑ですが、 API jsコードはonYouTubeIframeAPIReadyボタンを呼び出します。ページを読み込んだときに正しく表示されることもあります。コードが変更されない場合もあります。これはWin 7、Chrome 30.0.1599.101 m(この日付の時点で「最新」) –