サムネイル画像をタッチしたら動画を再生
サンプル1は特定の動画を再生するだけのシンプルなものでした。これではあまり面白くありませんので、複数の動画のサムネイルをページ上に表示し、タップ操作で選択された動画を再生するように変更します。
まず、動画のサムネイル画像を用意します。サムネイル画像は以下のようにimg要素で指定します。このとき、プログラムの処理を簡単にするために、img要素のtitle属性に再生する動画のファイル名を指定しておきます。
<div id="thumb"> <img src="thumb/atera.jpg" title="atera.mov"> <img src="thumb/fireworks.jpg" title="fireworks.mov"> ： </div>
この方法はHTML側で再生する動画を指定できるので、スクリプトを修正せずに済みます。ちなみに、iPhone/iPadにはマウスがないので、title属性にファイル名を記述してもツールチップは表示されません。
次に、サムネイル画像がタップされたときの処理を作ります。getElementById()でサムネイル画像全体を囲んでいるdiv要素を取得します。
var base = document.getElementById("thumb");
続いて、取得したdiv要素内にあるimg要素をgetElementsByTagName("img")を使ってピックアップします。imgタグだけを入れた配列が返されますので、あとは配列の数だけイベントを設定します。今回はclickイベントを設定していますが、touchstartイベントを設定しても問題はありません。
サムネイル画像がタップされたらthis.titleとしてimg要素のtitle属性の内容を読み出します。読み出したファイル名をNKVideoPlayerオブジェクトのopenFileName()メソッドの引数に指定すればできあがりです。
ここまでをまとめたのがサンプル2です。NimbleKitはiOSの回転機能に対応していませんが、動画の場合はiPhoneを横向きにすると自動的に回転して再生されます。
■サンプル2
<html> <head> <meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style> body { margin-left: 30px; margin-top: 20px; } </style> <script type="text/javascript" src="NKit.js"></script> </head> <body> <div id="thumb"> <img src="thumb/atera.jpg" title="atera.mov"> <img src="thumb/fireworks.jpg" title="fireworks.mov"> <img src="thumb/matsumoto.jpg" title="matsumoto.mov"> <img src="thumb/misyakaike.jpg" title="misyakaike.mov"> <img src="thumb/ono.jpg" title="ono.mov"> <img src="thumb/stone.jpg" title="stone.mov"> <img src="thumb/train.jpg" title="train.mov"> <img src="thumb/tsutsuji.jpg" title="tsutsuji.mov"> </div> <script> var base = document.getElementById("thumb"); var imgList = base.getElementsByTagName("img"); for(var i=0; i<imgList </body> </html>
