[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 }

 

上一篇:javascript – is(:visible)返回true,即使overlay是隐藏的jQuery


下一篇:javascript – 在Google地图中单击多边形内部