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