古籏一浩のJavaScriptラボ ― 第63回

NimbleKitでiPhone用動画アプリを自作しよう

2011年06月30日 11時00分更新

古籏一浩

ツイートする

　HTML/CSS+JavaScriptでiPhone/iPadアプリを開発できるNimbleKit。今回はNimbleKitのNKVideoPlayerを使って動画を再生してみましょう。

　NimbleKitはiOSのさまざまな機能をJavaScriptで呼び出して利用できますが、動画の取り扱いについてはごくシンプルな機能しかありません。そこで今回はNimbleKitとスマートフォン向けのUIフレームワーク「jQTouch」を組み合わせて、iPhoneらしいUIの動画プレーヤーアプリを作ります。

　まずは動画の単純な再生から試してみましょう。

動画ファイルを指定して再生する

　iOSで再生できるメディアタイプはアップルのドキュメントに掲載されています。前回紹介したオーディオファイルの形式と同じページです。

Use Supported iOS Rich Media MIME Types: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html

　このドキュメントから動画に関する情報だけをまとめたのが以下の表です。

種類	拡張子
3GPP,3GPP2メディア	3gp, 3gpp, 3g2, 3gp2
MPEG-4ビデオ	mp4, m4v
QuickTime Movie	mov, qt, mqv

　再生したい動画ファイルを用意し、1つのフォルダにまとめておきます。今回はQuickTime形式／H.264コーデックの動画を用意し、movieフォルダに入れました。

　Xcodeで新規プロジェクトを作成し、動画ファイルが入っているフォルダをプロジェクトウィンドウ内のResourcesフォルダにドラッグ＆ドロップで追加します。

　NimbleKitでは、NKVideoPlayerクラスを使って動画を再生します。newでNKVideoPlayerオブジェクトを生成します。

var video = new NKVideoPlayer();

　次に、openFileName()メソッドで再生する動画ファイルを指定します。引数に動画ファイルのパスを指定します。

video.openFileName("movie/lake.mov");

　openFileName()で指定できるのはアプリのパッケージ内に配置した動画ファイルです。インターネット上に公開されている動画ファイルを開く場合は、別のメソッドを使います（後述します）。

　動画ファイルは以下のようにplay()メソッドで再生します。

video.play();

　再生した動画はstop()メソッドで停止できますが、実際には再生が始まると専用のプレーヤー画面に遷移してしまうので、使用する場面はないでしょう。

　ここまでをまとめたものがサンプル1です。playボタンをクリックするとアプリ内の「lake.mov」ファイルが再生されます。

■サンプル1

<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="NKit.js"></script>
</head>
<body>
<form>
  <input type="button" value="Play" id="playButton">
</form>
<script>
  document.getElementById("playButton").onclick = function(){
    var video = new NKVideoPlayer();
    video.openFileName("movie/lake.mov");
    video.play();
  }
</script>
</body>
</html>

　NimbleKitのNKVideoPlayerクラスを使った動画再生では、iPhone/iPadとも再生専用のプレーヤー画面に切り替わり、動画の再生が終わると元の画面（ページ）にスライドして切り替わります。ファイル名さえ指定すればあとの処理はすべてお任せですので非常に手軽ですが、プレーヤーの細かな挙動は制御できません。

前へ 1 2 3 4 次へ