-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
198 lines (193 loc) · 9.45 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>OIPlayer jQuery Plugin - Open Images Platform</title>
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="plugins/flowplayer-3.2.6.min.js" type="text/javascript"></script>
<script src="js/jquery.oiplayer.min.js" type="text/javascript"></script>
<link href="css/oiplayer.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$('body.oiplayer-example').oiplayer({
server : 'http://www.openimages.eu', /* msie (or java) has issues with just a dir */
jar : '/oiplayer/plugins/cortado-ovt-stripped-0.6.0.jar',
flash : '/oiplayer/plugins/flowplayer-3.2.7.swf',
controls : 'top'
});
});
</script>
</head>
<body class="oiplayer-example">
<div class="main">
<h1>OIPlayer jQuery plugin</h1>
<h2>HTML5 audio and video player with fallback to Java and Flash</h2>
<!-- div#clientcaps is needed for Java detection in MSIE -->
<div id="clientcaps"> </div>
<!-- video directly copied from http://www.openimages.eu/media/9728#share with added width and height attributes -->
<div xmlns:dct="http://purl.org/dc/terms/" xmlns:cc="http://creativecommons.org/ns#" class="oip_media" about="http://www.openimages.eu/files/09/88068.9730.WEEKNUMMER364-HRE0000D9C6.webm">
<video width="512" height="288" poster="http://www.openimages.eu/images/599192/WEEKNUMMER364-HRE0000D9C6.png" controls="controls">
<source type="video/webm; codecs=vp8" src="http://www.openimages.eu/files/09/88068.9730.WEEKNUMMER364-HRE0000D9C6.webm" />
<source type="video/ogg; codecs=theora" src="http://www.openimages.eu/files/09/9734.9730.WEEKNUMMER364-HRE0000D9C6.ogv" />
<source type="video/ogg; codecs=theora" src="http://www.openimages.eu/files/09/88071.9730.WEEKNUMMER364-HRE0000D9C6.ogv" />
<source type="video/mp4; codecs=avc1.42E01E,mp4a.40.2" src="http://www.openimages.eu/files/09/9740.9730.WEEKNUMMER364-HRE0000D9C6.mp4" />
<source type="video/mp4; codecs=avc1.42E01E,mp4a.40.2" src="http://www.openimages.eu/files/09/88065.9730.WEEKNUMMER364-HRE0000D9C6.mp4" />
<source type="application/x-mpegurl" src="http://www.openimages.eu/files/09/35026.9730.WEEKNUMMER364-HRE0000D9C6.m3u8" />
</video>
<span class="license"><a href="http://www.openimages.eu/media/9728" rel="cc:attributionURL" property="dct:title">Storm</a>, by <a href="http://www.openbeelden.nl/users/beeldengeluid" rel="dct:creator" property="cc:attributionName">Polygoon-Profilti (producer) / Netherlands Institute for Sound and Vision (curator)</a>, is licensed under <a href="http://creativecommons.org/licenses/by-sa/3.0/deed.en" rel="license">Creative Commons – Attribution-Share Alike</a>.</span>
</div>
<p>
This video on Open Images <a href="http://www.openimages.eu/media/9728/Storm">http://www.openimages.eu/media/9728/Storm</a>.<br />
OIPlayer 'attaches' itself to all video and/or audio tags it encounters.
Besides the general configuration of the plugin itself, it uses for each individual tag the
attributes the respective tag has like poster, width, controls, autoplay etc.
Easy implementation:
</p>
<pre>
$(document).ready(function() {
$('body').oiplayer(); // on all video and audio tags in body
});
</pre>
<h3>Download</h3>
<ul>
<li>
<a href="https://github.com/elfuego/oiplayer/">Download the most recente version</a> from GitHub.
</li>
</ul>
<h3>Features</h3>
<ul>
<li>Plays video as well as audio</li>
<li>
Fallback to <a href="http://www.flowplayer.org">Flowplayer</a> (mp4, h.264)
or <a href="http://www.theora.org/cortado/">Cortado</a> (oga, ogv)
</li>
<li>Easy to use and implement</li>
<li>Consistent look between browsers, even with fallback</li>
<li>Multiple different players on a page</li>
<li>Play/pause</li>
<li>Mute/unmute</li>
<li>Full 'screen' (full window really, that is what HTML5 requires)</li>
<li>Dark and white controls, on top or below player</li>
<li>Easily skinnable with css</li>
<li>iOS, iPhone, iPad etc. compatible</li>
<li>Fires events: 'oiplayerplay' and 'oiplayerended' to use f.e. for play statistics</li>
</ul>
<h3>Supported browsers</h3>
<ul>
<li>Safari (v4.0+)</li>
<li>Google Chrome (v5.0+)</li>
<li>Firefox (v3.5+)</li>
<li>Internet Explorer (v6.0+) with Flash or Java installed</li>
<li>And maybe some untested others with HTML5 support, Flash or Java installed</li>
</ul>
<p>
OIPlayer is part of the <a href="http://www.openimages.eu/source">Open Images Platform</a>
which is <a href="http://www.mmbase.org">MMBase</a> based. OIPlayer's most recent sources can be found on GitHub:
<a href="https://github.com/elfuego/oiplayer">https://github.com/elfuego/oiplayer</a>.
It is licensed under <a href="http://www.gnu.org/licenses/gpl.html">GPL</a>.
</p>
<h2>How-to</h2>
<ol>
<li>
<a href="https://github.com/elfuego/oiplayer/">Download</a> and copy the
'oiplayer' directory to your site. Include these Javascript and css files in the head of your
html document. Note that the 'flowplayer-3.2.6.min.js' script is only needed for FlowPlayer.
<pre>
<script src="js/jquery-1.5.1.min.js" type="text/javascript"><!-- help ie --></script>
<script src="plugins/flowplayer-3.2.6.min.js" type="text/javascript"><!-- help ie --></script>
<script src="js/jquery.oiplayer.js" type="text/javascript"><!-- help ie --></script>
<link href="css/oiplayer.css" rel="stylesheet" type="text/css" />
</pre>
</li>
<li>
Enable the jQuery plugin on all HTML5 video or audio tags in a page with a body with
class 'oiplayerexample'.
<pre>
$(document).ready(function() {
$('body.oiplayer-example').oiplayer();
});
</pre>
</li>
<li>
OIPlayer has a fallback mechanism that can be made to work
by installing <a href="http://www.flowplayer.org">Flowplayer</a> and
<a href="http://www.theora.org/cortado/">Cortado</a>.
Flowplayer needs the Flash plugin and plays h.264, flv and mp4.
Cortado is a Java applet that plays Ogg video and audio (ogv, oga).
<ul>
<li>server: web server (msie (or windows java) has issues with finding directories)</li>
<li>jar: location of Cortado jar</li>
<li>flash: location of Flowplayer and its files</li>
<li>controls:
<ul>
<li>Simply 'true' means show controls below player.</li>
<li>Value 'top' will add a class of that name and will hide/show controls on top of the player window.</li>
<li>Add a css class of your own to edit the appearance of the controls (f.e. 'top dark').</li>
</ul>
</li>
<li>
log: when you specify 'info' some messages are displayed on top of the media playing,
'error' does nothing for now.
</li>
</ul>
These examples point to plugin files on <a href="http://www.openimages.eu">www.openimages.eu</a>
and should normally work with our media files.
<pre>
$(document).ready(function() {
$('body.oiplayer-example').oiplayer({
server : 'http://www.openimages.eu',
jar : '/oiplayer/plugins/cortado-ovt-stripped-0.6.0.jar',
flash : '/oiplayer/plugins/flowplayer-3.2.7.swf',
controls : 'top',
log : 'error'
});
});
</pre>
</li>
<li>
Especially when OIPlayer needs to fallback to Cortado or Flowplayer, your browser often has no way to
detect the duration a media file. Since the html5 media tags have no attributes for
duration and starttime you can add that information using two classes on the mediatag. In this
case 'oip_ea_duration_101' (length is 101 seconds) and 'oip_ea_start_0' (start at 0 seconds).
When you not including these the scrubber will not appear.
<pre>
<video class="oip_ea_duration_101 oip_ea_start_0">
... source tags here ...
</video>
</pre>
Besides these you can identify your player with an unique id f.e. with 'oip_ea_id_myid123', which
is registered in 'player.id'. This can be usefull for example to track the number of plays of
a media item. OIPlayer fires two events to this effect: 'oiplayerplay' and 'oiplayerended', f.e.:
<pre>
$(document).ready(function() {
$('div.oiplayer').bind("oiplayerplay", function(ev, player) {
alert("I started playing: " + player.myname);
}
}
</pre>
</li>
<li>To have OIPlayer detect Java support in MSIE - for playing ogg with Cortado -
you need this div somewhere (just once) in your page:
<pre><div id="clientcaps"> </div></pre>
</li>
<li>
You may encounter a 'Not allowed' with Cortado since it is often not allowed to play
files from different hosts by some browsers. Be sure to copy your files to the host
from where your pages are served. Or use the Cortado jar from www.openimages.eu when you are
playing movies from there.
</li>
</ol>
<address>
Have fun! <a href="http://www.toly.nl">André van Toly</a>,
<a href="http://twitter.com/elfuego2">follow me on twitter</a>.
</address>
</div>
<script src="http://www.google-analytics.com/ga.js" type="text/javascript"> </script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-5799921-11");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>