1. 程式人生 > >[Swift通天遁地]八、媒體與動畫-(3)實現視頻播放的水印、Overlay、暫停時插入廣告等效果

[Swift通天遁地]八、媒體與動畫-(3)實現視頻播放的水印、Overlay、暫停時插入廣告等效果

enter url 事件 第三方類 width conf 第三方類庫 duration super

本文將演示使用第三方類庫實現視頻視頻播放的水印、Overlay、暫停時插入廣告等效果。

首先確保在項目中,已經安裝了所需的第三方類庫,點擊查看安裝的配置文件。

1 platform :ios, 8.0
2 use_frameworks!
3 
4 target DemoApp do
5     source https://github.com/CocoaPods/Specs.git
6     pod MobilePlayer
7 end

根據配置文件中的相關設置,安裝第三方類庫。

完成安裝之後,雙擊打開項目文件【DemoApp.xcworkspace】

往項目中導入了一個視頻文件,以及一張圖片文件,作為視頻播放器等水印視圖。

第三方類庫允許開發者使用配置文件【MovielalaPlayer】,

通過配置文件可以調整播放器等各個細節。

依次創建幾個自定義的播放器類文件。

在項目文件夾上點擊鼠標右鍵,彈出右鍵菜單。

【New File->【Cocoa Touch->【Next】->

【Class】:OverlayViewController

【Subclass of:MobilePlayerOverlayViewController

【Language】:Swift

->Create

在類【OverlayViewController.swift】創建一個包含浮動視圖的視頻播放器

 1 import UIKit
 2 //引入已經安裝的第三方類庫
 3 import MobilePlayer
 4 
 5 class OverlayViewController: MobilePlayerOverlayViewController {
 6 
 7     override func viewDidLoad() {
 8         super.viewDidLoad()
 9 
10         // Do any additional setup after loading the view.
11         
12         //
初始化一個指定顯示區域的視圖對象, 13 //該視圖對象將浮動顯示在視頻播放器的上方。 14 let viewBg = UIView(frame: CGRect(x: 0, y: 0, width: 160, height: 60)) 15 //設置視圖對象的背景顏色為橙色 16 viewBg.backgroundColor = UIColor.orange 17 //層的不透明度為0.5 18 viewBg.layer.opacity = 0.5 19 20 //初始化一個指定顯示區域的標簽控件。 21 let label = UILabel(frame: CGRect(x: 0, y: 0, width: 160, height: 30)) 22 //設置標簽的文字內容。 23 label.text = "MobilePlayerOverlay" 24 //設置標簽的字體顏色。 25 label.textColor = UIColor.white 26 //設置標簽的文字對齊方式為劇中。 27 label.textAlignment = .center 28 //設置標簽的字體屬性 29 label.font = UIFont(name: "Arial", size: 14) 30 //將標簽添加到根視圖 31 self.view.addSubview(label) 32 //將浮動視圖添加到根視圖 33 self.view.addSubview(viewBg) 34 35 //初始化一個按鈕控件 36 let btn = UIButton(frame: CGRect(x: 40, y: 35, width: 80, height: 20)) 37 //設置按鈕在正常狀態下的標題文字 38 btn.setTitle("Message", for: .normal) 39 //設置按鈕的背景顏色為紫色 40 btn.backgroundColor = UIColor.purple 41 //設置按鈕上的文字的字體屬性 42 btn.titleLabel?.font = UIFont(name: "Arial", size: 14) 43 //給按鈕綁定點擊事件 44 btn.addTarget(self, action: #selector(OverlayViewController.btnPressed(_:)), for: .touchUpInside) 45 46 //將按鈕添加到根視圖 47 self.view.addSubview(btn) 48 } 49 50 //添加一個方法,用來響應按鈕的點擊事件 51 @objc func btnPressed(_ btn:UIButton) 52 { 53 print("Button pressed.") 54 } 55 56 override func didReceiveMemoryWarning() { 57 super.didReceiveMemoryWarning() 58 // Dispose of any resources that can be recreated. 59 } 60 }

在項目文件夾上點擊鼠標右鍵,彈出右鍵菜單。

【New File->【Cocoa Touch->【Next】->

【Class】:PauseOverlayViewController

【Subclass of:MobilePlayerOverlayViewController

【Language】:Swift

->Create

在類【PauseOverlayViewController.swift】創建一個包含暫停視圖的視頻播放器,

當用戶點擊播放器按鈕時,顯示該視圖。

 1 import UIKit
 2 //引入已經安裝的第三方類庫
 3 import MobilePlayer
 4 
 5 class PauseOverlayViewController: MobilePlayerOverlayViewController {
 6 
 7     override func viewDidLoad() {
 8         super.viewDidLoad()
 9 
10         // Do any additional setup after loading the view.
11         
12         //初始化一個指定顯示區域的視圖對象
13         let viewBg = UIView(frame: CGRect(x:0, y: 0, width: 280, height: 120))
14         //設置視圖對象的背景顏色為黑色
15         viewBg.backgroundColor = UIColor.black
16         //設置視圖對象中心點的位置
17         viewBg.center = CGPoint(x:284, y:100)
18         //設置視圖層的不透明度為0.75
19         viewBg.layer.opacity = 0.75
20         
21         //初始化一個和視圖對象相同顯示區域的標簽視圖
22         let label = UILabel(frame: CGRect(x: 0, y: 0, width: 280, height: 120))
23         //設置標簽的文字內容
24         label.text = "Your Ad here"
25         //設置標簽的文字的顏色
26         label.textColor = UIColor.white
27         //將標簽放置在和視圖對象相同的位置,
28         label.center = CGPoint(x:284, y:100)
29         //並設置標簽的文字對齊方式為居中。
30         label.textAlignment = .center
31         //設置標簽的字體屬性,將標簽添加到根視圖。
32         label.font = UIFont(name: "Arial", size: 36)
33         //最後將標簽對象添加到根視圖
34         self.view.addSubview(label)
35          //最後將視圖對象添加到根視圖
36         self.view.addSubview(viewBg)
37     }
38 
39     override func didReceiveMemoryWarning() {
40         super.didReceiveMemoryWarning()
41         // Dispose of any resources that can be recreated.
42     }
43 }

在左側的項目導航區,打開視圖控制器的代碼文件【ViewController.swift】

現在開始編寫代碼,依次實現各種風格的視頻控制器。

  1 import UIKit
  2 //引入已經安裝的第三方類庫
  3 import MobilePlayer
  4 
  5 class ViewController: UIViewController {
  6 
  7     override func viewDidLoad() {
  8         super.viewDidLoad()
  9         // Do any additional setup after loading the view, typically from a nib.
 10         
 11         //添加一個按鈕,當用戶點擊該按鈕時,彈出視頻播放器窗口。
 12         let btn = UIButton(frame: CGRect(x: 0, y: 0, width: 280, height: 40))
 13         //將按鈕添加到根視圖的中心位置
 14         btn.center = self.view.center
 15         //設置按鈕的背景顏色為橙色
 16         btn.backgroundColor = UIColor.orange
 17         //設置按鈕在正常狀態下的標題文字
 18         btn.setTitle("Play", for: .normal)
 19         //給按鈕控件綁定點擊事件
 20         btn.addTarget(self, action: #selector(ViewController.playVideo(_:)), for: .touchUpInside)
 21         
 22         //將按鈕控件添加到根視圖
 23         self.view.addSubview(btn)
 24     }
 25 
 26     //添加一個方法,用來響應按鈕的點擊事件
 27     @objc func playVideo(_ btn:UIButton)
 28     {
 29         //當按鈕被點擊時,將首先創建一個擁有水印的視頻播放器
 30         watermarkExample()
 31         
 32         //修改方法名稱
 33         //對視頻播放器的外觀進行設置
 34          AdvancedConfigExample()
 35         //創建一個包含懸浮視圖的播放器。
 36          showingOverlays()
 37         //為播放器添加一個自定義的暫停頁面
 38         pauseOverlay()
 39     }
 40     
 41     //添加一個方法,用來創建一個包含水印的視頻播放器
 42     func watermarkExample()
 43     {
 44         //獲得項目中視頻文件的路徑
 45         let path = Bundle.main.path(forResource: "movie", ofType: "mp4")
 46         //將路徑轉換成網址對象
 47         let movieUrl = URL(fileURLWithPath: path!)
 48         
 49         //初始化一個視頻播放器視圖控制器對象,並設置視頻文件的路徑,
 50         //同時創建一個字典對象,設置播放器的水印圖片。
 51         let playerVC = MobilePlayerViewController(contentURL: movieUrl, config: MobilePlayerConfig(
 52             dictionary: ["watermark": ["image": "coolketang"]]), prerollViewController: nil, pauseOverlayViewController: nil, postrollViewController: nil)
 53         //調用播放器對象的填充視頻方法,將視頻填充播放器的視圖
 54         playerVC.fillVideo()
 55         //設置視頻播放器的標題文字
 56         playerVC.title = "Strengthen - 1"
 57         //設置播放器的視頻播放列表
 58         playerVC.activityItems = [movieUrl]
 59         
 60         //在當前的視圖控制器,打開視圖播放器窗口。
 61         presentMoviePlayerViewControllerAnimated(playerVC)
 62     }
 63     
 64      //添加一個方法,使用配置文件,對視頻播放器的外觀進行設置。
 65     //如包含分享圖標。
 66     func AdvancedConfigExample()
 67     {
 68         //獲取項目中的視頻文件的路徑
 69         let path = Bundle.main.path(forResource: "movie", ofType: "mp4")
 70         //將路徑轉換成一個網址對象
 71         let videoURL = URL(fileURLWithPath: path!)
 72         
 73         //獲得項目的主路徑
 74         let bundle = Bundle.main
 75         //加載指定位置的配置文件,
 76         //並創建一個視頻播放器配置對象。
 77         let config = MobilePlayerConfig(fileURL: bundle.url(
 78             forResource: "MovielalaPlayer", withExtension: "json")!)
 79         //使用配置文件,初始化一個視頻播放器視圖控制器對象。
 80         let playerVC = MobilePlayerViewController(
 81             contentURL: videoURL, config: config)
 82         
 83         //設置視頻播放器的標題文字
 84         playerVC.title = "Strengthen - 2"
 85         //設置播放器的視頻播放列表
 86         playerVC.activityItems = [videoURL]
 87         
 88         //在當前的視圖控制器,打開視頻播放器窗口
 89         presentMoviePlayerViewControllerAnimated(playerVC)
 90     }
 91     
 92     //添加一個方法,創建一個包含懸浮視圖的播放器。
 93     func showingOverlays()
 94     {
 95         //獲得項目中視頻文件的路徑
 96         let path = Bundle.main.path(forResource: "movie", ofType: "mp4")
 97         //將路徑轉換成一個網址對象
 98         let videoURL = URL(fileURLWithPath: path!)
 99         
100         //使用指定的視頻路徑,初始化一個視頻播放器
101         let playerVC = MobilePlayerViewController(contentURL: videoURL)
102         //設置視頻播放器的標題文字
103         playerVC.title = "Strengthen - 3"
104         //設置播放器的視頻播放列表
105         playerVC.activityItems = [videoURL]
106         //在當前的視圖控制器打開視頻播放器窗口
107         presentMoviePlayerViewControllerAnimated(playerVC)
108         
109         //在視頻播放2秒之後,在播放器的上方,顯示一個懸浮視圖控制器,並持續4秒。
110         playerVC.showOverlayViewController(OverlayViewController(), startingAtTime: 2, forDuration: 4)
111     }
112     
113      //添加一個方法,為播放器添加一個自定義的暫停頁面。
114     //可以在視頻播放的暫停頁面,添加一些滾動的廣告內容。
115     func pauseOverlay()
116     {
117         //獲得項目中視頻文件的路徑
118         let path = Bundle.main.path(forResource: "movie", ofType: "mp4")
119          //將路徑轉換成一個網址對象
120         let videoURL = URL(fileURLWithPath: path!)
121         
122         //使用指定的視頻路徑,初始化一個視頻播放器,
123         //並設置播放器的暫停頁面,
124         //該暫停頁面就是自定義的一個視圖控制器。
125         let playerVC = MobilePlayerViewController(
126             contentURL: videoURL,
127             pauseOverlayViewController: PauseOverlayViewController())
128         //設置視頻播放器的標題文字
129         playerVC.title = "Strengthen"
130         //設置播放器的視頻播放列表
131         playerVC.activityItems = [videoURL]
132         
133         //在當前的視圖控制器打開視頻播放器窗口
134         presentMoviePlayerViewControllerAnimated(playerVC)
135     }
136     
137     override func didReceiveMemoryWarning() {
138         super.didReceiveMemoryWarning()
139         // Dispose of any resources that can be recreated.
140     }
141 }

[Swift通天遁地]八、媒體與動畫-(3)實現視頻播放的水印、Overlay、暫停時插入廣告等效果