scratch – Blame information for rev 115
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
115 | office | 1 | /* |
2 | * blueimp Gallery Vimeo Video Factory JS |
||
3 | * https://github.com/blueimp/Gallery |
||
4 | * |
||
5 | * Copyright 2013, Sebastian Tschan |
||
6 | * https://blueimp.net |
||
7 | * |
||
8 | * Licensed under the MIT license: |
||
9 | * https://opensource.org/licenses/MIT |
||
10 | */ |
||
11 | |||
12 | /* global define, window, document, $f */ |
||
13 | |||
14 | ;(function (factory) { |
||
15 | 'use strict' |
||
16 | if (typeof define === 'function' && define.amd) { |
||
17 | // Register as an anonymous AMD module: |
||
18 | define([ |
||
19 | './blueimp-helper', |
||
20 | './blueimp-gallery-video' |
||
21 | ], factory) |
||
22 | } else { |
||
23 | // Browser globals: |
||
24 | factory( |
||
25 | window.blueimp.helper || window.jQuery, |
||
26 | window.blueimp.Gallery |
||
27 | ) |
||
28 | } |
||
29 | }(function ($, Gallery) { |
||
30 | 'use strict' |
||
31 | |||
32 | if (!window.postMessage) { |
||
33 | return Gallery |
||
34 | } |
||
35 | |||
36 | $.extend(Gallery.prototype.options, { |
||
37 | // The list object property (or data attribute) with the Vimeo video id: |
||
38 | vimeoVideoIdProperty: 'vimeo', |
||
39 | // The URL for the Vimeo video player, can be extended with custom parameters: |
||
40 | // https://developer.vimeo.com/player/embedding |
||
41 | vimeoPlayerUrl: '//player.vimeo.com/video/VIDEO_ID?api=1&player_id=PLAYER_ID', |
||
42 | // The prefix for the Vimeo video player ID: |
||
43 | vimeoPlayerIdPrefix: 'vimeo-player-', |
||
44 | // Require a click on the native Vimeo player for the initial playback: |
||
45 | vimeoClickToPlay: true |
||
46 | }) |
||
47 | |||
48 | var textFactory = Gallery.prototype.textFactory || |
||
49 | Gallery.prototype.imageFactory |
||
50 | var VimeoPlayer = function (url, videoId, playerId, clickToPlay) { |
||
51 | this.url = url |
||
52 | this.videoId = videoId |
||
53 | this.playerId = playerId |
||
54 | this.clickToPlay = clickToPlay |
||
55 | this.element = document.createElement('div') |
||
56 | this.listeners = {} |
||
57 | } |
||
58 | var counter = 0 |
||
59 | |||
60 | $.extend(VimeoPlayer.prototype, { |
||
61 | canPlayType: function () { |
||
62 | return true |
||
63 | }, |
||
64 | |||
65 | on: function (type, func) { |
||
66 | this.listeners[type] = func |
||
67 | return this |
||
68 | }, |
||
69 | |||
70 | loadAPI: function () { |
||
71 | var that = this |
||
72 | var apiUrl = '//f.vimeocdn.com/js/froogaloop2.min.js' |
||
73 | var scriptTags = document.getElementsByTagName('script') |
||
74 | var i = scriptTags.length |
||
75 | var scriptTag |
||
76 | var called |
||
77 | function callback () { |
||
78 | if (!called && that.playOnReady) { |
||
79 | that.play() |
||
80 | } |
||
81 | called = true |
||
82 | } |
||
83 | while (i) { |
||
84 | i -= 1 |
||
85 | if (scriptTags[i].src === apiUrl) { |
||
86 | scriptTag = scriptTags[i] |
||
87 | break |
||
88 | } |
||
89 | } |
||
90 | if (!scriptTag) { |
||
91 | scriptTag = document.createElement('script') |
||
92 | scriptTag.src = apiUrl |
||
93 | } |
||
94 | $(scriptTag).on('load', callback) |
||
95 | scriptTags[0].parentNode.insertBefore(scriptTag, scriptTags[0]) |
||
96 | // Fix for cached scripts on IE 8: |
||
97 | if (/loaded|complete/.test(scriptTag.readyState)) { |
||
98 | callback() |
||
99 | } |
||
100 | }, |
||
101 | |||
102 | onReady: function () { |
||
103 | var that = this |
||
104 | this.ready = true |
||
105 | this.player.addEvent('play', function () { |
||
106 | that.hasPlayed = true |
||
107 | that.onPlaying() |
||
108 | }) |
||
109 | this.player.addEvent('pause', function () { |
||
110 | that.onPause() |
||
111 | }) |
||
112 | this.player.addEvent('finish', function () { |
||
113 | that.onPause() |
||
114 | }) |
||
115 | if (this.playOnReady) { |
||
116 | this.play() |
||
117 | } |
||
118 | }, |
||
119 | |||
120 | onPlaying: function () { |
||
121 | if (this.playStatus < 2) { |
||
122 | this.listeners.playing() |
||
123 | this.playStatus = 2 |
||
124 | } |
||
125 | }, |
||
126 | |||
127 | onPause: function () { |
||
128 | this.listeners.pause() |
||
129 | delete this.playStatus |
||
130 | }, |
||
131 | |||
132 | insertIframe: function () { |
||
133 | var iframe = document.createElement('iframe') |
||
134 | iframe.src = this.url |
||
135 | .replace('VIDEO_ID', this.videoId) |
||
136 | .replace('PLAYER_ID', this.playerId) |
||
137 | iframe.id = this.playerId |
||
138 | this.element.parentNode.replaceChild(iframe, this.element) |
||
139 | this.element = iframe |
||
140 | }, |
||
141 | |||
142 | play: function () { |
||
143 | var that = this |
||
144 | if (!this.playStatus) { |
||
145 | this.listeners.play() |
||
146 | this.playStatus = 1 |
||
147 | } |
||
148 | if (this.ready) { |
||
149 | if (!this.hasPlayed && (this.clickToPlay || (window.navigator && |
||
150 | /iP(hone|od|ad)/.test(window.navigator.platform)))) { |
||
151 | // Manually trigger the playing callback if clickToPlay |
||
152 | // is enabled and to workaround a limitation in iOS, |
||
153 | // which requires synchronous user interaction to start |
||
154 | // the video playback: |
||
155 | this.onPlaying() |
||
156 | } else { |
||
157 | this.player.api('play') |
||
158 | } |
||
159 | } else { |
||
160 | this.playOnReady = true |
||
161 | if (!window.$f) { |
||
162 | this.loadAPI() |
||
163 | } else if (!this.player) { |
||
164 | this.insertIframe() |
||
165 | this.player = $f(this.element) |
||
166 | this.player.addEvent('ready', function () { |
||
167 | that.onReady() |
||
168 | }) |
||
169 | } |
||
170 | } |
||
171 | }, |
||
172 | |||
173 | pause: function () { |
||
174 | if (this.ready) { |
||
175 | this.player.api('pause') |
||
176 | } else if (this.playStatus) { |
||
177 | delete this.playOnReady |
||
178 | this.listeners.pause() |
||
179 | delete this.playStatus |
||
180 | } |
||
181 | } |
||
182 | |||
183 | }) |
||
184 | |||
185 | $.extend(Gallery.prototype, { |
||
186 | VimeoPlayer: VimeoPlayer, |
||
187 | |||
188 | textFactory: function (obj, callback) { |
||
189 | var options = this.options |
||
190 | var videoId = this.getItemProperty(obj, options.vimeoVideoIdProperty) |
||
191 | if (videoId) { |
||
192 | if (this.getItemProperty(obj, options.urlProperty) === undefined) { |
||
193 | obj[options.urlProperty] = '//vimeo.com/' + videoId |
||
194 | } |
||
195 | counter += 1 |
||
196 | return this.videoFactory( |
||
197 | obj, |
||
198 | callback, |
||
199 | new VimeoPlayer( |
||
200 | options.vimeoPlayerUrl, |
||
201 | videoId, |
||
202 | options.vimeoPlayerIdPrefix + counter, |
||
203 | options.vimeoClickToPlay |
||
204 | ) |
||
205 | ) |
||
206 | } |
||
207 | return textFactory.call(this, obj, callback) |
||
208 | } |
||
209 | |||
210 | }) |
||
211 | |||
212 | return Gallery |
||
213 | })) |