source: trunk/html5/test/examples/custom_skin.html @ 1367

Revision 1367, 11.6 KB checked in by zach, 3 years ago (diff)

Prevetning fullscreen in webkit before startup
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3    <head>
4        <title>Custom skin</title>
5        <script type="text/javascript" src="../../../js/bin-debug/jwplayer.js">
6        </script>
7        <script type="text/javascript" src="../../bin-debug/jwplayer.html5.js">
8        </script>
9    </head>
10    <body>
11        <h1>Custom Player Skin</h1>
12        <p>
13            This sets up a player for each open source skin. The player will be setup with multiple sources, so it should play in IE9, FF, Chrome, Safari, and Opera. IE < 9 will simply display "HTML5 Player should replace this".
14        </p>
15        <p>
16            Beelden
17        </p>
18        <div height="270" id="beelden" width="480">
19            HTML5 Player should replace this
20        </div>
21        <script type="text/javascript">
22            var beelden = new jwplayer.html5(document.getElementById("beelden"));
23            beelden.setup({
24                levels: [{
25                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-486405.mp4"
26                }, {
27                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-604476.ogv"
28                }],
29                image: "http://content.bitsontherun.com/thumbs/gSzpo2wh-480.jpg",
30                skin: "../../../../skins/beelden/beelden.xml"
31            });
32        </script>
33        <p>
34            Bekle
35        </p>
36        <div height="270" id="bekle" width="480">
37            HTML5 Player should replace this
38        </div>
39        <script type="text/javascript">
40            var bekle = new jwplayer.html5(document.getElementById("bekle"));
41            bekle.setup({
42                levels: [{
43                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-486405.mp4"
44                }, {
45                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-604476.ogv"
46                }],
47                image: "http://content.bitsontherun.com/thumbs/gSzpo2wh-480.jpg",
48                skin: "../../../../skins/bekle/bekle.xml"
49            });
50        </script>
51        <p>
52            Classic
53        </p>
54        <div height="270" id="classic" width="480">
55            HTML5 Player should replace this
56        </div>
57        <script type="text/javascript">
58            var classic = new jwplayer.html5(document.getElementById("classic"));
59            classic.setup({
60                levels: [{
61                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-486405.mp4"
62                }, {
63                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-604476.ogv"
64                }],
65                image: "http://content.bitsontherun.com/thumbs/gSzpo2wh-480.jpg",
66                skin: "../../../../skins/classic/classic.xml"
67            });
68        </script>
69        <p>
70            Five
71        </p>
72        <div height="270" id="five" width="480">
73            HTML5 Player should replace this
74        </div>
75        <script type="text/javascript">
76            var five = new jwplayer.html5(document.getElementById("five"));
77            five.setup({
78                levels: [{
79                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-486405.mp4"
80                }, {
81                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-604476.ogv"
82                }],
83                image: "http://content.bitsontherun.com/thumbs/gSzpo2wh-480.jpg",
84                skin: "../../../../skins/five/five.xml"
85            });
86        </script>
87        <p>
88            Glow
89        </p>
90        <div height="270" id="glow" width="480">
91            HTML5 Player should replace this
92        </div>
93        <script type="text/javascript">
94            var glow = new jwplayer.html5(document.getElementById("glow"));
95            glow.setup({
96                levels: [{
97                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-486405.mp4"
98                }, {
99                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-604476.ogv"
100                }],
101                image: "http://content.bitsontherun.com/thumbs/gSzpo2wh-480.jpg",
102                skin: "../../../../skins/glow/glow.xml"
103            });
104        </script>
105        <p>
106            Grungetape
107        </p>
108        <div height="270" id="grungetape" width="480">
109            HTML5 Player should replace this
110        </div>
111        <script type="text/javascript">
112            var grungetape = new jwplayer.html5(document.getElementById("grungetape"));
113            grungetape.setup({
114                levels: [{
115                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-486405.mp4"
116                }, {
117                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-604476.ogv"
118                }],
119                image: "http://content.bitsontherun.com/thumbs/gSzpo2wh-480.jpg",
120                skin: "../../../../skins/grungetape/grungetape.xml"
121            });
122        </script>
123        <p>
124            Icecreamsneaka
125        </p>
126        <div height="270" id="icecreamsneaka" width="480">
127            HTML5 Player should replace this
128        </div>
129        <script type="text/javascript">
130            var icecreamsneaka = new jwplayer.html5(document.getElementById("icecreamsneaka"));
131            icecreamsneaka.setup({
132                levels: [{
133                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-486405.mp4"
134                }, {
135                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-604476.ogv"
136                }],
137                image: "http://content.bitsontherun.com/thumbs/gSzpo2wh-480.jpg",
138                skin: "../../../../skins/icecreamsneaka/icecreamsneaka.xml"
139            });
140        </script>
141        <p>
142            Kleur
143        </p>
144        <div height="270" id="kleur" width="480">
145            HTML5 Player should replace this
146        </div>
147        <script type="text/javascript">
148            var kleur = new jwplayer.html5(document.getElementById("kleur"));
149            kleur.setup({
150                levels: [{
151                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-486405.mp4"
152                }, {
153                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-604476.ogv"
154                }],
155                image: "http://content.bitsontherun.com/thumbs/gSzpo2wh-480.jpg",
156                skin: "../../../../skins/kleur/kleur.xml"
157            });
158        </script>
159        <p>
160            Lulu
161        </p>
162        <div height="270" id="lulu" width="480">
163            HTML5 Player should replace this
164        </div>
165        <script type="text/javascript">
166            var lulu = new jwplayer.html5(document.getElementById("lulu"));
167            lulu.setup({
168                levels: [{
169                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-486405.mp4"
170                }, {
171                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-604476.ogv"
172                }],
173                image: "http://content.bitsontherun.com/thumbs/gSzpo2wh-480.jpg",
174                skin: "../../../../skins/lulu/lulu.xml"
175            });
176        </script>
177        <p>
178            Modieus
179        </p>
180        <div height="270" id="modieus" width="480">
181            HTML5 Player should replace this
182        </div>
183        <script type="text/javascript">
184            var modieus = new jwplayer.html5(document.getElementById("modieus"));
185            modieus.setup({
186                levels: [{
187                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-486405.mp4"
188                }, {
189                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-604476.ogv"
190                }],
191                image: "http://content.bitsontherun.com/thumbs/gSzpo2wh-480.jpg",
192                skin: "../../../../skins/modieus/modieus.xml"
193            });
194        </script>
195        <p>
196            Nacht
197        </p>
198        <div height="270" id="nacht" width="480">
199            HTML5 Player should replace this
200        </div>
201        <script type="text/javascript">
202            var nacht = new jwplayer.html5(document.getElementById("nacht"));
203            nacht.setup({
204                levels: [{
205                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-486405.mp4"
206                }, {
207                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-604476.ogv"
208                }],
209                image: "http://content.bitsontherun.com/thumbs/gSzpo2wh-480.jpg",
210                skin: "../../../../skins/nacht/nacht.xml"
211            });
212        </script>
213        <p>
214            Playcasso
215        </p>
216        <div height="270" id="playcasso" width="480">
217            HTML5 Player should replace this
218        </div>
219        <script type="text/javascript">
220            var playcasso = new jwplayer.html5(document.getElementById("playcasso"));
221            playcasso.setup({
222                levels: [{
223                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-486405.mp4"
224                }, {
225                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-604476.ogv"
226                }],
227                image: "http://content.bitsontherun.com/thumbs/gSzpo2wh-480.jpg",
228                skin: "../../../../skins/playcasso/playcasso.xml"
229            });
230        </script>
231        <p>
232            Schoon
233        </p>
234        <div height="270" id="schoon" width="480">
235            HTML5 Player should replace this
236        </div>
237        <script type="text/javascript">
238            var schoon = new jwplayer.html5(document.getElementById("schoon"));
239            schoon.setup({
240                levels: [{
241                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-486405.mp4"
242                }, {
243                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-604476.ogv"
244                }],
245                image: "http://content.bitsontherun.com/thumbs/gSzpo2wh-480.jpg",
246                skin: "../../../../skins/schoon/schoon.xml"
247            });
248        </script>
249        <p>
250            Snel
251        </p>
252        <div height="270" id="snel" width="480">
253            HTML5 Player should replace this
254        </div>
255        <script type="text/javascript">
256            var snel = new jwplayer.html5(document.getElementById("snel"));
257            snel.setup({
258                levels: [{
259                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-486405.mp4"
260                }, {
261                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-604476.ogv"
262                }],
263                image: "http://content.bitsontherun.com/thumbs/gSzpo2wh-480.jpg",
264                skin: "../../../../skins/snel/snel.xml"
265            });
266        </script>
267        <p>
268            Stijl
269        </p>
270        <div height="270" id="stijl" width="480">
271            HTML5 Player should replace this
272        </div>
273        <script type="text/javascript">
274            var stijl = new jwplayer.html5(document.getElementById("stijl"));
275            stijl.setup({
276                levels: [{
277                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-486405.mp4"
278                }, {
279                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-604476.ogv"
280                }],
281                image: "http://content.bitsontherun.com/thumbs/gSzpo2wh-480.jpg",
282                skin: "../../../../skins/stijl/stijl.xml"
283            });
284        </script>
285        <p>
286            Stormtrooper
287        </p>
288        <div height="270" id="stormtrooper" width="480">
289            HTML5 Player should replace this
290        </div>
291        <script type="text/javascript">
292            var stormtrooper = new jwplayer.html5(document.getElementById("stormtrooper"));
293            stormtrooper.setup({
294                levels: [{
295                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-486405.mp4"
296                }, {
297                        file: "http://content.bitsontherun.com/videos/gSzpo2wh-604476.ogv"
298                }],
299                image: "http://content.bitsontherun.com/thumbs/gSzpo2wh-480.jpg",
300                skin: "../../../../skins/stormtrooper/stormtrooper.xml"
301            });
302        </script>
303        <h3>HTML code</h3>
304    </body>
305</html>
Note: See TracBrowser for help on using the repository browser.