-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
244 lines (217 loc) · 10.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="description" content="minPlayer : A minimalistic, plugin-based "core" media player for the web." />
<!-- Include jQuery and jQuery UI -->
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<!-- Many more themes to chose from... go to http://jqueryui.com/themeroller! -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dark-hive/jquery-ui.css">
<!-- The following can be replaced by a single javascript include bin/minplayer.compressed.js -->
<script type="text/javascript" src="src/minplayer.screenfull.js"></script>
<script type="text/javascript" src="src/minplayer.compatibility.js"></script>
<script type="text/javascript" src="src/minplayer.flags.js"></script>
<script type="text/javascript" src="src/minplayer.async.js"></script>
<script type="text/javascript" src="src/minplayer.plugin.js"></script>
<script type="text/javascript" src="src/minplayer.display.js"></script>
<script type="text/javascript" src="src/minplayer.js"></script>
<script type="text/javascript" src="src/minplayer.image.js"></script>
<script type="text/javascript" src="src/minplayer.file.js"></script>
<script type="text/javascript" src="src/minplayer.playLoader.js"></script>
<script type="text/javascript" src="src/minplayer.players.base.js"></script>
<script type="text/javascript" src="src/minplayer.players.dailymotion.js"></script>
<script type="text/javascript" src="src/minplayer.players.kaltura.js"></script>
<script type="text/javascript" src="src/minplayer.players.html5.js"></script>
<script type="text/javascript" src="src/minplayer.players.flash.js"></script>
<script type="text/javascript" src="src/minplayer.players.minplayer.js"></script>
<script type="text/javascript" src="src/minplayer.players.youtube.js"></script>
<script type="text/javascript" src="src/minplayer.players.vimeo.js"></script>
<script type="text/javascript" src="src/minplayer.players.limelight.js"></script>
<script type="text/javascript" src="src/minplayer.controller.js"></script>
<!-- Include the template CSS and JS files. -->
<link rel="stylesheet" href="templates/default/css/minplayer_default.css">
<script type="text/javascript" src="templates/default/js/minplayer.playLoader.default.js"></script>
<script type="text/javascript" src="templates/default/js/minplayer.controller.default.js"></script>
<script type="text/javascript" src="templates/default/js/minplayer.default.js"></script>
<script type="text/javascript">
$(function() {
$("#h264").minplayer({
width: '500px',
height: '300px'
});
$("#youtube").minplayer({
width: '500px',
height: '300px'
});
$("#youtube2").minplayer({
width: '500px',
height: '300px'
});
$("#vimeo").minplayer({
width: '500px',
height: '300px'
});
$("#dailymotion").minplayer({
width: '500px',
height: '300px'
});
$("#limelight").minplayer({
width: '500px',
height: '300px'
});
$("#kaltura").minplayer({
width: '500px',
height: '300px'
});
});
</script>
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
<title>minPlayer</title>
</head>
<body>
<!-- HEADER -->
<div id="header_wrap" class="outer">
<header class="inner">
<a id="forkme_banner" href="https://github.com/travist/minplayer">Fork Me on GitHub</a>
<h1 id="project_title">minPlayer</h1>
<h2 id="project_tagline">A minimalistic, plugin-based "core" media player for the web.</h2>
<section id="downloads">
<a class="zip_download_link" href="https://github.com/travist/minplayer/zipball/master">Download this project as a .zip file</a>
<a class="tar_download_link" href="https://github.com/travist/minplayer/tarball/master">Download this project as a tar.gz file</a>
</section>
</header>
</div>
<!-- MAIN CONTENT -->
<div id="main_content_wrap" class="outer">
<section id="main_content" class="inner">
<h1>minPlayer - Because less IS more.</h1>
<p>The goal of this project is to provide a slim, well documented, object oriented,
plugin-based "core" media player in which other players and libraries can build
on top of. It is written using object oriented JavaScript and is continuously
integrated using JSLint, JSDoc, and Google Closure.</p>
<h2>h264 Example</h2>
<video id="h264" src="http://progressive.totaleclips.com.edgesuite.net/105/e105598_257.mp4" poster="http://www.movieposter.com/posters/archive/main/143/MPW-71686"></video>
<h2>YouTube Example</h2>
<video id="youtube" src="http://www.youtube.com/watch?v=hLQl3WQQoQ0"></video>
<h2>Two YouTube Players on same page</h2>
<video id="youtube2" src="http://www.youtube.com/watch?v=dTAAsCNK7RA"></video>
<h2>Vimeo Example</h2>
<video id="vimeo" src="http://vimeo.com/5606758"></video>
<h2>Dailymotion Example</h2>
<video id="dailymotion" src="http://www.dailymotion.com/video/xbhcig_i-m-yours-au-ukulele_music"></video>
<h2>Limelight CDN Example</h2>
<video id="limelight" src="http://link.videoplatform.limelight.com/media/?mediaId=75fa35c9ab634e55bf5f377fb0d5c67a&width=480&height=270&playerForm=b75b8d0290574a609d3af729b49d9e15"></video>
<h2>Kaltura CDN Example</h2>
<video id="kaltura" src="http://www.kaltura.com/kwidget/wid/_1446611/entry_id/0_yy36lues/uiconf_id/16495682"></video>
<h2>Multiple players - One single API.</h2>
<p>It also allows for hot-swappable 3rd party API players by providing a common
API for all of these players so that they can be utilized in the same manner.
This means that once you develop for the minPlayer, one can easily bring in a
different player an your code will still function as it would for all the
others. Out of the box, this player provides a common API for YouTube, Vimeo,
HTML5, and Flash with more on the way.</p>
<h2>Everything is a plugin</h2>
<p>Since this is a plugin-based media player, every displayable class must derive
from the plugin class, thereby, making it a plugin. This includes the media
player itself. This plugin system is highly flexible to be able to handle
just about any type of plugin imaginable, and allows for every plugin to have
direct dependeny-injected control over any other plugin within the media player.</p>
<h2>Complete User Interface & Business Logic separation</h2>
<p>One common complaint for many media solutions out there is that they hijack the
DOM and build out their own controls to provide consistency amongst different
browsers. They do this, however, within the core player which completely binds
the user interface to the business logic of the media player. The minPlayer
takes a different approach by keeping ALL user interface functionality within
the "templates" directory, where each template essentially derives from the base
Business logic classes only to provide the user interface aspects of that control.
This allows for easy templating of the media player besides just overriding the
CSS like current media solutions do today.</p>
<h2>No "Features"!</h2>
<p>I am pleased to say that this media player does NOT have many features, and this
is on purpose. Since this is a "core" player, it does not have any features
other than what is critical in presenting your media. Any additional "bling"
will be added to this player from different repositories and from different
players that extend this "core" functionality. This methodology will keep this
"core" media solution lean & highly functional.</p>
<h2>API</h2>
<p>The API for minPlayer is very simple. It revolves around a single API that is
able to retrieve any plugin even before that plugin is created. By doing this,
you can have complete control over any plugin within the minPlayer. This API
is simply called</p>
<pre><code>minplayer.get();
</code></pre>
<p>This API can take up to three different argument with each argument providing
different usage. The code docs for this function are as follows...</p>
<pre><code>/**
* The main API for minPlayer.
*
* Provided that this function takes three parameters, there are 8 different
* ways to use this api.
*
* id (0x100) - You want a specific player.
* plugin (0x010) - You want a specific plugin.
* callback (0x001) - You only want it when it is ready.
*
* 000 - You want all plugins from all players, ready or not.
*
* var instances = minplayer.get();
*
* 001 - You want all plugins from all players, but only when ready.
*
* minplayer.get(function(plugin) {
* // Code goes here.
* });
*
* 010 - You want a specific plugin from all players, ready or not...
*
* var medias = minplayer.get(null, 'media');
*
* 011 - You want a specific plugin from all players, but only when ready.
*
* minplayer.get('player', function(player) {
* // Code goes here.
* });
*
* 100 - You want all plugins from a specific player, ready or not.
*
* var plugins = minplayer.get('player_id');
*
* 101 - You want all plugins from a specific player, but only when ready.
*
* minplayer.get('player_id', null, function(plugin) {
* // Code goes here.
* });
*
* 110 - You want a specific plugin from a specific player, ready or not.
*
* var plugin = minplayer.get('player_id', 'media');
*
* 111 - You want a specific plugin from a specific player, only when ready.
*
* minplayer.get('player_id', 'media', function(media) {
* // Code goes here.
* });
*
* @this The context in which this function was called.
* @param {string} id The ID of the widget to get the plugins from.
* @param {string} plugin The name of the plugin.
* @param {function} callback Called when the plugin is ready.
* @return {object} The plugin object if it is immediately available.
*/
minplayer.get = function(id, plugin, callback) {
};
</code></pre>
<p>Thanks and enjoy minPlayer.</p>
</section>
</div>
<!-- FOOTER -->
<div id="footer_wrap" class="outer">
<footer class="inner">
<p class="copyright">minPlayer maintained by <a href="https://github.com/travist">travist</a></p>
<p>Published with <a href="http://pages.github.com">GitHub Pages</a></p>
</footer>
</div>
</body>
</html>