71 |
72 |
73 |
--------------------------------------------------------------------------------
/player/quality.js:
--------------------------------------------------------------------------------
1 | function computeTileCoverage(tilesDescription) {
2 | var v1 = tilesDescription.v1;
3 | var v2 = tilesDescription.v2;
4 | var v3 = tilesDescription.v3;
5 | var v4 = tilesDescription.v4;
6 | for (var i=0; iv1 && jv4 && kv2) {
50 | pHoriz = ((v2-v4)/w)*100;
51 | pGlobalHoriz = 100;
52 | } else if (x>v4 && x+w<=v2) {
53 | pHoriz = 100;
54 | pGlobalHoriz = (w/(v2-v4))*100;
55 | } else if (x>v4 && x+w>v2) {
56 | pHoriz = ((v2-x)/w)*100;
57 | pGlobalHoriz = ((v2-x)/(v2-v4))*100;
58 | }
59 |
60 | //pour un x qcq fixé dans le cadre, calcul du pourcentage Vertical
61 | if (y<=v1 && y+h<=v3) {
62 | pVert = ((y+h-v1)/h)*100;
63 | pGlobalVert = ((y+h-v1)/(v3-v1))*100;
64 | } else if (y<=v1 && y+h>v3) {
65 | pVert = ((v3-v1)/h)*100;
66 | pGlobalVert = 100;
67 | } else if (y>v1 && y+h<=v3) {
68 | pVert = 100;
69 | pGlobalVert = (h/(v3-v1))*100;
70 | } else if (y>v1 && y+h>v3) {
71 | pVert = ((v3-y)/h)*100;
72 | pGlobalVert = ((v3-y)/(v3-v1))*100;
73 | }
74 | } else {
75 | //la tuile n'est pas dans le cadre
76 | tile.display.inClip = false;
77 | pHoriz =0;
78 | pVert =0;
79 | pGlobalHoriz = 0;
80 | pGlobalVert = 0;
81 | }
82 |
83 | //calcul des pourcentages totaux
84 | var pTotal = (pHoriz*pVert)/100;
85 | var pGlobalTotal = (pGlobalHoriz*pGlobalVert)/100;
86 |
87 | //arrondir les résultats 2 chiffres après la virgule
88 | pHoriz = Math.round(pHoriz*100)/100;
89 | pVert = Math.round(pVert*100)/100;
90 | pTotal = Math.round(pTotal*100)/100;
91 | pGlobalHoriz = Math.round(pGlobalHoriz*100)/100;
92 | pGlobalVert = Math.round(pGlobalVert*100)/100;
93 | pGlobalTotal = Math.round(pGlobalTotal*100)/100;
94 |
95 | //stockage des pourcentages dans l'objet tuiles
96 | tile.percentage.pHoriz = pHoriz;
97 | tile.percentage.pVert = pVert;
98 | tile.percentage.pTotal = pTotal;
99 | tile.percentage.pGlobalHoriz = pGlobalHoriz;
100 | tile.percentage.pGlobalVert = pGlobalVert;
101 | tile.percentage.pGlobalTotal = pGlobalTotal;
102 | }
103 | }
104 |
105 | function computeTileQualities(tilesDescription) {
106 | var v1 = tilesDescription.v1;
107 | var v2 = tilesDescription.v2;
108 | var v3 = tilesDescription.v3;
109 | var v4 = tilesDescription.v4;
110 |
111 | var seuil_x =(v2-v4)/6;
112 | var seuil_y =(v3-v1)/6;
113 | var priorite = 0;
114 | var tile;
115 |
116 | for (var i=0; i= (tilesDescription.centre_clip_x - seuil_x)) &&
125 | (tile.display.curCentre_y <= (tilesDescription.centre_clip_y + seuil_y)) &&
126 | (tile.display.curCentre_y >= (tilesDescription.centre_clip_y - seuil_y))) {
127 | //le centre de la tuile est proche du centre du clip priorité maxi
128 | priorite=100;
129 | } else {
130 | //le centre de la tuile est sur le bord du clip
131 | if (tile.percentage.pGlobalTotal >= 50) {
132 | priorite=85;
133 | } else if (tile.percentage.pGlobalTotal >= 25 && tile.percentage.pGlobalTotal < 50) {
134 | priorite=60;
135 | } else if (tile.percentage.pGlobalTotal >= 10 && tile.percentage.pGlobalTotal < 25) {
136 | priorite=25;
137 | } else if (tile.percentage.pGlobalTotal > 0 && tile.percentage.pGlobalTotal < 10) {
138 | priorite=10;
139 | }
140 | }
141 | }
142 | tile.player.position(priorite);
143 | tile.quality = priorite;
144 | }
145 | }
146 |
147 | function getMetrics(tilesDescription, tileInfoUpdateCallback, globalInfoUpdateCallback) {
148 | var totalBandwidth =0;
149 | var totalDownloadTime =0;
150 | var totalMediaDuration = 0;
151 | var totalRatio =0;
152 | var tile;
153 | for(var i=0; i0) {
170 | downloadRatio = mediaDuration /downloadTime;
171 | downloadRatio = Math.round(downloadRatio*100)/100;
172 | }
173 | }
174 |
175 | //évalutation de bandwidth à partir de la taille moyenne d'un segment en kb selon la qualité
176 | if(tile.player.player.getQualityFor('video')==0 && downloadTime >0) {
177 | bandwidthValue = 785 / downloadTime;
178 | } else if(tile.player.player.getQualityFor('video') ==1 && downloadTime >0) {
179 | bandwidthValue = 2456 / downloadTime;
180 | } else if(tile.player.player.getQualityFor('video') ==2 && downloadTime >0) {
181 | bandwidthValue = 5136 / downloadTime;
182 | } else {
183 | bandwidthValue = 0;
184 | }
185 |
186 | bandwidthValue = Math.round(bandwidthValue);
187 |
188 | /*
189 | //bandwidth théorique récupéré du manifest
190 | var repSwitch = metricsExt.getCurrentRepresentationSwitch(metrics);
191 | if(repSwitch != null)
192 | {
193 | bandwidthValue= metricsExt.getBandwidthForRepresentation(repSwitch.to);
194 | bandwidthValue = bandwidthValue / 1000;
195 | bandwidthValue = Math.round(bandwidthValue);
196 | }*/
197 |
198 | totalBandwidth+= bandwidthValue;
199 | totalDownloadTime += downloadTime;
200 | totalMediaDuration += mediaDuration;
201 | tileInfoUpdateCallback(i, tile.percentage.pGlobalTotal, tile.player.player.getQualityFor('video'), downloadRatio, bandwidthValue);
202 | }
203 |
204 | if (totalDownloadTime >0) {
205 | totalRatio = totalMediaDuration / totalDownloadTime;
206 | totalRatio = Math.round(totalRatio*100)/100;
207 | }
208 | globalInfoUpdateCallback(totalBandwidth, totalRatio);
209 | }
210 |
--------------------------------------------------------------------------------
/player/setup.js:
--------------------------------------------------------------------------------
1 | //largeur et hauteur totale et origine (tilesDisplayX, tilesDisplayY) de l'affichage
2 | //largeur et hauteur d'affichage de la miniature
3 | function init(tilesDisplayWidth, tilesDisplayHeight, tilesDisplayX, tilesDisplayY, thumbnailDisplayWidth, thumbnailDisplayHeight, tilesDescription) {
4 | var tile;
5 | //valeurs du clipping en fonction de la taille d'affichage choisie
6 | // Attention v4";
109 | tilesDescription.thumbnail.video = thumbDiv.firstElementChild;
110 |
111 | //mise à jour de la taille du cadre rouge en fonction de la taille d'affichage de miniature choisie
112 | var frame = document.createElement("div");
113 | frame.id ="frame";
114 | var borderWidth = 3;
115 | frame.style.border = ""+borderWidth+"px solid red";
116 | frame.style.position = "absolute";
117 | var widthCadre = (tilesDescription.thumbnail.display.w/2) - 2*borderWidth;
118 | var heightCadre = (tilesDescription.thumbnail.display.h/2) - 2*borderWidth;
119 | var xCadre = (tilesDescription.thumbnail.display.w/4);
120 | var yCadre = (tilesDescription.thumbnail.display.h/4);
121 | frame.style.width = widthCadre + 'px';
122 | frame.style.height = heightCadre + 'px';
123 | frame.style.top = yCadre + 'px' ;
124 | frame.style.left = xCadre + 'px' ;
125 | thumbDiv.appendChild(frame);
126 | tilesDescription.thumbnail.frame = frame;
127 |
128 | $(frame).draggable({
129 | containment: "parent",
130 | drag: function() {
131 | updateTileAndThumbnailView(tilesDescription);
132 | }
133 | });
134 | $(thumbDiv).droppable();
135 | }
136 |
137 | function createTilesVideoView(tilesDescription, tiledVideosDivId) {
138 | var tile;
139 | //ajout de la taille d'affichage du clip en fonction de la taille d'affichage vidéo choisie
140 | var tiledVideosDiv = document.getElementById(tiledVideosDivId);
141 | tiledVideosDiv.style.position = "absolute";
142 | tiledVideosDiv.style.top = (tilesDescription.tiles[0].display.y)+"px";
143 | tiledVideosDiv.style.left = (tilesDescription.tiles[0].display.x)+"px";
144 | tiledVideosDiv.style.clip = "rect("+tilesDescription.v1+"px, "+tilesDescription.v2+"px, "+tilesDescription.v3+"px, "+tilesDescription.v4+"px)";
145 | for (var i=0; i";
153 | tile.video = tile.div.firstElementChild;
154 | tiledVideosDiv.appendChild(tile.div);
155 | }
156 | }
157 |
158 | function createTileInfoView(tilesDescription, InfoDivId) {
159 | var tile;
160 | var string;
161 | string = "
";
162 | string += "";
163 | string += "
";
164 | string += "
Tile Number
";
165 | string += "
Coverage
";
166 | string += "
Quality Index
";
167 | string += "
Download Ratio (segment duration/download duration)
";
168 | string += "
Bandwidth (segment size/download duration, kbps)
";
169 | string += "
";
170 | string += "";
171 | string += "";
172 | //ajout de la taille d'affichage du clip en fonction de la taille d'affichage vidéo choisie
173 | var infoDiv = document.getElementById(InfoDivId);
174 | for (var i=0; i";
177 | string += "