本文へスキップ

Created Saturday 08 August 2015

Kwikでビデオファイルを再生する方法を解説します。サンプルプロジェクトは下記のURLからダウンロードできます。Kwikは3.5.5を使用してください。
http://kwiksher.com/tutorials/Video/Video.zip

ビデオ再生のパターンは4つあります。

  • 画面埋め込み型のNative Play Video
  • 全画面再生のMedia Play Video
  • HTMLを利用したWeb Viewでの再生
  • デバイスのブラウザを起動するGo to URL

※Youtube動画のストリーミング再生には、HTMLを利用したWebViewの再生、または Go to URLでのブラウザ起動が必要です。Native Play VideoとMedia Play Videoは、プログレッシブダウンロードによる疑似ストリーミング再生となっています。

Page1ーNative Play Video


Page2-Media Play Video


Page3-Web ViewのHTML再生 とOpenURL


Page4-応用編 Native Play Videoとアニメーション


プロジェクト設定

プロジェクト設定では、ナビゲーションパネルの作成を有効にし、Scaleモードを均等にしておきました。

ナビゲーションはPage4の応用編でビデオ再生の終了後にナビゲーションのサムネイル画像を表示します。

Page1 Native Play Video

ビデオを再生をレイヤー置換によって実現します。置き換える対象のレイヤーはvideoFrameとします。このレイヤーを選択した状態で、ビデオに置換をクリックします。

Video Replacementの設定画面が開きます。ファイルの入力ボックスにURLを指定しました。このURLにはビデオファイルを指定する必要があります。YoutubeのURLは動画IDによるストリーミング再生なので、このVideoReplacementでは再生できません。

アプリ内にビデオファイルを含んで、ローカル再生を行う場合は、下記のようにビデオファイルを指定してください。Kwikがコピーしてbuild/フォルダに設定します。

Native Play Videoの再生、一時停止、巻き戻しのボタンを設定します。PlayBtnのレイヤーを選択して、ボタンの追加を行います。

ボタン追加画面で、Video > Play Videoを設定してください。同様に巻き戻し、一時停止のボタンを作成してください。

Page1の設定は以上です。

Page2-Media Play Video

全画面表示を行うには、External Codeを利用して Media.playVideoをコールします。media_playvideo.luaファイルを指定します。playBtnレイヤーにボタン設定をします。

ボタン追加画面で、Code > External Codeを指定します。

External Codeにmedia_playvideo.luaを指定してください。

media_playvideo.luaには下記のコードが記述されています。

以上がpage2の設定です。

page3 Web View

htmlファイルを利用して、インラインでウェブ画面を表示して動画再生を行います。webFrameレイヤーをウェブに置換します。

Web View 置換の設定画面が開きます。表示するURLを指定してください。下記の例では http://kwiksher.com/tutorials/Video/youtube.html%E3%81%8C%E6%8C%87%E5%AE%9A%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99

アプリ内にローカルなHTMLを置いて、それを表示する場合は下記のようにローカルのhtmlファイルを指定して、ローカルファイルのチェックボックスにチェックをいれます。Kwikは指定されたhtmlをコピーして、build/フォルダに設定します。

Go to URL

デバイスのブラウザを開き、HTMLを再生するには、Go to URLを利用します。page3のplayBtnにGo to urlを設定します。

ボタン追加画面で、Web > Go to URLでhttps://www.youtube.comのURLを指定しています

page4 応用編

動画再生の終了後にサムネイル画像を開いてみます。Corona SDKの仕様として、動画の上に別のボタンやアニメーションなどの画像やテキストを配置することはできません。そのために、動画再生が終了したときに、動画部分を非表示にして、静的なJPEGまたはPNG画像を代わりに表示します。下記の例ですと、動画にレイヤー置換されるレイヤは videoFrameとし、静的な終了画面はstaticImageレイヤーとなっています。ロケットとTo be Continutedの文字、それとナビゲーションパネルを動画終了時に表示します。

ロケットが回転するアニメーションを作成します。

開始の設定をWait requestにします。

次にstaticImageレイヤーを透明な状態から、100%表示するアニメーションを作成します。開始:Waite requestに設定してください。

アクションを作成します。ビデオ終了時にvideoFameを非表示にする、staticImageを表示する、ロケットを回転させる、ナビゲーションを表示させます。

  • Show/Hide videoFrame
  • Play Animation staticImageのアニメーション
  • Play Animation rocketのアニメーション
  • Show/Hide Navigation

最後にvideoFrameのビデオに置換を設定します。

ビデオ置換の設定では、ローカルのkwikplanet.mp4を指定して、アクションにビデオ終了時のアクションを指定します。

Corona Simukatorでビルドします。Video再生はCorona Corona Simulatorではサポートされていません。iOSのXCode iOS Simulatorで動作確認を行ってみます。

ビルドの画面でXCode iOS Simulatorを指定します。

ビルドが完了すると iOS Simulatorが起動します。

P.S. アンドロイドでは、Native Videoが透過状態にならない問題があるために、Show/HideのHideが動作しません。そのために、サイズを変更する、位置を画面外に移動させるといった対処が必要です。
http://kwiksher.com/forums/topic/hide-video-in-android-device/