WKInterfaceMovieとWKInterfaceInlineMovieを使ってwatchOSでビデオを表示する
前回の記事でWKInterfaceMovieとWKInterfaceInlineMovieがビデオ再生のコントロールであることが分かったので、実際にアプリを作って動作を確認する。実際に動かしたアプリの画面はこちら、上がWKInterfaceMovieで下がWKInterfaceInlineMovieでの表示。
WKInterfaceMovie
ソースコードはこちら。
WKInterfaceMovieのドキュメントに書いてあるがインスタンスは自分で（コードで）生成してはいけない。WatchKit Appのstoryboardを開いてオブジェクトを貼り付けて、アウトレットを接続する。
@IBOutlet weak var movie: WKInterfaceMovie!
WKInterfaceMovieにセットするposter image（サムネイル）の画像ファイルはWatchKit側のAssetsに登録する。再生するビデオファイルはWatchKit Extensionに追加しておく、こちらはAssetsではなくて良いようだ。Assetsを使うケースとそうでないケース、WatchKit AppとWatchKit Extensionの使い分けがいまいちよく分かっていないのでこの辺は間違っているかもしれない。
WKInterfaceMovieにAssetsの画像を登録するには、AssetsからWKImageを生成してsetPosterImageを呼び出す。
// set poster image from asset.
movie.setPosterImage(WKImage(imageName: "poster"))
再生するビデオファイルは次のようにセットする。
// get video file url from outside of an asset catalog.
let path = Bundle.main.path(forResource: "sample", ofType: "mov")!
let url = URL(fileURLWithPath: path)
// set movie url
movie.setMovieURL(url)この状態で実行すると以下のように表示される。
ポスターイメージ上の再生ボタンを押すとビデオが全画面で再生される。
再生中のビデオ画面をタップすると一時停止や音量調整などのコントロールが表示される。なお、実機で再生したところAppleWatchから音が再生された。
WKInterfaceInlineMovie
WKInterfaceInlineMovieの場合も基本的に同じやり方で良いが、再生や停止はアプリ側で制御する必要がある。
コードの実装もほぼ同じだったが、自動再生がデフォルトで有効だったので必要に応じて無効にすると良い。
// auto play is true as default
movie.setAutoplays(false)再生や停止は自分で制御する。
@IBAction func onTapPlay() {
print(#function)
movie.play()
}
@IBAction func onTapPause() {
print(#function)
movie.pause()
}
実行した時の表示。
再生するとインラインで再生される。WKInterfaceMovieと異なりビデオの画面上にUIコントロールなどは出ない。
まとめ
モーダルで表示で良ければWKInterfaceMovieを、インラインで表示する場合はWKInterfaceInlineMovieを使えば良い。前者はUIコンポーネントも付属しているので実装の手間が省ける。後者は再生を制御するUIを自前で用意する必要があるが細かい制御ができる。