App Inventor を使い始めた時に、ちょっと苦労したのが情報の少なさ。MITホームページのドキュメントは、コンポーネントとブロックの機能は記述してあるが、どう使うかが書いてない。せめてサンプルあれば・・・
ということで、簡単なサンプルを紹介します。
今回は、メディアグループのVideoPlayer(動画プレイヤー)コンポーネントの利用例の応用編です。
アプリの動作
作成したアプリはこんな感じです。プレイリストの一番上の動画を再生中です。
基礎編からの変更点は
1.再生/ポーズ ボタンに統合するなど、見た目と操作性の改善
2.ファイル名の文字化け解消
3.再生時間の表示、Slide(スライド)で、プログレッシブバーを表示、再生位置の指定可能に
4.動画のリスト作成、保存・呼び出し機能
実際の操作は、後述の方法でダウンロードして試してください。
※テストで使用した動画は、Pixabayの無料サンプルを利用しました(https://pixabay.com/ja/service/license-summary/)
使ったコンポーネント
必要なコンポーネントとその働きは、次の通りです。
◎表示コンポーネント
・メディアグループのVidePlayer(ビデオプレイヤー):動画の表示
・ユーザーインターフェースグループの FilePicker(ファイルピッカー):スマホに保存されている動画ファイルの選択
・インターフェースグループの Slider(スライダー):音量と再生位置の表示と移動操作
・インターフェースグループのCheckBox(チェックボックス):ループ、プレイリストの連続再生のON/OFF
・インターフェースグループのListView(リストビュー):プレイリストの管理
他、インターフェースグループのボタン、ラベルなど
◎非表示のコンポーネント
・TinyDB(タイニーDB):プレイリストの保存
・Web(ウェブ):ファイル名の文字化け解消
・Clock(時計):PrrogresiveBar(プログレッシブバー)を進める。ミリ秒を0:00:00に表示変換
ブロックの説明
ブロックの全体図は下記の通り(右クリックで「新しいタブで画像を表示」で拡大表示できます)
勘所の説明。ブロック全体図を左上から下へ、右上から下へ説明します
VideoPlayer利用の留意点
ブロックの説明と重複するところもありますが、VideoPlayer 利用の留意点は、
1.ソースにファイルを指定しても画面には何も表示されません。プログラムでの動画再生を開始できず、人の操作が必要です。静止画であれば VideoPlayer.SeekTo で例えば1ミリ秒を指定すれば表示できます。
2.新たな動画を指定した場合、プログラムでの再生開始はできません。必ず人の操作が必要となります。いったん停止して同じ動画を再生する場合はプログラムで可能です。(ループなどは可能)
3.動画ではなく音楽ファイルを指定すると、音声の再生は可能です。が、アプリの非表示での再生機能はありませんので、他のアプリを起動したり画面の表示が消えると再生は停止します。Playerの場合はどちらも可能です。
4.再生位置は取得できませんが、Clock を利用することで、精度は落ちますが疑似的に再生位置を利用でします。
サンプルのaiaファイルをダウンロードして、実際に動かしてみてください。
サンプルのソースファイルは、下記からダウンロードし、自分のPCに読込み利用できます。
挿入
ダウンロードと利用の方法はこちを参照願います。https://note.com/tech4world/n/n5c73815637de
あとがき・・・
コンポーネント「VideoPlayer」は、再生位置を取得できないので使えないと思っていたが、Clock(クロック)を使って再生位置を推測するという方法で、再生位置(経過時間)を表示したり、スライドバーで再生位置を移動するなどを実現することができました。
この方法を使えば、コマ送り再生とか、10秒進む、10秒戻るなどの操作も実現できそうです。
ご意見・質問等ありましたら、コメントをお願いします。記事に反映していきます。