[Swift2]Storyboardから設置したUIViewでAVPlayerの動画を再生する方法


AVPlayerで動画再生するときに、Storyboardから設置したUIViewに動画を写したい。そして、オートレイアウトとかでゴニョゴニョしたい!本来は簡単なことなのでしょうが、情けないことに私は手間取ってしまったので共有します。なお、Xcodeのバージョンは7.1.1です。

全部コードでやる場合

とはいえ、まずは、コードでviewを追加しAVPlayerで動画を再生する場合を紹介します。「Swift Docs 006 動画の再生」をご覧ください。この通りにやればそのまま動きます。

以降、「Swift Docs 006 動画の再生」をベースに、いくつか変更を加えます。

やり方

(1)ViewController.swiftの変更

まずは、ViewController.swiftのコードを以下に変更(太字部分は追記、横線部分は削除)。「IBOutletの追加」と、「Viewを生成・レイヤーを追加部分の削除」だけです。

class ViewController: UIViewController {

// 再生用のアイテム.
var playerItem : AVPlayerItem!

// AVPlayer.
var videoPlayer : AVPlayer!

// シークバー.
var seekBar : UISlider!

@IBOutlet weak var videoPlayerView: AVPlayerView!

override func viewDidLoad() {

// パスからassetを生成.
let path = NSBundle.mainBundle().pathForResource("test", ofType: "mov")
let fileURL = NSURL(fileURLWithPath: path!)
let avAsset = AVURLAsset(URL: fileURL, options: nil)

// AVPlayerに再生させるアイテムを生成.
playerItem = AVPlayerItem(asset: avAsset)

// AVPlayerを生成.
videoPlayer = AVPlayer(playerItem: playerItem)

// Viewを生成.
let videoPlayerView = AVPlayerView(frame: self.view.bounds)

// UIViewのレイヤーをAVPlayerLayerにする.
let layer = videoPlayerView.layer as! AVPlayerLayer
layer.videoGravity = AVLayerVideoGravityResizeAspect
layer.player = videoPlayer

// レイヤーを追加する.
self.view.layer.addSublayer(layer)

// 動画のシークバーとなるUISliderを生成.
seekBar = UISlider(frame: CGRectMake(0, 0, self.view.bounds.maxX - 100, 50))
seekBar.layer.position = CGPointMake(self.view.bounds.midX, self.view.bounds.maxY - 100)
seekBar.minimumValue = 0
seekBar.maximumValue = Float(CMTimeGetSeconds(avAsset.duration))
seekBar.addTarget(self, action: "onSliderValueChange:", forControlEvents: UIControlEvents.ValueChanged)
self.view.addSubview(seekBar)

<以下同じなので省略>
}

(2)StoryboardからUIViewを貼り付け

貼り付けたUIviewは、以下のように、AVPlayerViewのインスタンスにすること!(ここやってなかった)

uiview

(3)Storyboardとコードの紐付け

こんな感じで、紐付け。UIViewをAVPlayerViewのインスタンスにしとかないと、紐付けできない。

attache

参考

How to play movies on UIView?

以上。