こんばんは、アメブロカスタマイズのわざメーバです。
前回と今回で、YouTube JavaScript Player APIを使って、アメブロのフリープラグインに貼り付けたYouTube動画を自動操作する方法をご紹介しています。
何のことか分からない方は、とりあえずYouTube動画を貼り付けて操作(自動再生・音量調節など)する方法 1の方もご覧下さい。
最初に断っておきますが、今回の記事は前回からの続きですので、今回の分だけではフリープラグイン内でエラーが発生するだけで、有用なことは何も起こりませんのでご注意ください。
まず、前回の記事で、『y001』と『y002』という名前をつけてYouTubeの動画を二つ貼り付けましたがよろしいでしょうか？
今回は、前回貼り付けたYouTube動画の自動操作です。
ここでは、例として動画『y001』の音量を25％にして、『y002』の音量は0％(消音・ミュート)にしてから自動で再生をスタートするようにします。
つまり音量調節と自動再生の方法をご紹介しますが、多少JavaScriptの知識のある方でしたら、上に紹介したAPIリファレンスを参考に他にもいろいろ応用していただけると思います。
では、やってみましょう。
今回ももちろん、『フリープラグインを使用』します。
まずは、動画『y001』の音量を25％にします。
<script>
youtubeDo('y001', function(){
youtubes['y001'].setVolume(25); /* y001の音量25％ */
});
</script>
次に、『y002』の音量を0％(消音・ミュート)にしてから自動で再生をスタートするようにします。
<script>
youtubeDo('y002', function(){
youtubes['y002'].setVolume(0); /* y002の音量0％ */
youtubes['y002'].playVideo(); /* y002を再生 */
});
</script>
何となくお分かりいただけますでしょうか？
<script>
youtubeDo('動画の名前(ID)', function(){
処理;
処理;
・・・
});
</script>
ちょっと専門的になりますが、実は、YouTube動画をこの方法で自動操作しようとした場合、動画が使える状態になるまで待つという処理が必要になるのですが、この書き方をすることで、'動画の名前(ID)'で指定された動画が使えるようになるまで待ってから処理を実行するように作ってあります。
ちなみに、処理には、JavaScriptのコードが入りますが、YouTube動画の音量調節をしたい場合は、
youtubes['動画の名前(ID)'].setVolume(音量);
となります。
音量には0から100までの数値が入り、0が消音、100が最大音量となっています。
また、YouTube動画を自動再生したい場合は、
youtubes['動画の名前(ID)'].playVideo();
です。
初心者の方、JavaScriptが全く分からない方にはちょっと難しいかもしれませんが、今回取り上げた操作に関してはコピペか、少しの修正でできると思いますので、よろしければチャレンジしてみてください。
なお、今回ご紹介した方法は、IE7、IE8、Firefox3.6、Chrome6.0、Safari4(何れもWindows版)で動作を確認しています。