この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
今回はとても簡単にウォークスルーなどの背景に動画を入れられる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
に変更します。
ViewController.swift
import UIKit
import VideoSplashKit
class ViewController: VideoSplashViewController {
そして、動画を背景に表示する処理を追加します。
ViewController.swift
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で配置することが出来ます。
今回は画像とボタン2つを置いてみました。
デモ
上記で作ったものを実行すると下記のような感じになります。
さいごに
イントロ画面などに動画を入れると、ユーザーにアプリの世界観を伝えるのに効果的ではないでしょうか?
VideoSplashKitはすごく手軽に使えるので導入しやすいと思います。