Youtube動画 HPに埋め込み 消音（ミュート）で自動再生するには
Youtubeの動画をただ、ホームページに埋め込むなら
発行されるコードをコピーして、貼り付けるだけ。
追加のパラメーターでコントロールができる。
上記で、できない一つとして初期の段階での音量コントロール。
やりたいのは、消音（ミュート）で自動再生。
検索していたら「swfobject.js」を使えば実現できることまで
分かったが、設置例が見つからず、長く探して、
ようやく見つかりました。
http://blog.digital-assist.net/?p=90
とても参考になりました。※参考というか、コードをコピーさせていただいただきました
本当にありがとうございます。
ヘッドタグで利用する「再生の制御とプレーヤーの設定」は
下記のパラメーターでコントロールできるよう。
http://code.google.com/intl/ja/apis/youtube/js_api_reference.html#Operations
サイトが無くなってしまうと困るので下記にメモとして
残しておきます。
【以下メモ】
いつもは、youtubeやustreamいって埋め込みコードひろってくるだけの安易な運用をしてるんですが、（変に手間かけてもしょうがないし）、ちょっと複雑な与件がでてきたのでYouTube JavaScript Player API リファレンスと格闘しながらなんとか埋め込んでみました。
ustreamの場合も含めてまとめてみます。
■やりたいこと
・表示サイズが小さいので、youtubeのコントロールバーを非表示にしたい
・ページのアクセントとしての使用なのでミュートした状態にしたい
・上記同様の理由で自動で再生させたい
さっそくやっていきます。
いろいろすったもんだのあげく、今回の与件は埋め込みプレイヤーのパラメータ設定では
できそうにないので、jsのAPIとswfobjectで実装します。
まずお約束ですが、swfobjectをダウンロードしてきます。
サンプルをみるとバージョン2.1を使ってるみたいなんだけど、
お客さんのサーバにすでにあったバージョン2.0でも動きました。たぶん最新の2.2でも問題なく動くと思います。
ヘッドタグの中身はこんなかんじです。
ボディタグの方はこんな
簡単にコードを解説（といえるほど理解してないけど・・）
ボディの方にある
swfobject.embedSWF(“http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=player1&autoplay=1
って部分で、apiplayerを呼び出してあげます。
詳細はAPIのリファレンスにある以下のとおり
JavaScript API を有効にするには、制御するプレーヤーの URL で、URL パラメータ enablejsapi=1 を渡す必要があります。たとえば、SWF を埋め込むには、次のように URL を記述します。
また、playerapiid パラメータを渡すこともできます。このパラメータは、onYouTubePlayerReady コールバックを呼び出すときにプレーヤーを指定します。playerapiid として渡された値は、最初の引数として onYouTubePlayerReady に渡されます。
version=3 パラメータを追加すると、AS3 クロムレス プレーヤーをリクエストできます。
クロムレスプレーヤーってなに？なんですが、”JavaScript を使用してカスタムのコントロールを作成する場合は、クロムレス プレーヤーをページに読み込むこともできます”ということなんで
カスタムプレイヤーということなんでしょう（よくわからん）
結果的にこの設定をしたらコントロールバーが表示されなくなったので与件完了。基本動けばよい。
であとは、埋め込むビデオをvideo_idパラメータにセットしてます。
自動再生させる必要があったので、autoplay=1を追加しました。
続いてヘッドタグ、
リファレンスにあるように、コールバック関数 onYouTubePlayerReadyを設定して、 playerapiidを引数として渡します。
同じくリファレンスにこうあるので
プレーヤー API メソッドを呼び出すには、まず制御するプレーヤー オブジェクトへの参照を取得する必要があります。この参照は、object タグ、または SWFObject を使用してプレーヤー SWF を埋め込んでいる場合はプレーヤー SWF を組み込んでいる embed タグで getElementById() を呼び出すと取得できます。
swfobjectであらかじめ渡しておいたidに対して設定をしていきます。
といっても今回はミュートさせるだけなので setVolume(0);を設定しただけです。
ustでも、コントロールバーを表示とかしたかったしミュートもさせたかったんですが、どうやらできそうにないので（できるのだろうか？）
flashvarsにちょっと設定を加えて自動再生しない形にしました。
こんなかんじ
YouTube ActionScript Player API の関数についてのデモを紹介します↓
と、あるが、どう使っていいのか残念ながらわからない。
どなたか知っておられたら教えてほしいです。
http://code.google.com/intl/ja/apis/youtube/youtube_player_demo.html?playerType=embedded&playerVersion=as3
発行されるコードをコピーして、貼り付けるだけ。
追加のパラメーターでコントロールができる。
上記で、できない一つとして初期の段階での音量コントロール。
やりたいのは、消音（ミュート）で自動再生。
検索していたら「swfobject.js」を使えば実現できることまで
分かったが、設置例が見つからず、長く探して、
ようやく見つかりました。
http://blog.digital-assist.net/?p=90
とても参考になりました。※参考というか、コードをコピーさせていただいただきました
本当にありがとうございます。
ヘッドタグで利用する「再生の制御とプレーヤーの設定」は
下記のパラメーターでコントロールできるよう。
http://code.google.com/intl/ja/apis/youtube/js_api_reference.html#Operations
サイトが無くなってしまうと困るので下記にメモとして
残しておきます。
【以下メモ】
いつもは、youtubeやustreamいって埋め込みコードひろってくるだけの安易な運用をしてるんですが、（変に手間かけてもしょうがないし）、ちょっと複雑な与件がでてきたのでYouTube JavaScript Player API リファレンスと格闘しながらなんとか埋め込んでみました。
ustreamの場合も含めてまとめてみます。
■やりたいこと
・表示サイズが小さいので、youtubeのコントロールバーを非表示にしたい
・ページのアクセントとしての使用なのでミュートした状態にしたい
・上記同様の理由で自動で再生させたい
さっそくやっていきます。
いろいろすったもんだのあげく、今回の与件は埋め込みプレイヤーのパラメータ設定では
できそうにないので、jsのAPIとswfobjectで実装します。
まずお約束ですが、swfobjectをダウンロードしてきます。
サンプルをみるとバージョン2.1を使ってるみたいなんだけど、
お客さんのサーバにすでにあったバージョン2.0でも動きました。たぶん最新の2.2でも問題なく動くと思います。
ヘッドタグの中身はこんなかんじです。
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
function onYouTubePlayerReady(playerId) {
if(playerId == "player1"){
player1 = document.getElementById("myplayer1");
play();
}
}
function play() {
if (player1) {
player1.setVolume(0);
}
}
</script>
ボディタグの方はこんな
<div id="apiplayer1"></div>
<script type="text/javascript">
var flashvars = {};
var params = { allowScriptAccess: "always" };
var attributes = { id: "myplayer1" };
swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&version=3&video_id=動画のid&playerapiid=player1&autoplay=1","apiplayer1", "138", "103", "9", "/js/expressInstall.swf", flashvars, params, attributes);
</script>
簡単にコードを解説（といえるほど理解してないけど・・）
ボディの方にある
swfobject.embedSWF(“http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=player1&autoplay=1
って部分で、apiplayerを呼び出してあげます。
詳細はAPIのリファレンスにある以下のとおり
JavaScript API を有効にするには、制御するプレーヤーの URL で、URL パラメータ enablejsapi=1 を渡す必要があります。たとえば、SWF を埋め込むには、次のように URL を記述します。
また、playerapiid パラメータを渡すこともできます。このパラメータは、onYouTubePlayerReady コールバックを呼び出すときにプレーヤーを指定します。playerapiid として渡された値は、最初の引数として onYouTubePlayerReady に渡されます。
version=3 パラメータを追加すると、AS3 クロムレス プレーヤーをリクエストできます。
クロムレスプレーヤーってなに？なんですが、”JavaScript を使用してカスタムのコントロールを作成する場合は、クロムレス プレーヤーをページに読み込むこともできます”ということなんで
カスタムプレイヤーということなんでしょう（よくわからん）
結果的にこの設定をしたらコントロールバーが表示されなくなったので与件完了。基本動けばよい。
であとは、埋め込むビデオをvideo_idパラメータにセットしてます。
自動再生させる必要があったので、autoplay=1を追加しました。
続いてヘッドタグ、
リファレンスにあるように、コールバック関数 onYouTubePlayerReadyを設定して、 playerapiidを引数として渡します。
同じくリファレンスにこうあるので
プレーヤー API メソッドを呼び出すには、まず制御するプレーヤー オブジェクトへの参照を取得する必要があります。この参照は、object タグ、または SWFObject を使用してプレーヤー SWF を埋め込んでいる場合はプレーヤー SWF を組み込んでいる embed タグで getElementById() を呼び出すと取得できます。
swfobjectであらかじめ渡しておいたidに対して設定をしていきます。
といっても今回はミュートさせるだけなので setVolume(0);を設定しただけです。
ustでも、コントロールバーを表示とかしたかったしミュートもさせたかったんですが、どうやらできそうにないので（できるのだろうか？）
flashvarsにちょっと設定を加えて自動再生しない形にしました。
こんなかんじ
<div id="apiplayer2"></div>
<script type="text/javascript">
<!--
var flashvars = {autoplay: "false"};
var params = { allowScriptAccess: "always" };
var attributes = {};
swfobject.embedSWF("http://www.ustream.tv/flash/video/動画のid", "apiplayer2", "138", "103", "9", "/js/expressInstall.swf", flashvars, params, attributes);
//-->
</script>
YouTube ActionScript Player API の関数についてのデモを紹介します↓
と、あるが、どう使っていいのか残念ながらわからない。
どなたか知っておられたら教えてほしいです。
http://code.google.com/intl/ja/apis/youtube/youtube_player_demo.html?playerType=embedded&playerVersion=as3