« Android 開発6 (スマートフォンでのFAX) | トップページ | Android 開発8 (スマートフォンでの通話アプリ) »

2012年4月24日 (火)

Android 開発7 (スマートフォンでの動画再生)

スマートフォンでの動画再生について記載します

■Youtubeの利用

今、最も利用されている方法では無いでしょうか?
基本的な設定やブラウザの種類を気にせずに使えるため、
もっとも簡単で、最も安定した再生が可能だと思います。

01.YouTubeサイトへ移動

02.YouTube または Google アカウントでログインする

03.「アップロード」リンクを選択

04.「パソコンからファイルを選択」ボタンを押し動画を選択

05.必要な情報をすべて入力する

06.動画のアップロード完了後、視聴ページへ移動する

07.視聴動画を右クリックし「埋め込みコードをコピー(Copy embed html)」を選択

08.コピーされた内容をhtml に貼り付ける

■Aタグの使用

単純に <A> タグを使用して、動画ファイルへのパスを記述するだけです。

↓動画へのリンク:Aタグ<br>
<A HREF="http://homepage3.nifty.com/t-chiyo/video/sample.mp4">
動画はこちら
</A>

※実行環境によって動作が異なります

  IE9(PC環境):デフォルトの再生アプリより再生
  スマートフォン:実行するアプリを選択して再生

■Videoタグの使用

IE9より使用可能になった <video> タグを使用するとページ内に動画を貼り付けることができます。

↓動画の埋め込み:videoタグ<br>
<video
   controls
   poster="http://homepage3.nifty.com/t-chiyo/video/sample.png"
   src="http://homepage3.nifty.com/t-chiyo/video/sample.mp4"
   width="320" height="240"
   preload="none"
   onclick="this.play();">
     <source src="http://homepage3.nifty.com/t-chiyo/video/sample.mp4">
     <div>動画を再生するには、videoタグをサポートしたブラウザが必要です。</div>
  <img src="./video/sample.png">
</video>

※実行環境によって動作が異なります

  IE9(PC環境):ページ内で再生
  スマートフォン:別の画面へ遷移してから再生
  タブレット端末:ページ内で再生

□IEのブラウザモードとドキュメントモード について

今回のサンプルサイトを作成するにあたり、以下の現象が発生しました。

・他のサイトでは video タグが正常に動作
・私のテストサイトのみ video タグが正常に動作しない

かなりハマリましたが、原因は「ブラウザモード」「ドキュメントモード」にありました。
私の作ったページを表示するとブラウザモードとドキュメントモードが下記のように…

 ブラウザモード:IE9 互換表示(B)
 ドキュメントモード:IE7 標準(M)

はい、IE7で「video」タグなんて使えるはずありません。
(「F12」を押し、開発者ツールからブラウザモードとドキュメントモードの確認ができます)

では、なぜデフォルトで上記のような内容になるのか?調査した結果、下記のMSDNがヒットしました。

Internet Explorer 9 互換表示一覧

簡単に説明すると、ローカルに存在するファイル「iecompatdata.xml」を参照し、存在するサイトは全て IE9 互換表示 にするということです。試しに一覧に載っている「All About」へ行くと確かにそうなってました。

これを回避するには <head>~</head> の間で <meta> タグを使ってIEのバージョンを指定しなければなりません。

例:<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

ちなみにこのファイルは Microsoft が定期更新しているファイルで、リストから自サイトを外すには iepo@microsoft.com に削除依頼メールを送るんだと…

□ライブラリの利用について

ライブラリを利用することでクロスブラウザ、マルチプラットフォーム上での動作が手軽に行えます。

ライブラリ名 説明

jPlayer

HTML5の音声・動画プレーヤーをWebページに埋め込むためのjQueryプラグイン

swfobject.js

FLASH を web ページに埋め込むための JavaScript のライブラリ
※ Flashと代替コンテンツを切り替える

■テストサイト

下記アドレスにテスト用サイトを作成しましたのでご参考に

テスト用サイト

■参考サイト

サイト名 説明

PHP & JavaScript Room

色々情報が掲載されています今回参考にしたのは、「音声・動画配信」メニュー内に存在する、「jPlayerの使い方」と「YouTube動画埋め込みプレーヤーのパラメータ 」です。

秀和システムの公式ブログ

本の紹介ブログのようですが、サンプルがあるため参考になると思います。

« Android 開発6 (スマートフォンでのFAX) | トップページ | Android 開発8 (スマートフォンでの通話アプリ) »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/153605/54542040

この記事へのトラックバック一覧です: Android 開発7 (スマートフォンでの動画再生):

« Android 開発6 (スマートフォンでのFAX) | トップページ | Android 開発8 (スマートフォンでの通話アプリ) »