comparison johndyer-mediaelement-13fa20a/src/js/me-mediaelements.js @ 0:032bc65ebafc

added core components
author George Fazekas <gyorgy.fazekas@eecs.qmul.ac.uk>
date Wed, 06 Mar 2013 15:45:48 +0000
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:032bc65ebafc
1
2 /*
3 extension methods to <video> or <audio> object to bring it into parity with PluginMediaElement (see below)
4 */
5 mejs.HtmlMediaElement = {
6 pluginType: 'native',
7 isFullScreen: false,
8
9 setCurrentTime: function (time) {
10 this.currentTime = time;
11 },
12
13 setMuted: function (muted) {
14 this.muted = muted;
15 },
16
17 setVolume: function (volume) {
18 this.volume = volume;
19 },
20
21 // for parity with the plugin versions
22 stop: function () {
23 this.pause();
24 },
25
26 // This can be a url string
27 // or an array [{src:'file.mp4',type:'video/mp4'},{src:'file.webm',type:'video/webm'}]
28 setSrc: function (url) {
29 if (typeof url == 'string') {
30 this.src = url;
31 } else {
32 var i, media;
33
34 for (i=0; i<url.length; i++) {
35 media = url[i];
36 if (this.canPlayType(media.type)) {
37 this.src = media.src;
38 }
39 }
40 }
41 },
42
43 setVideoSize: function (width, height) {
44 this.width = width;
45 this.height = height;
46 }
47 };
48
49 /*
50 Mimics the <video/audio> element by calling Flash's External Interface or Silverlights [ScriptableMember]
51 */
52 mejs.PluginMediaElement = function (pluginid, pluginType, mediaUrl) {
53 this.id = pluginid;
54 this.pluginType = pluginType;
55 this.src = mediaUrl;
56 this.events = {};
57 };
58
59 // JavaScript values and ExternalInterface methods that match HTML5 video properties methods
60 // http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/fl/video/FLVPlayback.html
61 // http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html
62 mejs.PluginMediaElement.prototype = {
63
64 // special
65 pluginElement: null,
66 pluginType: '',
67 isFullScreen: false,
68
69 // not implemented :(
70 playbackRate: -1,
71 defaultPlaybackRate: -1,
72 seekable: [],
73 played: [],
74
75 // HTML5 read-only properties
76 paused: true,
77 ended: false,
78 seeking: false,
79 duration: 0,
80 error: null,
81
82 // HTML5 get/set properties, but only set (updated by event handlers)
83 muted: false,
84 volume: 1,
85 currentTime: 0,
86
87 // HTML5 methods
88 play: function () {
89 if (this.pluginApi != null) {
90 this.pluginApi.playMedia();
91 this.paused = false;
92 }
93 },
94 load: function () {
95 if (this.pluginApi != null) {
96 this.pluginApi.loadMedia();
97 this.paused = false;
98 }
99 },
100 pause: function () {
101 if (this.pluginApi != null) {
102 this.pluginApi.pauseMedia();
103 this.paused = true;
104 }
105 },
106 stop: function () {
107 if (this.pluginApi != null) {
108 this.pluginApi.stopMedia();
109 this.paused = true;
110 }
111 },
112 canPlayType: function(type) {
113 var i,
114 j,
115 pluginInfo,
116 pluginVersions = mejs.plugins[this.pluginType];
117
118 for (i=0; i<pluginVersions.length; i++) {
119 pluginInfo = pluginVersions[i];
120
121 // test if user has the correct plugin version
122 if (mejs.PluginDetector.hasPluginVersion(this.pluginType, pluginInfo.version)) {
123
124 // test for plugin playback types
125 for (j=0; j<pluginInfo.types.length; j++) {
126 // find plugin that can play the type
127 if (type == pluginInfo.types[j]) {
128 return true;
129 }
130 }
131 }
132 }
133
134 return false;
135 },
136
137 // custom methods since not all JavaScript implementations support get/set
138
139 // This can be a url string
140 // or an array [{src:'file.mp4',type:'video/mp4'},{src:'file.webm',type:'video/webm'}]
141 setSrc: function (url) {
142 if (typeof url == 'string') {
143 this.pluginApi.setSrc(mejs.Utility.absolutizeUrl(url));
144 this.src = mejs.Utility.absolutizeUrl(url);
145 } else {
146 var i, media;
147
148 for (i=0; i<url.length; i++) {
149 media = url[i];
150 if (this.canPlayType(media.type)) {
151 this.pluginApi.setSrc(mejs.Utility.absolutizeUrl(media.src));
152 this.src = mejs.Utility.absolutizeUrl(url);
153 }
154 }
155 }
156
157 },
158 setCurrentTime: function (time) {
159 if (this.pluginApi != null) {
160 this.pluginApi.setCurrentTime(time);
161 this.currentTime = time;
162 }
163 },
164 setVolume: function (volume) {
165 if (this.pluginApi != null) {
166 this.pluginApi.setVolume(volume);
167 this.volume = volume;
168 }
169 },
170 setMuted: function (muted) {
171 if (this.pluginApi != null) {
172 this.pluginApi.setMuted(muted);
173 this.muted = muted;
174 }
175 },
176
177 // additional non-HTML5 methods
178 setVideoSize: function (width, height) {
179 if ( this.pluginElement.style) {
180 this.pluginElement.style.width = width + 'px';
181 this.pluginElement.style.height = height + 'px';
182 }
183 if (this.pluginApi != null) {
184 this.pluginApi.setVideoSize(width, height);
185 }
186 },
187
188 setFullscreen: function (fullscreen) {
189 if (this.pluginApi != null) {
190 this.pluginApi.setFullscreen(fullscreen);
191 }
192 },
193
194 // start: fake events
195 addEventListener: function (eventName, callback, bubble) {
196 this.events[eventName] = this.events[eventName] || [];
197 this.events[eventName].push(callback);
198 },
199 removeEventListener: function (eventName, callback) {
200 if (!eventName) { this.events = {}; return true; }
201 var callbacks = this.events[eventName];
202 if (!callbacks) return true;
203 if (!callback) { this.events[eventName] = []; return true; }
204 for (i = 0; i < callbacks.length; i++) {
205 if (callbacks[i] === callback) {
206 this.events[eventName].splice(i, 1);
207 return true;
208 }
209 }
210 return false;
211 },
212 dispatchEvent: function (eventName) {
213 var i,
214 args,
215 callbacks = this.events[eventName];
216
217 if (callbacks) {
218 args = Array.prototype.slice.call(arguments, 1);
219 for (i = 0; i < callbacks.length; i++) {
220 callbacks[i].apply(null, args);
221 }
222 }
223 }
224 // end: fake events
225 };