Search code examples
iosswiftvideobackground-imageios9

Adding a Video Background to iOS app signup like Instagram and Vine


I have created an app which loads up and has a Login / Signup page etc using swift. Currently I have an image as a background but would like to add code so there is a gif / mov playing in the background like in apps like vine or instagram.

How can I integrate the video in with my current code? I am also very new to this so have been following tutorials. Also if anyone knows how I can remove the parse logo, that would also be helpful.

The video appears but in front of the UI on my storyboard! How can I get them to appear in front of the background GIF?

Below is my code that I currently have for my Sign In view controller.

import UIKit
import Foundation

class SignInViewController: UIViewController, UITextFieldDelegate {

@IBOutlet weak var userName: UITextField!
@IBOutlet weak var password: UITextField!

@IBOutlet weak var errorLabel: UILabel!

override func viewDidLoad() {

       super.viewDidLoad()

    let filePath = NSBundle.mainBundle().pathForResource("beachwater", ofType: "gif")
    let gif = NSData(contentsOfFile: filePath!)

    let webViewBG = UIWebView(frame: self.view.frame)
    webViewBG.loadData(gif!, MIMEType: "image/gif", textEncodingName: "UTF-8", baseURL: NSURL(string: "")!)
    webViewBG.userInteractionEnabled = false;
    self.view.addSubview(webViewBG)


    userName.delegate = self
    password.delegate = self
}


@IBAction func signInTouched(sender: UIButton) {

    let signin = SignIn(user: userName.text!, pass: password.text!)

    do {
        try signin.signInUser()
        self.dismissViewControllerAnimated(true, completion: nil)


    } catch let error as Error {
        errorLabel.text = error.description
    } catch {
        errorLabel.text = "Sorry something went\n wrong please try again"
    }

}

override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
    self.view.endEditing(true)

}

}

Solution

  • The following code allows you to add a video background for your view controller.

    It is written in Swift and plays mp4 video files.

    For Swift 5.

    import AVFoundation
    
    class VideoBackgroundController: UIViewController {
        var avPlayer: AVPlayer!
        var avPlayerLayer: AVPlayerLayer!
        var paused: Bool = false
    
        override func viewDidLoad() {
    
            let theURL = Bundle.main.url(forResource:"my_video_file", withExtension: "mp4")
    
            avPlayer = AVPlayer(url: theURL!)
            avPlayerLayer = AVPlayerLayer(player: avPlayer)
            avPlayerLayer.videoGravity = .resizeAspectFill
            avPlayer.volume = 0
            avPlayer.actionAtItemEnd = .none
    
            avPlayerLayer.frame = view.layer.bounds
            view.backgroundColor = .clear
            view.layer.insertSublayer(avPlayerLayer, at: 0)
    
            NotificationCenter.default.addObserver(self,
                                               selector: #selector(playerItemDidReachEnd(notification:)),
                                               name: .AVPlayerItemDidPlayToEndTime,
                                               object: avPlayer.currentItem)
        }
    
        @objc func playerItemDidReachEnd(notification: Notification) {
            let p: AVPlayerItem = notification.object as! AVPlayerItem
            p.seek(to: .zero)
        }
    
        override func viewDidAppear(_ animated: Bool) {
            super.viewDidAppear(animated)
            avPlayer.play()
            paused = false
        }
    
        override func viewDidDisappear(_ animated: Bool) {
            super.viewDidDisappear(animated)
            avPlayer.pause()
            paused = true
        }
    }