source: branches/jw6/test/animations.html @ 2167

Revision 2167, 1.6 KB checked in by pablo, 14 months ago (diff)

Branch for v6 dev work

Line 
1<!doctype html>
2<html>
3        <head>
4          <title>Animtaions Test</title>
5          <script type="text/javascript" src="../bin-debug/jwplayer.js"></script>
6         
7          <script type="text/javascript">
8                function update(form) {
9                        var dir = form.direction.options[form.direction.selectedIndex].value;
10                        var dur = form.duration.value;
11                        var anim;
12
13                        switch(dir) {
14                        case "forwards": 
15                                anim = new jwplayer.html5.utils.animations(document.getElementById("player"), form.property.value, form.from.value, form.to.value, form.duration.value);
16                                anim.start();
17                                break;
18                        case "backwards":
19                                anim = new jwplayer.html5.utils.animations(document.getElementById("player"), form.property.value, form.to.value, form.from.value, form.duration.value);
20                                anim.start();
21                        }
22
23                        form.direction.selectedIndex = form.direction.selectedIndex ? 0 : 1; 
24                }
25          </script>
26         
27          <style type="text/css">
28            #player {
29             width: 720px;
30             height: 406px;
31             position: absolute;
32             background-image: url('/testing/files/bunny_preview.png');
33             background-size: 100% 100%;
34            }
35          </style>
36
37        </head>
38       
39        <body>
40    <form id="form" onsubmit="update(this); return false;">
41      property: <input name="property" value="opacity" style="width: 50px">
42      from: <input name="from" value="1" style="width: 50px">
43      to: <input name="to" value="0" style="width: 50px">
44      duration: <input name="duration" value="500" style="width: 50px">
45      direction: <select name="direction">
46        <option value="forwards">forwards</option>
47        <option value="backwards">backwards</option>
48      </select>
49      <input type="submit"/>
50    </form>
51   
52
53    <div id="player">
54    </div>
55
56        </body>
57</html>
Note: See TracBrowser for help on using the repository browser.