現在制作中のサイトで、最初にスプラッシュを入れて、そのあと、Youtubeの動画を再生しようという事をすることになりました。
普通に、swfobjectを使ったりして、YouTube JavaScript Player APIを使えば、
[js]
window.setTimeout(function() { ytplayer.playVideo }, 3000);
[/js]
とかやれば良いのですが、今時iPhone等のFlashが使えない媒体もあるので、できれば、HTML5プレーヤーを使いたいんですよね。しかしYouTubeからHTML5のAPIはたぶん提供されていないようなので、されていたとしても、Flashとの切り替えなども実装するのは正直面倒。というわけで、何とかYouTubeが提供しているiframeでの埋め込みコードを使ってなんとか実現しようと思います。
というわけで、jQueryで書いてみました。無駄にdelayメソッドを使ってみました。何かの要素を表示した後にとか、そういう使い方もできます。
[js]
jQuery(document).ready(function(){
$(this).delay(3000).queue(function(){
$("#mainMovie").html(‘<iframe width="960" height="540" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/ID?autoplay=1"></iframe>’);
$(this).dequeue();
});
});
[/js]
別に、ロードしてから3秒とかなら、
[js]
jQuery(document).ready(function(){
setTimeout(function(){
$("#mainMovie").html(‘<iframe width="960" height="540" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/ID?autoplay=1"></iframe>’);
}, 3000);
});
[/js]
でも全然動きます。むしろこっちの方がベターな気もします。
やってることは、
YouTube 埋め込みプレーヤーのパラメータ:http://code.google.com/intl/ja/apis/youtube/player_parameters.htmlを使って、自動再生するようにしたiframe型の埋め込みプレーヤーを、DOMを書き換えて一定時間後に、読み込み→再生をやらせているだけです。
自動再生させるには、動画のURLの最後に?autoplay=1をつければ良いだけです。
もっとスマートな実装方法が出てくればイイですよね。