[Swift通天遁地]八、媒體與動畫-(3)實現視頻播放的水印、Overlay、暫停時插入廣告等效果
本文將演示使用第三方類庫實現視頻視頻播放的水印、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、暫停時插入廣告等效果