動画ファイルを画面上に２つ並べてシンクロ再生できるアプリ

こんにちは、まっさん(@Tera_Msaki)です。

2つの動画を並べて同時に再生したい、、、

Duelは動画を使って、”ライバルとの差を可視化する” コラージュアプリです。
2つの動画に再生位置（チャプタ）を設定して、並べてシンクロ再生、スロー再生ができます。
どこで差がついか、操作と動作を確認、どう変化したか確認します。

2つの動画を並べて同時に再生できないかと開発したのが、
「比較したい動画を2つ並べて同時に再生できるアプリ」です。
このアプリの使用方法を紹介したいと思います。

Duel – 2つの動画をシンクロ再生できるアプリ

『Duel』は動画ファイルを、画面上に2つ並べて再生するコラージュアプリです。

再生できる動画はスマホやタブレットにある動画です。
スマホで撮影した動画、ビデオから取り込んだ動画、ダウンロードした動画など自由です。

動画には再生位置を最大5つまで登録でき、動画をスキップ・シンクロ再生できます。

動画の頭出し（チャプタ設定）から動画を再生しています。
動画再生ではグリッド線を表示・非表示を繰り返しています。

タブレットだと大きな画面でアプリが使えます💛

リンク

Duel – 2つの動画をシンクロ再生できるアプリ
機能説明
画面項目説明
操作説明
その他
1. システムパラメータ
2. スマホに動画を登録する

Duel – 2つの動画をシンクロ再生できるアプリ

2つの動画を並べて同時に再生するアプリです。
開発した背景としては、ビデオカメラで撮影した動画で、ライバルとの違いを可視化したい思ったことがきっかけです。
操作が少ないこと、2つの動画から違いが直感的にわかること、再生位置を自由に設定できることを要件として、開発しました。

操作が少ない
・スマホやタブレット本体にある動画をそのまま再生できる。
・再生する動画はサムネイルを一覧表示、選択できる。
・動画を再生しながら、再生位置（チャプタ）を指定できる。

違いが直感的にわかる
・再生位置を指定した2つの動画を同時に再生することができる。
・スロー再生で違いがより分かりやすくなる。
・再生する動画上にグリッド線を表示、違いを判断する目安となる。

再生位置を自由に指定できる
・開始位置のほか、任意の再生位置を4つまで追加できる。
・再生位置をミリ秒で直接入力で指定できる。
・再生している動画の現在の再生位置を指定できる。

アプリの動作環境

・Android8.0以降のスマートフォンまたは、タブレット

重要ポイント

動画再生はスマホに搭載しているメモリサイズが影響します。
メモリが少ない場合、再生速度が低下したり、
メモリ不足でアプリが落ちる可能性があります。

重要ポイント

アプリを使用するには、インターネット接続が必要です。

インターネットに接続できない環境下で使用したい場合は、

解除オプションの購入をご検討ください♪

この下にあるアイコンから、
比較したい動画を2つ並べて同時に再生できるアプリをダウンロード（無料）できます。

変更履歴（V1.3）
・タイム比較を表示する機能を追加しました<new>
・画面遷移のヒストリバック機能を追加しました<new>
・全画面表示に対応しました<new>
・動画ファイルのエンコードで画質を指定できるように変更しました<new>
・動画ファイルの映像について、エンコードする・しないを指定できるように対応しました<new>
・サムネイルを動画ファイルの最初のフレームに変更しました<new>
・MTS形式、MOV形式、WebM形式の動画ファイルに対応しました<new>
・インターネット接続のチェックを変更しました
・10秒戻る・10秒進むボタンを追加しました
・比較先動画と比較元動画のスクリーンサイズを最適化しました
・Android14に対応しました
・GDPRが適用される国について、GDPR同意確認を追加しました
・新規リリースしました

MTS形式は、ビデオカメラなどでよく使用されているフォーマットです。
MOV形式は、iOS や MacOS で使用される QuickTime のフォーマットです。
WebM形式は、音楽動画などインターネットで配信する際に使用されるフォーマットです。

タイム比較を表示する機能

チャプタ通過時点のタイム差を表示します

機能説明

Duel – 2つの動画をシンクロ再生できるアプリは、スマホやタブレット本体にある動画に再生位置（チャプタ）を指定して、2つの動画の再生位置を合わせて、同時に再生します。

カテゴリ	機能	説明
再生	シンクロ再生	2つの動画を同時に再生できます。
	スロー再生	動画を1/2、1/4、1/8倍のスピードで再生できます。
	グリッド表示	動画上にグリッド線をオーバーレイ表示できます。
動画	選択	スマホ本体にある動画ファイルをスクロールで選択できます。
	サムネイル表示	動画ファイルからサムネイル画像を作成してリスト表示します。
	タイトル	動画にファイル名とは別に任意でタイトルを設定できます。
再生位置	チャプタ	動画に最大5つまで、再生位置（チャプタ）を指定できます。
	直接入力	再生位置をミリ秒で直接入力できます。
	再生位置入力	動画を再生しながら、現在の再生位置を入力できます。

再生できる動画は、mp4形式、MTS形式、MOV形式、WebM形式の動画ファイルです。

重要ポイント

アプリ起動時にmp4形式以外の動画ファイルは、初回のみエンコード処理を行います。

このため、アプリの起動に時間がかかることがあります。

画面項目説明

各画面の画面項目について、説明します。

ホーム（動画選択モード）

再生する動画を選択する画面です。

左側が比較先の動画で最新からひとつ前を初期表示します。
右側が比較元の動画で最新を初期表示します。
スマホに記録している動画が1つしかない場合、左側は表示しません。

①メニュー
タップすると、メニューを表示します。

背景を変更する
スマホに保存している画像ファイルを背景画面にします。

文字色を反転する
文字色を反転します。

解除オプションの購入
解除オプションを購入します。
解除オプションの有効期限は 30日間です（有効期限が切れた場合、再購入できます）

ヘルプ
ブラウザで操作説明ページを表示します。

②タブメニュー
遷移先の画面をタップで選択します。
　ホーム　　　　　　　　HOME
　動画　　　　　　　　　VIDEO
　システム　　　　　　　SYSTEM

③比較先動画
スマホ本体に記録している動画をリスト表示します。
動画を上下にスクロール（スワイプ）させて、タップで再生する動画を確定します。
動画リストには、再生時間と設定しているチャプタを表示しています。

④比較元動画
スマホ本体に記録している動画をリスト表示します。
動画を上下にスクロール（スワイプ）させて、タップで再生する動画を確定します。
動画リストには、再生時間と設定しているチャプタを表示しています。

比較元動画のみ、音声を出力します。
再生速度が標準（×1）以外は、消音します。

⑤コントールボタン
動画の再生・一時停止・終了します。
動画選択モードでは、ロングタップ（長押し）で動画再生モードになります。

ホーム（動画再生モード）

動画を再生する画面です。

⑤コントールボタン
動画の再生・一時停止・終了します。
動画再生モードでは、タップで再生を開始します。
ロングタップ（長押し）で動画再生モードを終了します。

⑥チャプタ選択
チャプタを選択して、動画を頭出します。

⑦再生速度選択
再生速度を選択して、動画の再生スピードを変更します。

再生速度が標準（×1）以外は、消音します。

⑧再生位置
スライドバーを左右に動かして、動画の再生位置を変更します。

⑥グリッド表示
動画上のグリッド表示を、スイッチのオン・オフで切り替えます。

ホーム（動画再生中）

動画再生中の画面です。

⑤コントールボタン
動画の再生・一時停止・終了します。
動画再生中は、タップで再生を一時停止します。

⑥チャプタ選択
動画再生中は使用できません。

⑦再生速度選択
動画再生中は使用できません。

⑧再生位置
スライドバーを左右に動かして、動画の再生位置を変更します。
動画再生中に変更した場合、再生を一時停止します。

動画

動画のタイトルやチャプタを設定する画面です。

スマホ本体の内部共有ストレージのダウンロード（Download）または、動画（Movies）にある動画ファイルが対象です。

①メニュー
タップすると、メニューを表示します。

動画情報をクリアする
登録した動画のタイトルやチャプタ、エンコードした動画ファイルを初期化（削除）します。
スマホ本体に記録している動画ファイルは削除されません。

ホーム
ホーム画面に遷移します。

③動画リスト
スマホ本体に記録している動画をリスト表示します。
動画を上下にスクロール（スワイプ）させて、設定する動画を選択します。
タップで動画のチャプタを設定するダイアログを表示します。

④タイトル
動画のタイトルを表示します。
タップでタイトルを設定するダイアログを表示します。

⑤再生時間・チャプタ
動画の再生時間とチャプタを表示します。
タップで動画のチャプタを設定するダイアログを表示します。

ダイアログ（チャプタ設定）

動画のチャプタを設定するダイアログです。

⑤更新ボタン
設定した動画のチャプタを更新します。

⑥動画ビュー
動画を再生するビューです。
タップで動画コントローラ（⑦⑧⑨）の表示・非表示を切り替えます。

⑦動画コントローラ（ボタン）
動画の再生、一時停止など操作します。

動画コントローラは、動画の再生後0.5秒で非表示になります。
表示したい場合は、⑥動画をタップします。

⑧再生位置
スライドバーを左右に動かして、動画の再生位置を変更します。

⑨再生オプション
再生速度を選択して、動画の再生スピードを変更します。

再生速度が標準以外は、消音します。

⑩チャプタ選択
設定するチャプタを選択します。

⑪再生位置
動画の再生位置を入力します。

スタートから動画を撮影できなかった場合、仮のスタート位置をマイナスで入力します。
例えば、スタート後3秒経ってから撮影を始めた場合、-3000（ミリ秒）を入力します。

⑫現在値入力ボタン
動画の現在の再生位置を⑪再生位置に設定します。

設定のコツは、再生速度を0.25×に設定して、動画を再生しながら、設定します。

システム画面

パラメータを変更する画面です。

①メニュー
タップすると、メニューを表示します。

パラメータを初期化する
全てのパラメータを初期状態に戻します。

ホーム
ホーム画面に遷移します。

③パラメータ
タップでパラメータを変更できます。
左方向のフリックでパラメータを削除できます（初期状態に戻ります）

操作説明

各機能の操作方法について、説明します。

動画の再生

①タブメニューから、ホームをタップします（アプリ起動時はホームです）
②比較先動画、比較元動画で再生する動画をスクロール、タップで選択します。
③コントロールボタンをロングタップ（長押し）します（動画再生モード）
④チャプタを指定している動画を再生する場合、チャプタ選択をタップで選択します。
⑤スロー再生する場合、再生速度選択をタップで選択します。
⑥コントロールボタンをタップします（動画再生中）
再生を一時停止する場合、コントールボタンをタップします（動画再生モード）
動画の再生を中止する場合、コントールボタンをロングタップ（長押し）します（動画選択モード）

再生できる動画は、mp4形式、MTS形式、MOV形式、WebM形式の動画ファイルです。
スマホ本体の内部共有ストレージのダウンロード（Download）または、動画（Movies）にある動画ファイルが対象です。

コラージュアプリを快適に使用したいなら、スマホスタンドが必須ですね💛

リンク

チャプタの設定

チャプタの設定方法には、再生位置（ミリ秒）を直接入力する方法と、再生中の動画の再生位置を指定する方法があります。

直接入力する方法

①タブメニューから、動画をタップします。
②動画リストからチャプタを設定する動画（サムネイル）をスクロール、タップで選択します。
ダイアログ（チャプタ設定）が表示されます。
③チャプタ選択から設定するチャプタをタップで選択します。
④再生位置に動画の再生位置（ミリ秒）を入力します。
再生位置を入力すると動画ビューの再生位置が変化します。
⑥更新ボタンをタップします。

指定する方法

①タブメニューから、動画をタップします。
②動画リストからチャプタを設定する動画（サムネイル）をスクロール、タップで選択します。
ダイアログ（チャプタ設定）が表示されます。
③チャプタ選択から設定するチャプタをタップで選択します。
④再生オプションから再生速度を選択（タップ）して、動画の再生スピードを変更（タップ）します。
⑤動画コントローラの再生ボタンをタップして、動画再生を開始します。
⑥動画の再生位置がチャプタに指定するタイミングで現在値入力ボタンをタップします。
再生位置に動画の再生位置（ミリ秒）が設定されます。
⑦更新ボタンをタップします。

mp4形式以外の動画ファイルの再生

mp4形式以外の動画ファイルはエンコードを行っているため、画質が悪くなることがあります。
画質が気になる場合は、パラメータ変更で画質の劣化を抑えることが可能です。

①システム設定画面のパラメータ一覧から、変更するパラメータをタップします。
②入力画面でパラメータ値を入力します。
CODEC
true （映像をエンコードする、品質指定が有効になります）
false（映像をエンコードしない）
QMIN
映像のエンコードする際の品質指定（最小） を指定する
QMAX
映像のエンコードする際の品質指定（最大） を指定する

エンコードを再実行したい場合は、動画メニューの動画情報をクリアするを実行します。

アプリの背景と文字色を変更する

①メニューから、背景設定 をタップします。
②ファイル選択画面を表示します。
スマホ本体の DOWNLOADフォルダを表示しますので、背景に設定する画像ファイルを選択します。
ファイル選択画面で画像用フォルダに変更して、スマホで撮影した画像ファイルも選択できます。
③背景に選択した画像でタブメニューの文字が見にくい場合は、メニューから、文字色反転 をタップします。

解除オプション（期限あり）を購入する

①メニューから、解除オプション（期限あり）の購入 をタップします。
②Google Play のアイテム購入画面を表示します。
購入が完了するまで、解除オプションは有効になりません。
解除オプションの有効期限は30日間 です（有効期限が切れた場合、再購入できます）

解除オプション（30日間）　…　250円

解除オプションの購入で有効化される機能
・広告表示の停止
・インターネット未接続でも使用可能

Google Play ギフトカードだったら、コンビニで買えますね (^^♪
[ ギフトカード、ギフトコードを利用する方法 ]
①Google Play アプリを開きます。
②右上のプロフィールアイコンをタップします。
③[お支払いと定期購入] [ギフトコードの利用] をタップします。
④コードを入力します。

リンク

その他

画面項目や操作説明以外について、説明します。

システムパラメータ

システムパラメータ一覧から選択、パラメータ値を変更します。

CODEC（動画ファイルの映像をエンコードする [true]・しない [false]を指定します）
COMPERE（タイム比較を表示する [true]・しない [false]を指定します）
NAVIGATION（ナビゲーションバーの高さ[120 px]を指定します）
QMIN（映像のエンコードで画質の下限 [16]を指定します）
QMAX（映像のエンコードで画質の上限 [20]を指定します）
RESOLUTION（再生できる動画の解像度の上限を指定します。初期値は FHD[1920×1080 px] ）
VOLUME（効果音のボリューム（ 0.0 ～ 1.0 ）を指定します。初期値は 1.0[最大] ）

QMIN、QMAXで指定できる画質の範囲は、１（高画質・ファイルサイズが大きい）～51（低画質・ファイルサイズが小さい）です。

RESOLUTIONで指定できる動画の解像度は、HD（1280×770px）、FHD（1920×1080px）、WQHD（2560×1440px）、4K（3840×2160px）です。
再生できる動画の解像度は、スマホに搭載しているメモリサイズに依存します。
メモリが少ない場合、再生速度が低下したり、メモリ不足でアプリが落ちる可能性があります。

タイム比較を表示するには、比較する動画のそれぞれに最低2つ以上（開始と終了）のチャプタの設定が必要です。

スマホに動画を登録する

動画ファイルをスマホ本体の内部共有ストレージのダウンロード（Download）または、動画（Movies）に登録する方法を説明します。

スマホのカメラアプリで撮影する

①アプリの一覧から、カメラ（アイコン）をタップします。
②モード切り替えボタンをタップして、ビデオモードに変更します。
③被写体にレンズを向け、録画ボタンをタップします。
録画が開始されます（録画中は、記録時間が表示されます）
④録画を終了するときは、録画ボタンをタップします。

撮影した動画ファイルは、スマホ本体の内部共有ストレージの動画（Movies）に格納されます。

Googleドライブから動画をダウンロードする

①アプリの一覧から、Googleドライブ（アイコン）をタップします。
②マイドライブから、ダウンロードする動画ファイルの右にあるメニューを表示、ダウンロードを選択します。選択後、ダウンロードが開始されます。

ダウンロードした動画ファイルは、スマホ本体の内部共有ストレージのダウンロード（Download）に格納されます。

ビデオカメラで撮影した動画ファイルを直接取り込む

①ビデオカメラから動画を撮影したSDカードを取り出します。
②SDカードをSDカードリーダーに装着して、USBでスマホに接続します。
③アプリの一覧から、設定（アイコン）をタップします。
④設定のメニューから、ストレージをタップします。
⑤外部ストレージのSDカードリーダーに装着したSDカードをタップします。
⑥フォルダから動画ファイルをロングタップ（長押し）します。
⑦動画ファイルを選択した状態で、メニューからコピーをクリックします。
コピー先の指定画面が表示されますので、ダウンロード（Download）または、動画（Movies）を指定します。指定後、コピーが開始されます。

動画ファイルは、コピー先で指定した場所に格納されます。

ビデオカメラから動画ファイルを取り込むなら、microSDカードにも対応した2in1がおススメです💛

リンク