1 IriSP.Widgets.HtmlMashupPlayer = function(player, config) { |
1 //HtmlMashupPlayer |
2 IriSP.Widgets.Widget.call(this, player, config); |
2 |
3 }; |
3 const HtmlMashupPlayer = function (ns) { |
4 |
4 return class extends ns.Widgets.Widget { |
5 IriSP.Widgets.HtmlMashupPlayer.prototype = new IriSP.Widgets.Widget(); |
5 constructor(player, config) { |
6 |
6 super(player, config); |
7 |
7 } |
8 IriSP.Widgets.HtmlMashupPlayer.prototype.defaults = { |
8 |
9 aspect_ratio: 14/9, |
9 static defaults = { |
10 background: "#333333" |
10 aspect_ratio: 14 / 9, |
11 }; |
11 background: "#333333", |
12 |
12 }; |
13 IriSP.Widgets.HtmlMashupPlayer.prototype.draw = function() { |
13 |
14 |
14 draw() { |
15 if (!this.height && this.aspect_ratio) { |
15 if (!this.height && this.aspect_ratio) { |
16 this.height = this.width / this.aspect_ratio; |
16 this.height = this.width / this.aspect_ratio; |
17 this.$.css("height", this.height); |
17 this.$.css("height", this.height); |
18 } |
18 } |
19 |
19 |
20 if (this.background) { |
20 if (this.background) { |
21 this.$.css("background", this.background); |
21 this.$.css("background", this.background); |
22 } |
22 } |
23 |
23 |
24 var mashup = this.media, |
24 var mashup = this.media, |
25 sel = this.$, |
25 sel = this.$, |
26 width = this.width, |
26 width = this.width, |
27 height = this.height, |
27 height = this.height, |
28 url_transform = this.url_transform; |
28 url_transform = this.url_transform; |
29 |
29 |
30 mashup.currentMedia = null; |
30 mashup.currentMedia = null; |
31 mashup.currentAnnotation = null; |
31 mashup.currentAnnotation = null; |
32 mashup.seeking = false; |
32 mashup.seeking = false; |
33 var mashupSegmentBegin, |
33 var mashupSegmentBegin, |
34 mashupSegmentEnd, |
34 mashupSegmentEnd, |
35 mashupTimecode = 0, |
35 mashupTimecode = 0, |
36 // seekdiv = $(".video-wait"), |
36 // seekdiv = $(".video-wait"), |
37 mashupTimedelta; |
37 mashupTimedelta; |
38 |
38 |
39 /* |
39 /* |
40 function showSeek() { |
40 function showSeek() { |
41 if (currentMedia.seeking) { |
41 if (currentMedia.seeking) { |
42 seekdiv.show(); |
42 seekdiv.show(); |
43 } |
43 } |
44 } |
44 } |
45 */ |
45 */ |
46 |
46 |
47 function changeCurrentAnnotation() { |
47 function changeCurrentAnnotation() { |
48 if (mashupTimecode >= mashup.duration) { |
48 if (mashupTimecode >= mashup.duration) { |
|
49 if (!mashup.paused) { |
|
50 mashup.paused = true; |
|
51 mashup.trigger("pause"); |
|
52 } |
|
53 mashupTimecode = 0; |
|
54 } |
|
55 var _annotation = mashup.getAnnotationAtTime(mashupTimecode); |
|
56 if (typeof _annotation === "undefined") { |
|
57 if (mashup.currentMedia) { |
|
58 mashup.currentMedia.pause(); |
49 if (!mashup.paused) { |
59 if (!mashup.paused) { |
50 mashup.paused = true; |
60 mashup.paused = true; |
51 mashup.trigger("pause"); |
61 mashup.trigger("pause"); |
52 } |
62 } |
53 mashupTimecode = 0; |
63 } |
54 } |
64 return; |
55 var _annotation = mashup.getAnnotationAtTime( mashupTimecode ); |
|
56 if (typeof _annotation === "undefined") { |
|
57 if (mashup.currentMedia) { |
|
58 mashup.currentMedia.pause(); |
|
59 if (!mashup.paused) { |
|
60 mashup.paused = true; |
|
61 mashup.trigger("pause"); |
|
62 } |
|
63 } |
|
64 return; |
|
65 } |
65 } |
66 mashup.currentAnnotation = _annotation; |
66 mashup.currentAnnotation = _annotation; |
67 mashupSegmentBegin = mashup.currentAnnotation.annotation.begin.milliseconds; |
67 mashupSegmentBegin = |
|
68 mashup.currentAnnotation.annotation.begin.milliseconds; |
68 mashupSegmentEnd = mashup.currentAnnotation.annotation.end.milliseconds; |
69 mashupSegmentEnd = mashup.currentAnnotation.annotation.end.milliseconds; |
69 mashupTimedelta = mashupSegmentBegin - mashup.currentAnnotation.begin.milliseconds; |
70 mashupTimedelta = |
|
71 mashupSegmentBegin - mashup.currentAnnotation.begin.milliseconds; |
70 mashup.currentMedia = mashup.currentAnnotation.getMedia(); |
72 mashup.currentMedia = mashup.currentAnnotation.getMedia(); |
71 mashup.getMedias().forEach(function(_media) { |
73 mashup.getMedias().forEach(function (_media) { |
72 if (_media !== mashup.currentMedia) { |
74 if (_media !== mashup.currentMedia) { |
73 _media.hide(); |
75 _media.hide(); |
74 _media.pause(); |
76 _media.pause(); |
75 } else { |
77 } else { |
76 _media.show(); |
78 _media.show(); |
77 } |
79 } |
78 }); |
80 }); |
79 |
81 |
80 mashup.currentMedia.setCurrentTime( mashupTimecode + mashupTimedelta); |
82 mashup.currentMedia.setCurrentTime(mashupTimecode + mashupTimedelta); |
81 mashup.currentMedia.seeking = true; |
83 mashup.currentMedia.seeking = true; |
82 |
84 |
83 if (!mashup.paused) { |
85 if (!mashup.paused) { |
84 mashup.currentMedia.play(); |
86 mashup.currentMedia.play(); |
85 mashup.seeking = true; |
87 mashup.seeking = true; |
86 // setTimeout(showSeek,200); |
88 // setTimeout(showSeek,200); |
87 } |
89 } |
88 mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode)); |
90 mashup.trigger("timeupdate", new ns.Model.Time(mashupTimecode)); |
89 |
91 } |
90 } |
92 |
91 |
93 mashup.getMedias().forEach(addMedia); |
92 mashup.getMedias().forEach(addMedia); |
94 changeCurrentAnnotation(); |
93 changeCurrentAnnotation(); |
95 mashup.trigger("loadedmetadata"); |
94 mashup.trigger("loadedmetadata"); |
96 |
95 |
97 function addMedia(media) { |
96 function addMedia(media) { |
|
97 if (media.has_player) { |
98 if (media.has_player) { |
98 return; |
99 return; |
99 } |
100 } |
100 media.has_player = true; |
101 media.has_player = true; |
101 var videourl = media.video; |
102 var videourl = media.video; |
102 if (typeof url_transform === "function") { |
103 if (typeof url_transform === "function") { |
103 videourl = url_transform(media.video); |
104 videourl = url_transform(media.video); |
104 } |
105 } |
105 var videoid = "video_" + media.id, |
106 var videoid = "video_" + media.id, |
106 videoElement; |
107 videoElement; |
107 |
108 |
108 media.show = function() { |
109 media.show = function () { |
109 |
110 if (document.getElementById(videoid)) { |
110 if (document.getElementById(videoid)) { |
111 return; |
111 return; |
112 } |
112 } |
113 |
113 |
114 media.loaded = false; |
114 media.loaded = false; |
115 media.paused = true; |
115 media.paused = true; |
116 var videoSelector = $("<video>"); |
116 var videoSelector = $('<video>'); |
117 |
117 |
118 videoSelector |
118 videoSelector.attr({ |
119 .attr({ |
119 id : videoid, |
120 id: videoid, |
120 width : width, |
121 width: width, |
121 height : height |
122 height: height, |
122 }).css({ |
123 }) |
123 width: width, |
124 .css({ |
124 height: height |
125 width: width, |
|
126 height: height, |
125 }); |
127 }); |
126 |
128 |
127 if (typeof videourl === "string") { |
129 if (typeof videourl === "string") { |
128 videoSelector.attr( "src", videourl ); |
130 videoSelector.attr("src", videourl); |
|
131 } else { |
|
132 for (var i = 0; i < videourl.length; i++) { |
|
133 var _srcNode = ns.jQuery("<source>"); |
|
134 _srcNode.attr({ |
|
135 src: videourl[i].src, |
|
136 type: videourl[i].type, |
|
137 }); |
|
138 videoSelector.append(_srcNode); |
|
139 } |
|
140 } |
|
141 |
|
142 sel.append(videoSelector); |
|
143 |
|
144 videoElement = videoSelector[0]; |
|
145 |
|
146 // Binding DOM events to media |
|
147 |
|
148 function getVolume() { |
|
149 media.muted = videoElement.muted; |
|
150 media.volume = videoElement.volume; |
|
151 } |
|
152 |
|
153 videoSelector.on("loadedmetadata", function () { |
|
154 getVolume(); |
|
155 media.loaded = true; |
|
156 media.trigger("loadedmetadata"); |
|
157 media.trigger("volumechange"); |
|
158 }); |
|
159 |
|
160 videoSelector.on("timeupdate", function () { |
|
161 media.trigger( |
|
162 "timeupdate", |
|
163 new ns.Model.Time(1000 * videoElement.currentTime) |
|
164 ); |
|
165 }); |
|
166 |
|
167 videoSelector.on("volumechange", function () { |
|
168 getVolume(); |
|
169 media.trigger("volumechange"); |
|
170 }); |
|
171 |
|
172 videoSelector.on("play", function () { |
|
173 media.trigger("play"); |
|
174 }); |
|
175 |
|
176 videoSelector.on("pause", function () { |
|
177 media.trigger("pause"); |
|
178 }); |
|
179 |
|
180 videoSelector.on("seeking", function () { |
|
181 media.trigger("seeking"); |
|
182 }); |
|
183 |
|
184 videoSelector.on("seeked", function () { |
|
185 media.trigger("seeked"); |
|
186 }); |
|
187 }; |
|
188 |
|
189 media.hide = function () { |
|
190 videoElement = undefined; |
|
191 sel.find("#" + videoid).remove(); |
|
192 }; |
|
193 |
|
194 // Binding functions to Media Element Functions |
|
195 |
|
196 var deferredTime = undefined, |
|
197 deferredPlayPause = undefined; |
|
198 |
|
199 media.on("setcurrenttime", function (_milliseconds) { |
|
200 if ( |
|
201 videoElement && |
|
202 videoElement.readyState >= videoElement.HAVE_METADATA |
|
203 ) { |
|
204 try { |
|
205 videoElement.currentTime = _milliseconds / 1000; |
|
206 deferredTime = undefined; |
|
207 } catch (err) { |
|
208 deferredTime = _milliseconds; |
|
209 } |
|
210 } else { |
|
211 deferredTime = _milliseconds; |
|
212 } |
|
213 }); |
|
214 |
|
215 media.on("setvolume", function (_vol) { |
|
216 if ( |
|
217 videoElement && |
|
218 videoElement.readyState >= videoElement.HAVE_METADATA |
|
219 ) { |
|
220 media.volume = _vol; |
|
221 videoElement.volume = _vol; |
|
222 } |
|
223 }); |
|
224 |
|
225 media.on("setmuted", function (_muted) { |
|
226 if ( |
|
227 videoElement && |
|
228 videoElement.readyState >= videoElement.HAVE_METADATA |
|
229 ) { |
|
230 media.muted = _muted; |
|
231 videoElement.muted = _muted; |
|
232 } |
|
233 }); |
|
234 |
|
235 media.on("setplay", function () { |
|
236 if ( |
|
237 videoElement && |
|
238 videoElement.readyState >= videoElement.HAVE_METADATA |
|
239 ) { |
|
240 try { |
|
241 videoElement.play(); |
|
242 deferredPlayPause = undefined; |
|
243 } catch (err) { |
|
244 deferredPlayPause = true; |
|
245 } |
|
246 } else { |
|
247 deferredPlayPause = true; |
|
248 } |
|
249 }); |
|
250 |
|
251 media.on("setpause", function () { |
|
252 if ( |
|
253 videoElement && |
|
254 videoElement.readyState >= videoElement.HAVE_METADATA |
|
255 ) { |
|
256 try { |
|
257 videoElement.pause(); |
|
258 deferredPlayPause = undefined; |
|
259 } catch (err) { |
|
260 deferredPlayPause = false; |
|
261 } |
|
262 } else { |
|
263 deferredPlayPause = false; |
|
264 } |
|
265 }); |
|
266 |
|
267 media.on("loadedmetadata", function () { |
|
268 if (typeof deferredTime !== "undefined") { |
|
269 media.setCurrentTime(deferredTime); |
|
270 } |
|
271 if (typeof deferredPlayPause !== "undefined") { |
|
272 if (deferredPlayPause) { |
|
273 media.play(); |
129 } else { |
274 } else { |
130 for (var i = 0; i < videourl.length; i++) { |
275 media.pause(); |
131 var _srcNode = IriSP.jQuery('<source>'); |
276 } |
132 _srcNode.attr({ |
277 } |
133 src: videourl[i].src, |
278 }); |
134 type: videourl[i].type |
279 |
135 }); |
280 // Binding UI Events and Mashup Playing to Media |
136 videoSelector.append(_srcNode); |
281 |
137 } |
282 media.on("play", function () { |
138 } |
283 if (media === mashup.currentMedia) { |
139 |
284 mashup.trigger("play"); |
140 sel.append(videoSelector); |
285 } |
141 |
286 }); |
142 videoElement = videoSelector[0]; |
287 |
143 |
288 media.on("pause", function () { |
144 // Binding DOM events to media |
289 if (media === mashup.currentMedia) { |
145 |
290 mashup.trigger("pause"); |
146 function getVolume() { |
291 } |
147 media.muted = videoElement.muted; |
292 }); |
148 media.volume = videoElement.volume; |
293 |
149 } |
294 media.on("timeupdate", function (_time) { |
150 |
295 if ( |
151 videoSelector.on("loadedmetadata", function() { |
296 !mashup.paused && |
152 getVolume(); |
297 media === mashup.currentMedia && |
153 media.loaded = true; |
298 !media.seeking |
154 media.trigger("loadedmetadata"); |
299 ) { |
155 media.trigger("volumechange"); |
300 if (_time < mashupSegmentEnd) { |
156 }); |
301 if (_time >= mashupSegmentBegin) { |
157 |
302 mashupTimecode = _time - mashupTimedelta; |
158 videoSelector.on("timeupdate", function() { |
303 } else { |
159 media.trigger("timeupdate", new IriSP.Model.Time(1000*videoElement.currentTime)); |
304 mashupTimecode = mashupSegmentBegin - mashupTimedelta; |
160 }); |
305 media.setCurrentTime(mashupSegmentBegin); |
161 |
306 } |
162 videoSelector.on("volumechange", function() { |
|
163 getVolume(); |
|
164 media.trigger("volumechange"); |
|
165 }); |
|
166 |
|
167 videoSelector.on("play", function() { |
|
168 media.trigger("play"); |
|
169 }); |
|
170 |
|
171 videoSelector.on("pause", function() { |
|
172 media.trigger("pause"); |
|
173 }); |
|
174 |
|
175 videoSelector.on("seeking", function() { |
|
176 media.trigger("seeking"); |
|
177 }); |
|
178 |
|
179 videoSelector.on("seeked", function() { |
|
180 media.trigger("seeked"); |
|
181 }); |
|
182 }; |
|
183 |
|
184 media.hide = function() { |
|
185 videoElement = undefined; |
|
186 sel.find("#" + videoid).remove(); |
|
187 }; |
|
188 |
|
189 // Binding functions to Media Element Functions |
|
190 |
|
191 var deferredTime = undefined, |
|
192 deferredPlayPause = undefined; |
|
193 |
|
194 media.on("setcurrenttime", function(_milliseconds) { |
|
195 if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) { |
|
196 try { |
|
197 videoElement.currentTime = (_milliseconds / 1000); |
|
198 deferredTime = undefined; |
|
199 } catch(err) { |
|
200 deferredTime = _milliseconds; |
|
201 } |
|
202 } else { |
307 } else { |
203 deferredTime = _milliseconds; |
308 mashupTimecode = mashupSegmentEnd - mashupTimedelta; |
204 } |
309 media.pause(); |
205 }); |
310 changeCurrentAnnotation(); |
206 |
311 } |
207 media.on("setvolume", function(_vol) { |
312 mashup.trigger("timeupdate", new ns.Model.Time(mashupTimecode)); |
208 if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) { |
313 } |
209 media.volume = _vol; |
314 }); |
210 videoElement.volume = _vol; |
315 |
211 } |
316 media.on("seeked", function () { |
212 }); |
317 media.seeking = false; |
213 |
318 if (media === mashup.currentMedia && mashup.seeking) { |
214 media.on("setmuted", function(_muted) { |
319 mashup.seeking = false; |
215 if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) { |
320 } |
216 media.muted = _muted; |
321 // seekdiv.hide(); |
217 videoElement.muted = _muted; |
322 }); |
218 } |
323 |
219 }); |
324 media.on("volumechange", function () { |
220 |
325 mashup.muted = media.muted; |
221 media.on("setplay", function() { |
326 mashup.volume = media.volume; |
222 if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) { |
327 mashup.trigger("volumechange"); |
223 try { |
328 }); |
224 videoElement.play(); |
329 } |
225 deferredPlayPause = undefined; |
330 |
226 } catch(err) { |
331 // Mashup Events |
227 deferredPlayPause = true; |
332 |
228 } |
333 mashup.on("setcurrenttime", function (_milliseconds) { |
229 } else { |
|
230 deferredPlayPause = true; |
|
231 } |
|
232 }); |
|
233 |
|
234 media.on("setpause", function() { |
|
235 if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) { |
|
236 try { |
|
237 videoElement.pause(); |
|
238 deferredPlayPause = undefined; |
|
239 } catch(err) { |
|
240 deferredPlayPause = false; |
|
241 } |
|
242 } else { |
|
243 deferredPlayPause = false; |
|
244 } |
|
245 }); |
|
246 |
|
247 media.on("loadedmetadata", function() { |
|
248 if (typeof deferredTime !== "undefined") { |
|
249 media.setCurrentTime(deferredTime); |
|
250 } |
|
251 if (typeof deferredPlayPause !== "undefined") { |
|
252 if (deferredPlayPause) { |
|
253 media.play(); |
|
254 } else { |
|
255 media.pause(); |
|
256 } |
|
257 } |
|
258 }); |
|
259 |
|
260 // Binding UI Events and Mashup Playing to Media |
|
261 |
|
262 media.on("play", function() { |
|
263 if (media === mashup.currentMedia) { |
|
264 mashup.trigger("play"); |
|
265 } |
|
266 }); |
|
267 |
|
268 media.on("pause", function() { |
|
269 if (media === mashup.currentMedia) { |
|
270 mashup.trigger("pause"); |
|
271 } |
|
272 }); |
|
273 |
|
274 media.on("timeupdate", function(_time) { |
|
275 if (!mashup.paused && media === mashup.currentMedia && !media.seeking) { |
|
276 if ( _time < mashupSegmentEnd ) { |
|
277 if ( _time >= mashupSegmentBegin ) { |
|
278 mashupTimecode = _time - mashupTimedelta; |
|
279 } else { |
|
280 mashupTimecode = mashupSegmentBegin - mashupTimedelta; |
|
281 media.setCurrentTime(mashupSegmentBegin); |
|
282 } |
|
283 } else { |
|
284 mashupTimecode = mashupSegmentEnd - mashupTimedelta; |
|
285 media.pause(); |
|
286 changeCurrentAnnotation(); |
|
287 } |
|
288 mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode)); |
|
289 } |
|
290 }); |
|
291 |
|
292 media.on("seeked", function() { |
|
293 media.seeking = false; |
|
294 if (media === mashup.currentMedia && mashup.seeking) { |
|
295 mashup.seeking = false; |
|
296 } |
|
297 // seekdiv.hide(); |
|
298 }); |
|
299 |
|
300 media.on("volumechange", function() { |
|
301 mashup.muted = media.muted; |
|
302 mashup.volume = media.volume; |
|
303 mashup.trigger("volumechange"); |
|
304 }); |
|
305 |
|
306 } |
|
307 |
|
308 // Mashup Events |
|
309 |
|
310 mashup.on("setcurrenttime", function(_milliseconds) { |
|
311 mashupTimecode = _milliseconds; |
334 mashupTimecode = _milliseconds; |
312 changeCurrentAnnotation(); |
335 changeCurrentAnnotation(); |
313 }); |
336 }); |
314 |
337 |
315 mashup.on("setvolume", function(_vol) { |
338 mashup.on("setvolume", function (_vol) { |
316 mashup.getMedias().forEach(function(_media) { |
339 mashup.getMedias().forEach(function (_media) { |
317 _media.setVolume(_vol); |
340 _media.setVolume(_vol); |
318 }); |
341 }); |
319 mashup.volume = _vol; |
342 mashup.volume = _vol; |
320 }); |
343 }); |
321 |
344 |
322 mashup.on("setmuted", function(_muted) { |
345 mashup.on("setmuted", function (_muted) { |
323 mashup.getMedias().forEach(function(_media) { |
346 mashup.getMedias().forEach(function (_media) { |
324 _media.setMuted(_muted); |
347 _media.setMuted(_muted); |
325 }); |
348 }); |
326 mashup.muted = _muted; |
349 mashup.muted = _muted; |
327 }); |
350 }); |
328 |
351 |
329 mashup.on("setplay", function() { |
352 mashup.on("setplay", function () { |
330 mashup.paused = false; |
353 mashup.paused = false; |
331 changeCurrentAnnotation(); |
354 changeCurrentAnnotation(); |
332 }); |
355 }); |
333 |
356 |
334 mashup.on("setpause", function() { |
357 mashup.on("setpause", function () { |
335 mashup.paused = true; |
358 mashup.paused = true; |
336 if (mashup.currentMedia) { |
359 if (mashup.currentMedia) { |
337 mashup.currentMedia.pause(); |
360 mashup.currentMedia.pause(); |
338 } |
361 } |
339 }); |
362 }); |
340 |
363 |
341 mashup.on("loadedmetadata", function() { |
364 mashup.on("loadedmetadata", function () { |
342 changeCurrentAnnotation(); |
365 changeCurrentAnnotation(); |
343 }); |
366 }); |
344 |
367 } |
|
368 }; |
345 }; |
369 }; |
|
370 |
|
371 export { HtmlMashupPlayer }; |