[iOS][Swift] 画面の背景を動画にするVideoSplashKit

今回はとても簡単にウォークスルーなどの背景に動画を入れられるVideoSplashKitというライブラリの簡単な使い方をご紹介したいと思います。

https://github.com/movielala/VideoSplashKit
VideoSplashKitはiOS8以上、Xcode 6.1以上に対応しており、ライセンスはMITライセンスです。

開発環境

今回の開発環境は下記で実施しています。

Xcode	7.3.1
Swift	2.2
CocoaPods	1.0.0

ターゲットはiOS8.1、デバイスはiPhone、画面回転無しでProjectを作成しました。

準備

導入

CocoaPodsで追加します。

use_frameworks!

target "ターゲット名" do
  pod 'VideoSplashKit', :inhibit_warnings => true
end

※ 現時点でSwift2.2に最適化されていないためwarningが表示されるのでinhibit_warnings => trueを記載しています。

素材の用意

リソースフォルダを用意し、そこに動画ファイルを入れます。

今回の動画素材はこちらからお借りしました。

実装例

対象のViewControllerに対して import VideoSplashKit を追加して、 UIViewController を VideoSplashViewController に変更します。

import UIKit
import VideoSplashKit

class ViewController: VideoSplashViewController {

そして、動画を背景に表示する処理を追加します。

import UIKit
import VideoSplashKit

class ViewController: VideoSplashViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        setupVideo()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    private func setupVideo() {
        if let path = NSBundle.mainBundle().pathForResource("sample", ofType: "mp4") {
            let url = NSURL.fileURLWithPath(path)
            videoFrame = view.frame
            fillMode = .ResizeAspectFill
            alwaysRepeat = true
            restartForeground = true
            sound = true
            startTime = 0.0
            duration = 0.0
            alpha = 0.7
            backgroundColor = UIColor.blackColor()
            contentURL = url
        }
    }
}

基本はこれでOKです。viewDidLoadのタイミングで動画のロード処理を追加しています。
以下は各プロパティについてです。

videoFrame

ビデオのサイズです。画面全体にする場合はview.frameを設定します。

fillMode

描画モードです。描画モードは以下の３種類あります。

Resize	比率を保たず画面全体に表示されます。
ResizeAspect	比率を保ったまま動画全体が入るように表示されます。
ResizeAspectFill	比率を保ったまま中央を基準に動画が画面いっぱいに拡大されます。

デフォルトはResizeAspectFillです。

alwaysRepeat

リピート再生するかどうかです。デフォルトはtrue（リピート再生する）になります。

restartForeground

画面が戻ってきた時に再スタートするかどうかです。デフォルトはtrueになります。

sound

音を出すかどうかです。デフォルトはtrue（音を出す）になります。

startTime

ビデオの開始時間です。

duration

ビデオの再生時間です。0.0を指定すると終わりまで再生されます。デフォルトは0.0です。

alpha

ビデオのアルファ（透明度）です。1.0を設定すると透過無しになります。

backgroundColor

背景色です。

contentURL

NSURL形式で動画のURLを設定します。

コンテンツを配置する

動画の上にテキストやボタンなどを表示するには、Storyboardで配置することが出来ます。

今回は画像とボタン２つを置いてみました。

デモ

上記で作ったものを実行すると下記のような感じになります。

さいごに

イントロ画面などに動画を入れると、ユーザーにアプリの世界観を伝えるのに効果的ではないでしょうか？
VideoSplashKitはすごく手軽に使えるので導入しやすいと思います。