|
917
|
1 |
/* To wrap a player the develop should create a new class derived from |
|
|
2 |
the IriSP.PopcornReplacement.player and defining the correct functions */ |
|
|
3 |
|
|
|
4 |
/** jwplayer player wrapper */ |
|
|
5 |
IriSP.PopcornReplacement.htmlMashup = function(container, options, metadata) { |
|
|
6 |
/* appel du parent pour initialiser les structures communes à tous les players */ |
|
|
7 |
IriSP.PopcornReplacement.player.call(this, container, options); |
|
|
8 |
|
|
|
9 |
this.mashup = metadata.currentMedia; |
|
|
10 |
this.$ = IriSP.jQuery(container); |
|
|
11 |
|
|
|
12 |
var _w = this.$.width(), |
|
|
13 |
_h = this.$.height(), |
|
|
14 |
_this = this; |
|
|
15 |
|
|
|
16 |
IriSP._(metadata.currentMedia.medias).each(function(_media) { |
|
|
17 |
var _tmpId = Popcorn.guid("video"), |
|
919
|
18 |
_videoEl = IriSP.jQuery('<video>'), |
|
|
19 |
_videoUrl = _media.video; |
|
|
20 |
if (typeof options.url_transform === "function") { |
|
|
21 |
_videoUrl = options.url_transform(_videoUrl); |
|
|
22 |
} |
|
|
23 |
|
|
917
|
24 |
_videoEl |
|
|
25 |
.attr({ |
|
919
|
26 |
src : _videoUrl, |
|
917
|
27 |
id : _tmpId, |
|
|
28 |
width : _w, |
|
|
29 |
height : _h |
|
|
30 |
}) |
|
|
31 |
.css({ |
|
|
32 |
position: "absolute", |
|
|
33 |
top: 0, |
|
|
34 |
left: 0 |
|
|
35 |
}); |
|
|
36 |
|
|
|
37 |
_this.$.append(_videoEl); |
|
|
38 |
_media.videoEl = _videoEl; |
|
|
39 |
_media.popcorn = Popcorn("#" + _tmpId); |
|
919
|
40 |
_media.loadedMetadata = false; |
|
|
41 |
_media.popcorn.on("loadedmetadata", function() { |
|
|
42 |
_media.loadedMetadata = true; |
|
|
43 |
var _allLoaded = true; |
|
|
44 |
for (var _i = 0; _i < metadata.currentMedia.medias.length; _i++) { |
|
|
45 |
_allLoaded = _allLoaded && metadata.currentMedia.medias[_i].loadedMetadata; |
|
|
46 |
} |
|
|
47 |
if (_allLoaded) { |
|
|
48 |
_this.changeCurrentAnnotation(); |
|
|
49 |
_this.trigger("loadedmetadata"); |
|
|
50 |
} |
|
|
51 |
}); |
|
917
|
52 |
_media.popcorn.on("timeupdate", function() { |
|
|
53 |
if (!_this.media.paused && _media === _this.currentMedia) { |
|
919
|
54 |
var _time = Math.round( 1000 * _media.popcorn.currentTime() ); |
|
|
55 |
// var _status = "Timeupdate from " + _media.id + " at time " + _time; |
|
917
|
56 |
if ( _time < _this.segmentEnd ) { |
|
|
57 |
if ( _time >= _this.segmentBegin ) { |
|
|
58 |
_this.timecode = _time - _this.timedelta; |
|
919
|
59 |
// _status += " within segment"; |
|
917
|
60 |
} else { |
|
|
61 |
_this.timecode = _this.segmentBegin - _this.timedelta; |
|
919
|
62 |
_media.popcorn.currentTime(_this.segmentBegin / 1000); |
|
|
63 |
// _status += " before segment"; |
|
917
|
64 |
} |
|
|
65 |
} else { |
|
|
66 |
_this.timecode = _this.segmentEnd - _this.timedelta; |
|
|
67 |
_media.popcorn.pause(); |
|
|
68 |
_this.changeCurrentAnnotation(); |
|
919
|
69 |
// _status += " after segment"; |
|
917
|
70 |
} |
|
919
|
71 |
// _status += " (" + _this.segmentBegin + " to " + _this.segmentEnd + ")" + ", translated to " + _this.timecode; |
|
|
72 |
// console.log(_status); |
|
917
|
73 |
_this.trigger("timeupdate"); |
|
|
74 |
} |
|
|
75 |
}); |
|
|
76 |
}); |
|
|
77 |
|
|
|
78 |
this.timecode = 0; |
|
|
79 |
|
|
|
80 |
/* Définition des fonctions de l'API */ |
|
|
81 |
this.playerFns = { |
|
|
82 |
play: function() { |
|
|
83 |
_this.changeCurrentAnnotation(); |
|
|
84 |
}, |
|
|
85 |
pause: function() { |
|
|
86 |
_this.currentMedia.popcorn.pause(); |
|
|
87 |
}, |
|
|
88 |
getPosition: function() { |
|
919
|
89 |
return _this.timecode / 1000; |
|
917
|
90 |
}, |
|
|
91 |
seek: function(pos) { |
|
919
|
92 |
_this.timecode = Math.round(pos * 1000); |
|
917
|
93 |
_this.changeCurrentAnnotation(); |
|
|
94 |
}, |
|
|
95 |
getMute: function() { |
|
919
|
96 |
var _res = ( |
|
917
|
97 |
typeof _this.currentMedia !== "undefined" |
|
|
98 |
? _this.currentMedia.popcorn.muted() |
|
919
|
99 |
: false |
|
|
100 |
); |
|
|
101 |
return _res; |
|
917
|
102 |
}, |
|
|
103 |
setMute: function(p) { |
|
|
104 |
var _mute = !!p; |
|
|
105 |
for (var _i = 0; _i < _this.mashup.medias.length; _i++) { |
|
|
106 |
_this.mashup.medias[_i].popcorn.muted(_mute); |
|
|
107 |
} |
|
|
108 |
}, |
|
|
109 |
getVolume: function() { |
|
919
|
110 |
var _res = ( |
|
917
|
111 |
typeof _this.currentMedia !== "undefined" |
|
|
112 |
? _this.currentMedia.popcorn.volume() |
|
919
|
113 |
: .5 |
|
|
114 |
); |
|
|
115 |
return _res; |
|
917
|
116 |
}, |
|
|
117 |
setVolume: function(_vol) { |
|
|
118 |
for (var _i = 0; _i < _this.mashup.medias.length; _i++) { |
|
|
119 |
_this.mashup.medias[_i].popcorn.volume(_vol); |
|
|
120 |
} |
|
|
121 |
} |
|
|
122 |
} |
|
919
|
123 |
|
|
917
|
124 |
}; |
|
|
125 |
|
|
|
126 |
IriSP.PopcornReplacement.htmlMashup.prototype = new IriSP.PopcornReplacement.player("", {}); |
|
|
127 |
|
|
|
128 |
IriSP.PopcornReplacement.htmlMashup.prototype.changeCurrentAnnotation = function() { |
|
919
|
129 |
var _annotation = this.mashup.getAnnotationAtTime( this.timecode ); |
|
917
|
130 |
if (typeof _annotation == "undefined") { |
|
|
131 |
if (typeof this.currentMedia !== "undefined") { |
|
|
132 |
this.currentMedia.popcorn.pause(); |
|
919
|
133 |
if (!this.media.paused) { |
|
|
134 |
this.media.paused = true; |
|
|
135 |
this.trigger("pause"); |
|
|
136 |
} |
|
917
|
137 |
} |
|
|
138 |
return; |
|
|
139 |
} |
|
|
140 |
if (_annotation !== this.currentAnnotation) { |
|
|
141 |
this.currentAnnotation = _annotation; |
|
919
|
142 |
this.segmentBegin = this.currentAnnotation.annotation.begin.milliseconds; |
|
|
143 |
this.segmentEnd = this.currentAnnotation.annotation.end.milliseconds; |
|
|
144 |
this.timedelta = this.segmentBegin - this.currentAnnotation.begin.milliseconds; |
|
917
|
145 |
this.currentMedia = this.currentAnnotation.getMedia(); |
|
|
146 |
|
|
|
147 |
for (var _i = 0; _i < this.mashup.medias.length; _i++) { |
|
|
148 |
if (this.mashup.medias[_i].id !== this.currentMedia.id) { |
|
|
149 |
this.mashup.medias[_i].videoEl.hide(); |
|
|
150 |
this.mashup.medias[_i].popcorn.pause(); |
|
|
151 |
} else { |
|
|
152 |
this.mashup.medias[_i].videoEl.show(); |
|
|
153 |
} |
|
|
154 |
} |
|
919
|
155 |
/* PRELOADING */ |
|
|
156 |
var _this = this, |
|
|
157 |
_preloadedMedias = [], |
|
|
158 |
_toPreload = this.mashup.getAnnotations().filter(function(_a) { |
|
|
159 |
return (_a.begin >= _this.currentAnnotation.end && _a.getMedia().id !== _this.currentMedia.id); |
|
|
160 |
}); |
|
|
161 |
IriSP._(_toPreload).each(function(_a) { |
|
|
162 |
var _media = _a.getMedia(); |
|
|
163 |
if (IriSP._(_preloadedMedias).indexOf(_media.id) === -1) { |
|
|
164 |
_preloadedMedias.push(_media.id); |
|
|
165 |
_media.popcorn.currentTime(_a.annotation.begin.getSeconds()); |
|
|
166 |
//console.log("Preloading ", _media.id, " at t=", _a.annotation.begin.getSeconds()); |
|
|
167 |
} |
|
|
168 |
}); |
|
|
169 |
|
|
|
170 |
// console.log("Changed segment: media="+ this.currentMedia.id + ", from=" + this.segmentBegin + " to=" + this.segmentEnd +", timedelta = ", this.timedelta) |
|
|
171 |
// } else { |
|
|
172 |
// console.log("changeCurrentAnnotation called, but segment hasn't changed"); |
|
917
|
173 |
} |
|
|
174 |
if (this.currentMedia.popcorn.readyState()) { |
|
919
|
175 |
this.currentMedia.popcorn.currentTime( (this.timecode + this.timedelta) / 1000); |
|
|
176 |
this.trigger("timeupdate"); |
|
917
|
177 |
} |
|
|
178 |
if (!this.media.paused) { |
|
|
179 |
this.currentMedia.popcorn.play(); |
|
|
180 |
} |
|
|
181 |
} |