alt

iPhone、Androidなどのスマートフォンサイトで動画コンテンツを提供するとなると
真っ先に思いつくのがHTML5の＜video＞タグですよね。

但し、OSやバージョンによって以下の要素がバラバラです。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
＜video＞タグのサポート。（Androidは2.0～）
H.264、OGG、WebMなどのビデオコーデック。
再生可能な解像度、ビットレート、fpsの規定。
※コーデックは＜source＞タグで全部指定すれば大丈夫。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

iPhone、Android、Windows Phone、各種タブレットのブラウザに対応させるだけでもひと苦労ですね。。
実装手段としてHTML5 videoのサポート状況に応じてFlashのフォールバックを利用する
動画再生ライブラリもありますが、まずはYoutubeを使った実験をば。
※動画再生ライブラリを使うやり方は次回書きます。


～なぜYoutubeか～
・海外のスマートフォンサイトでも動画再生はYoutubeを活用しているところが多い。
・HTML5の＜video＞タグに対応している。
・m.youtube.comがAndroid、BlackBerry、iPhone、Nokia S60、Windows Mobileの各OSに対応している。

～メリットとして～
動画を置くインフラ（帯域・サーバー）、ビデオエンコード、ユーザー環境による分岐処理をすべてYoutube側に任せてしまえる。
（動画アップするとmp4とwebmとflvにそれぞれ高・中・低画質でエンコードしてくれているみたい）
アノテーションやキャプション・字幕もつけられる。インサイト機能もある。
外部サービスを使う分、公開範囲などはYoutubeマナーに縛られてしまう。

プライバシー設定：
・公開
・限定公開（リンクを知っている人のみ再生可能）
・非公開（再生するにはログインが必要）
※コメントや評価の許可・不許可設定も可能




【埋め込み方式でやる場合】
アップした動画の埋め込みコードを自サイトに貼り付けます。
昨年、埋め込みコードの仕様が＜object＞から＜iframe＞に変わりましたが、
iOSの3.x、Safari4.xの下位バージョンでiframeが正常に機能しない例もあるので
「以前の埋め込みコードを使用する」をチェックして＜object＞タグを使った方が安全かもしれません。
但し、Googleブログには
「iframe埋め込み方式対応により、閲覧者の環境に応じてFlash版とHTML5版を自動的に選択して表示することが可能になった」
と書いてあるので、iOS以外はiframe方式を使うべきかも。

<iframe width="320" height="270" src="http://www.youtube.com/embed/Y4-dqqLUjDo?rel=0" frameborder="0" allowfullscreen></iframe>

<script>

//Load player api asynchronously.

var tag = document.createElement('script');

tag.src = "http://www.youtube.com/player_api";

var firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

function onYouTubePlayerAPIReady() {

    player = new YT.Player('player', {

      height: '270',

      width: '320',

      videoId: 'Y4-dqqLUjDo', 

      events: { 

        'onReady': onPlayerReady, 

        'onStateChange': onPlayerStateChange 

      }

    });

}

function onPlayerReady(evt) {

}

function onPlayerStateChange(evt) {

}

function stopVideo() {

}

</script>