Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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)

}

}
like image 343
Robert S Avatar asked Oct 01 '15 13:10

Robert S


2 Answers

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
    }
}
like image 74
Amr Hossam Avatar answered Oct 14 '22 22:10

Amr Hossam


This works, replace all of the code that you just put there with this:

     let filePath = NSBundle.mainBundle().pathForResource("beach_water", 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)

That is all tested and works 100%

EDIT Swift 3 and have the Gif in the background:

let filePath = Bundle.main.path(forResource: "beach_water", ofType: "gif")
let gif = NSData(contentsOfFile: filePath!)
let webViewBG = UIWebView(frame: self.view.frame)
webViewBG.load(gif! as Data, mimeType: "image/gif", textEncodingName: "UTF-8", baseURL: NSURL(string: "")! as URL)
webViewBG.isUserInteractionEnabled = false
webViewBG.layer.zPosition = -2.0
self.view.addSubview(webViewBG)
like image 2
Zander Avatar answered Oct 14 '22 22:10

Zander