SwiftUI - 媒體

---

---

在 SwiftUI 中，播放影片是 UI 中最重要的元件之一。它增強了使用者體驗，並使 UI 更加吸引人。因此，從 iOS 14 開始，Apple 引入了 VideoPlayer 元件來在應用程式中播放影片。此檢視在當前檢視或我們想要的檢視中提供影片播放器，並且能夠顯示來自 URL、本地或遠端的影片。

SwiftUI 中的 VideoPlayer 檢視

VideoPlayer 檢視用於在指定的檢視中新增影片播放器以顯示短影片、電影等。它可以顯示影片。

語法

以下是語法：

VideoPlayer(player: AVplayer?, videoOverlay:() -> VideoOverlay)

引數

此檢視使用以下引數：

• player: 它顯示一個用於顯示視聽資料的播放器。

• videoOverlay: 此閉包返回一個位於播放器影片之上的檢視。它具有互動性，但位於系統提供的播放控制元件下方，並且只能獲取未處理的事件。

在 SwiftUI 中新增影片播放器的步驟

要將影片新增到應用程式，我們必須按照以下步驟操作：

步驟 1：開啟 Xcode

開啟 Xcode 並建立一個新專案。

步驟 2：將影片新增到 Xcode

現在，要在 Xcode 專案中使用影片，我們必須首先將該影片新增到專案資料夾中。要新增影片，請轉到導航器並將影片拖放到專案資料夾中。

步驟 3：匯入 AVKit

要將媒體播放器新增到專案中，我們必須首先匯入 AVKit 庫。AVKit 是一個用於處理視聽媒體的特殊框架。它提供了一套完整的控制元件來處理視聽媒體，包括導航、畫中畫支援、字幕、隱藏式字幕等。

import AVKit

步驟 5：建立影片的 URL

將影片新增到專案資料夾後，現在我們必須建立影像的 URL，以便我們可以使用該 URL 在影片播放器中呼叫它。因此，我們可以使用 url(forResource:withExtension) 方法建立影片的 URL。

let mediaURL: URL? = Bundle.main.url(forResource: "multipleAnimation3", withExtension: "mov")

步驟 6：使用 VideoPlayer

現在，我們在 ContentView 的 body 部分使用 VideoPlayer 以在螢幕上顯示影片播放器。

VideoPlayer(player: AVplayer?, videoOverlay:() -> VideoOverlay)

自定義影片播放器

在 SwiftUI 中，我們可以使用以下修飾符自定義影片播放器的外觀：

方法	描述
frame()	用於調整影片播放器的大小。
background()	用於設定影片播放器後面檢視的背景顏色。
padding()	用於在播放器或給定控制元件周圍新增空間。這可以更有效地定義播放器的位置。
onAppear()	插入在給定檢視出現之前執行的操作。
onDisappear()	插入在給定檢視消失之前執行的操作。
fullScreenCover()	用於儘可能多地覆蓋影片播放器的螢幕。
offset()	用於調整影片播放器的位置。

示例

透過以下示例，我們將瞭解如何使用影片播放器：

示例 1

以下 SwiftUI 程式用於在檢視中插入媒體播放器。

import SwiftUI
import AVKit

struct ContentView: View {
   let mediaURL: URL? = Bundle.main.url(forResource: "multipleAnimation3", withExtension: "mov")
   
   var body: some View {
      ZStack{
         if let url = mediaURL{
            VideoPlayer(player: AVPlayer(url: url))
         }else{
            Text("Not Found")
            
         }
      }
   }
}
   
#Preview {
   ContentView()
}

輸出

示例 2

在以下 SwiftUI 程式中，我們將從遠端 URL 獲取影片。

import SwiftUI
import AVKit

struct ContentView: View {
   let mediaURL: URL? = URL(string: "https://www.youtube.com/watch?v=eGtV-sZ1wmw")
   
   var body: some View {
      ZStack{
         if let url = mediaURL{
            VideoPlayer(player: AVPlayer(url: url))
         }else{
            Text("Not Found").foregroundStyle(.white)
            
         }
      }
   }
}
   
#Preview {
   ContentView()
}

輸出

示例 3

在以下 SwiftUI 程式中，我們將自定義影片播放器。

import SwiftUI
import AVKit

struct ContentView: View {
   let mediaURL: URL? = Bundle.main.url(forResource: "multipleAnimation3", withExtension: "mov")
   
   var body: some View {
      ZStack{
         if let url = mediaURL{
            VideoPlayer(player: AVPlayer(url: url), videoOverlay: {Text("NEW VIDEO").font(.title).foregroundStyle(.red).bold()
               .padding(.top)})
            .frame(width: 380, height: 300)
         }else{
            Text("Not Found")
         }
      }
   }
}
   
#Preview {
   ContentView()
}

輸出