source: skins/glow/test/playlist.html @ 2139

Revision 2139, 3.3 KB checked in by jeroen, 16 months ago (diff)

added tests / build to glow skin
Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4
5    <meta charset="UTF-8">
6    <script type="text/javascript" src="assets/jwplayer.min.js"></script>
7    <title>Playlist Support</title>
8    <link rel="stylesheet" href="assets/style.css" />
9
10</head>
11<body>
12
13<h2>Playlist Support</h2>
14
15<div id="player"></div>
16
17<script type="text/javascript">
18    var playlist = [{
19        description: 'Big Buck Bunny is a short animated film by the Blender Institute. It is made using free and open source software.',
20        duration: 32,
21        file: 'http://content.bitsontherun.com/videos/bkaovAYt-52qL9xLP.mp4',
22        image: 'http://content.bitsontherun.com/thumbs/bkaovAYt-480.jpg',
23        title: 'Big Buck Bunny'
24    },{
25        description: 'Sintel is a fantasy computer generated short movie. It is the third release from the Blender Open Movie Project.',
26        duration: 52,
27        file: 'http://content.bitsontherun.com/videos/3XnJSIm4-52qL9xLP.mp4',
28        image: 'http://content.bitsontherun.com/thumbs/3XnJSIm4-480.jpg',
29        title: 'Sintel'
30    },{
31        description: 'Elephants Dream is the worlds first open movie, made entirely with open source graphics software such as Blender.',
32        duration: 75,
33        file: 'http://content.bitsontherun.com/videos/kaUXWqTZ-52qL9xLP.mp4',
34        image: 'http://content.bitsontherun.com/thumbs/kaUXWqTZ-480.jpg',
35        title: 'Elephants Dream'
36    },{
37        description: 'Hardcore geeks and Apple fanboys aren’t the only ones preparing to watch Steve Jobs announce whatever he is going to announce today. Why else would I have been on NPR’s “Morning Edition” discussing the possibilities of cloud-based music services this morning?',
38        duration: 10,
39        file: 'http://content.bitsontherun.com/videos/nfSyO85Q-52qL9xLP.mp4',
40        title: 'Can You ‘Bip Bop’? Apple Wants To Know..'
41    }];
42    var rightt = {
43        height: 270,
44        'playlist.position': 'right',
45        'playlist.size': 240,
46        skin: '../stijl.zip',
47        width: 720
48    };
49    var bottom = {
50        height: 430,
51        'playlist.position': 'bottom',
52        'playlist.size': 160,
53        skin: '../stijl.zip',
54        width: 480
55    };
56    function loadPlayer(html5,right) {
57        var options = {};
58        if(right) {
59            options = rightt;
60        } else { 
61            options = bottom;
62        }
63        if(html5) {
64            options.modes = [{type: 'html5'}];
65        } else { 
66            options.modes = [{type:'flash',src:'assets/player.swf'}];
67        }
68        options.playlist = playlist;
69        jwplayer("player").setup(options);
70    };
71    function loadList() {
72        var list = [];
73        list = list.concat(playlist,playlist,playlist);
74        jwplayer("player").load(list);
75    };
76</script>
77
78
79
80<p> Setup in <a href="javascript:loadPlayer(true,true)">HTML5 right</a>, <a href="javascript:loadPlayer(true,false)">HTML5 bottom</a>, <a href="javascript:loadPlayer(false,true)">Flash right</a>, <a href="javascript:loadPlayer(false,false)">Flash bottom</a>.</p>
81<p>Load a <a href="javascript:loadList()">long playlist</a> to check the scrollbar.</p>
82
83<ul>
84<li>Check if the skin generally looks correct.</li>
85<li>Check rollovers of all buttons. Do they not displace the button?</li>
86<li>Check the buffering icon. Does it rotate smoothly?</li>
87</ul>
88
89</body>
90</html>
Note: See TracBrowser for help on using the repository browser.