SwiftUI Style iPhone App Development with Swift: Create 14 Video Playback Apps

Introduction

Apple’s SwiftUI is a framework that simplifies modern user interfaces, helping developers create apps quickly. In this tutorial, you will learn how to create an app that plays videos on iPhone using SwiftUI. This app allows users to search for and select videos, providing a seamless playback experience.

Required Tools and Environment

The following tools and environment are required for this tutorial:

• Xcode: Install the latest version of Xcode.
• Swift: Basic knowledge of the Swift language is needed.
• iOS Device or Simulator: A device or simulator is necessary to test the app.

1. Setting Up the Project

Open the latest version of Xcode and create a new project. Follow these steps:

1. Open Xcode and select “Create a new Xcode project”.
2. Select the “App” template and click “Next”.
3. Set the project name to “VideoPlayerApp” and fill in the other options.
4. Select “SwiftUI” for Interface and “SwiftUI App” for Life Cycle.
5. Select “Swift” as the language and click “Next”.
6. Save the project in your desired location.

2. Understanding the Basic Structure of SwiftUI

A SwiftUI app is written using struct. The starting point of the app is the VideoPlayerApp structure. Check out the code below:

import SwiftUI

struct VideoPlayerApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Here, ContentView is the first view of the app. We will implement video playback functionality in this view.

3. Creating a View for Video Playback

To play videos in SwiftUI, we will use the AVKit framework. Add the following code to the ContentView.swift file:

import SwiftUI
import AVKit

struct ContentView: View {
    @State private var player: AVPlayer?
    
    var body: some View {
        VStack {
            VideoPlayer(player: player)
                .frame(height: 300)
            
            Button("Play Video") {
                playVideo()
            }
            .padding()
        }
        .onAppear {
            setupPlayer()
        }
    }
    
    func setupPlayer() {
        if let url = URL(string: "https://www.example.com/video.mp4") {
            player = AVPlayer(url: url)
        }
    }
    
    func playVideo() {
        player?.play()
    }
}

In the above code, the user can click the ‘Play Video’ button to play the video. It loads and plays the video using AVPlayer.

4. Dynamically Handling Video URLs

Let’s add functionality to play videos via a URL provided by the user instead of using a fixed URL. We will add a simple text field to accept user input:

struct ContentView: View {
    @State private var player: AVPlayer?
    @State private var videoURL: String = ""
    
    var body: some View {
        VStack {
            TextField("Enter Video URL", text: $videoURL)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
            
            VideoPlayer(player: player)
                .frame(height: 300)
            
            Button("Play Video") {
                playVideo()
            }
            .padding()
        }
        .onAppear {
            setupPlayer()
        }
    }
    
    func setupPlayer() {
        if let url = URL(string: videoURL) {
            player = AVPlayer(url: url)
        }
    }
    
    func playVideo() {
        player?.play()
    }
}

Now users can enter a video URL in the text field and click the button to play the video.

5. Enhancing the Video Playback Screen

You can further improve the UI to enhance the overall user experience. The video player will be positioned at the center of the screen using a wrapping layout:

var body: some View {
    VStack {
        TextField("Enter Video URL", text: $videoURL)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding()
        
        VideoPlayer(player: player)
            .frame(height: 300)
            .cornerRadius(10)
            .shadow(radius: 5)
        
        Button("Play Video") {
            playVideo()
        }
        .padding()
        .background(Color.blue)
        .foregroundColor(.white)
        .cornerRadius(8)
    }
    .padding()
    .onAppear {
        setupPlayer()
    }
}

The above code adds a shadow effect to the video player and styles the button to create a more attractive UI.

6. Adding a Video List

Let’s add multiple videos to the app so that users can select from a list. We will define an array of video URLs:

struct ContentView: View {
    @State private var player: AVPlayer?
    @State private var videoURL: String = ""
    
    let videoURLs = [
        "https://www.example.com/video1.mp4",
        "https://www.example.com/video2.mp4",
        "https://www.example.com/video3.mp4"
    ]
    
    var body: some View {
        VStack {
            List(videoURLs, id: \.self) { url in
                Button(action: {
                    playVideo(url: url)
                }) {
                    Text(url)
                }
            }
            .padding()
            
            VideoPlayer(player: player)
                .frame(height: 300)
                .cornerRadius(10)
                .shadow(radius: 5)
        }
        .onAppear {
            setupPlayer()
        }
    }
    
    func setupPlayer() {
        player = AVPlayer(url: URL(string: videoURLs[0])!)
    }
    
    func playVideo(url: String) {
        player = AVPlayer(url: URL(string: url)!)
        player?.play()
    }
}

Here, users can directly select videos from the list to play them.

7. Improving and Extending the App

Now you have a video playback app with basic functionality. Here are some ideas to enhance the app:

• Video Search Feature: Add functionality for users to search for the video they want.
• Favorites Feature: Allow users to save their favorite videos for easy access later.
• Playlist Feature: Create a list to play similar videos together.