7 IriSP.Widgets.DailymotionPlayer.prototype.defaults = { |
7 IriSP.Widgets.DailymotionPlayer.prototype.defaults = { |
8 aspect_ratio: 14/9 |
8 aspect_ratio: 14/9 |
9 }; |
9 }; |
10 |
10 |
11 IriSP.Widgets.DailymotionPlayer.prototype.draw = function() { |
11 IriSP.Widgets.DailymotionPlayer.prototype.draw = function() { |
12 |
12 |
13 if (typeof this.video === "undefined") { |
13 if (typeof this.video === "undefined") { |
14 this.video = this.media.video; |
14 this.video = this.media.video; |
15 } |
15 } |
16 |
16 |
17 this.height = this.height || Math.floor(this.width / this.aspect_ratio); |
17 this.height = this.height || Math.floor(this.width / this.aspect_ratio); |
18 |
18 |
19 var _media = this.media, |
19 var _media = this.media, |
|
20 videoid = null, |
20 _this = this, |
21 _this = this, |
21 _pauseState = true; |
22 state = { |
22 |
23 pause: true, |
23 /* Dailymotion utilise un système de fonctions référencées dans |
24 apiready: false, |
24 * des variables globales pour la gestion des événements. |
25 volume: 0, |
25 */ |
26 time: 0, |
26 |
27 duration: 0 |
27 window.onDailymotionPlayerReady = function() { |
28 }; |
28 |
29 |
29 var _player = document.getElementById(_this.container); |
30 var m = this.video.match(/www.dailymotion.com\/video\/(.+)/); |
30 |
31 if (m) { |
|
32 videoid = m[1]; |
|
33 } |
|
34 |
|
35 var player_url = Mustache.to_html('{{ protocol }}//www.dailymotion.com/embed/video/{{ videoid }}', { |
|
36 protocol: document.location.protocol.search('http') == 0 ? document.location.protocol : 'http:', |
|
37 videoid: videoid |
|
38 }); |
|
39 var params = { |
|
40 'api': 'postMessage', |
|
41 'chromeless': 1, |
|
42 'id': 'dm_player', |
|
43 'related': 0, |
|
44 'autoplay': 1 |
|
45 }; |
|
46 |
|
47 _this.$.html(Mustache.to_html('<iframe id="{{ id }}" src="{{ player_url }}?{{ params }}" width="{{ width }}" height="{{ height }}" frameborder="0"></iframe>', { |
|
48 player_url: player_url, |
|
49 params: Object.keys(params).reduce(function(a,k){a.push(k+'='+encodeURIComponent(params[k]));return a;},[]).join('&'), |
|
50 width: this.width, |
|
51 height: this.height, |
|
52 id: params.id |
|
53 })); |
|
54 |
|
55 function setup_media_methods () { |
|
56 var dest = _this.$.find("#" + params.id)[0].contentWindow; |
|
57 var execute = function(c, v) { |
|
58 if (v !== undefined) |
|
59 c = c + "=" + v; |
|
60 dest.postMessage(c, "*"); |
|
61 }; |
|
62 |
31 _media.getCurrentTime = function() { |
63 _media.getCurrentTime = function() { |
32 return new IriSP.Model.Time(1000*_player.getCurrentTime()); |
64 return state.time; |
33 }; |
65 }; |
34 _media.getVolume = function() { |
66 _media.getVolume = function() { |
35 return _player.getVolume() / 100; |
67 return state.volume; |
36 }; |
68 }; |
37 _media.getPaused = function() { |
69 _media.getPaused = function() { |
38 return _pauseState; |
70 return state.pause; |
39 }; |
71 }; |
40 _media.getMuted = function() { |
72 _media.getMuted = function() { |
41 return _player.isMuted(); |
73 return state.muted; |
42 }; |
74 }; |
43 _media.setCurrentTime = function(_milliseconds) { |
75 _media.setCurrentTime = function(_milliseconds) { |
44 _seekPause = _pauseState; |
76 execute("seek", _milliseconds / 1000); |
45 return _player.seekTo(_milliseconds / 1000); |
|
46 }; |
77 }; |
47 _media.setVolume = function(_vol) { |
78 _media.setVolume = function(_vol) { |
48 return _player.setVolume(Math.floor(_vol*100)); |
79 execute("volume", _vol * 100); |
49 }; |
80 }; |
50 _media.mute = function() { |
81 _media.mute = function() { |
51 return _player.mute(); |
82 execute("muted", 1); |
52 }; |
83 }; |
53 _media.unmute = function() { |
84 _media.unmute = function() { |
54 return _player.unMute(); |
85 execute("muted", 0); |
55 }; |
86 }; |
56 _media.play = function() { |
87 _media.play = function() { |
57 return _player.playVideo(); |
88 execute("play"); |
58 }; |
89 }; |
59 _media.pause = function() { |
90 _media.pause = function() { |
60 return _player.pauseVideo(); |
91 execute("pause"); |
61 }; |
92 }; |
62 |
|
63 _player.addEventListener("onStateChange", "onDailymotionStateChange"); |
|
64 _player.addEventListener("onVideoProgress", "onDailymotionVideoProgress"); |
|
65 |
|
66 _player.cueVideoByUrl(_this.video); |
|
67 |
|
68 _media.trigger("loadedmetadata"); |
|
69 }; |
|
70 |
|
71 window.onDailymotionStateChange = function(_state) { |
|
72 switch(_state) { |
|
73 case 1: |
|
74 _media.trigger("play"); |
|
75 _pauseState = false; |
|
76 break; |
|
77 |
|
78 case 2: |
|
79 _media.trigger("pause"); |
|
80 _pauseState = true; |
|
81 break; |
|
82 |
|
83 case 3: |
|
84 _media.trigger("seeked"); |
|
85 break; |
|
86 } |
|
87 }; |
|
88 |
|
89 window.onDailymotionVideoProgress = function(_progress) { |
|
90 _media.trigger("timeupdate", new IriSP.Model.Time(_progress.mediaTime * 1000)); |
|
91 }; |
|
92 |
|
93 var params = { |
|
94 "allowScriptAccess" : "always", |
|
95 "wmode": "opaque" |
|
96 }; |
|
97 |
|
98 var atts = { |
|
99 id : this.container |
|
100 }; |
93 }; |
101 |
94 |
102 swfobject.embedSWF("http://www.dailymotion.com/swf?chromeless=1&enableApi=1", this.container, this.width, this.height, "8", null, null, params, atts); |
95 window.addEventListener("message", function (event) { |
103 |
96 // Parse event.data (query-string for to object) |
|
97 |
|
98 // Duck-checking if event.data is a string |
|
99 if (event.data.split === undefined) |
|
100 return; |
|
101 |
|
102 var info = event.data.split("&").map( function(s) { return s.split("="); }).reduce( function(o, v) { o[v[0]] = decodeURIComponent(v[1]); return o; }, {}); |
|
103 |
|
104 switch (info.event) { |
|
105 case "apiready": |
|
106 state.apiready = true; |
|
107 setup_media_methods(); |
|
108 break; |
|
109 //case "canplay": |
|
110 // break; |
|
111 case "durationchange": |
|
112 if (info.duration.slice(-2) == "sc") { |
|
113 state.duration = 1000 * Number(info.duration.slice(0, -2)); |
|
114 _media.setDuration(state.duration); |
|
115 } |
|
116 break; |
|
117 case "ended": |
|
118 state.pause = true; |
|
119 break; |
|
120 case "loadedmetadata": |
|
121 _media.trigger("loadedmetadata"); |
|
122 break; |
|
123 case "pause": |
|
124 state.pause = true; |
|
125 _media.trigger("pause"); |
|
126 break; |
|
127 case "play": |
|
128 state.pause = false; |
|
129 _media.trigger("play"); |
|
130 break; |
|
131 //case "playing": |
|
132 // break; |
|
133 //case "progress": |
|
134 // Loading progress |
|
135 // break; |
|
136 case "seeked": |
|
137 state.time = new IriSP.Model.Time(1000 * Number(info.time)); |
|
138 _media.trigger("seeked"); |
|
139 break; |
|
140 case "timeupdate": |
|
141 state.time = new IriSP.Model.Time(1000 * Number(info.time)); |
|
142 _media.trigger("timeupdate", state.time); |
|
143 break; |
|
144 case "volumechange": |
|
145 state.muted = (info.muted == "true"); |
|
146 state.volume = Number(info.volume) / 100; |
|
147 break; |
|
148 } |
|
149 }, false); |
104 }; |
150 }; |