YouTubeプレーヤーAPIをjQueryで扱う

2015.04.04

YouTubeプレーヤーAPIでプレーヤーを埋め込み、$(function)内で再生をしようとした時に、少しうまくいかない部分があったので対応方法をメモしておきます。

サンプルコード

$(function) 内で再生を実行させたかったので、以下のようにしてみました。

HTML

1
<div id="sample"></div>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
var ytArea = 'sample';
var ytID = '1_n_k5nNA3A';
var ytWidth = 640;
var ytHeight = 390;
 
function onYouTubeIframeAPIReady() {
    ytPlayer = new YT.Player(ytArea, {
        height: ytHeight,
        width: ytWidth,
        videoId: ytID
    });
}
 
$(function() {
    ytPlayer.playVideo();
});

YouTubeプレーヤーAPIをjQueryで扱うデモページ1
$(function)内で別の処理を行ってからYouTubeを再生させたかったのですが、YouTubeが読み込まれる前にytPlayer.playVideo(); を実行しているため、ytPlayer is not definedとエラーが出てしまいます。
　

サンプルコード

YouTubeの読み込みが完了してから、ytPlayer.playVideo(); を実行するようにして対応しました。

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
var ytArea = 'sample';
var ytID = '1_n_k5nNA3A';
var ytWidth = 640;
var ytHeight = 390;
 
function onYouTubeIframeAPIReady() {
    ytPlayer = new YT.Player(ytArea, {
        height: ytHeight,
        width: ytWidth,
        videoId: ytID,
        events: {
            'onReady': onPlayerReady
        }
    });
}
 
var ytReady = false;
function onPlayerReady(e) {
    ytReady = true;
}
 
$(function() {
    function ytCheck() {
        if(ytReady) {
            ytPlayer.playVideo();
        } else {
            setTimeout(ytCheck, 200);
        }
    }
    ytCheck();
});

YouTubeプレーヤーAPIをjQueryで扱うデモページ2
　

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年4月
日 月 火 水 木 金 土
 12345
6789101112
13141516171819
20212223242526
27282930