uniPlay/index.html at master · baldur/uniPlay · GitHub

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
<?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <title></title>
    <link href="/stylesheets/reset-fonts-grids.css" media="screen" rel="stylesheet" type="text/css" />
  </head>

  <body class='uniPlay'>
      <div>load player:
          <a href='#vimeo'    class='examples vimeo'>Vimeo</a>
          <a href='#youtube'  class='examples youtube'>YouTube</a>
          <a href='#jwplayer' class='examples jwplayer'>JWPlayer</a>
      </div>
    <div id="player"></div>
    <div id="play">Play</div>
    <hr />
    <ul>
        <li>timer: <span id="timer"></span></lid>
        <li>current postion: <span id="currentPosition"></span></lid>
        <li>current state: <span id="currentState"></span></lid>
    </ul>

    <!-- multiple players here we go -->
    <div id="player_1"></div>
    <hr />
    <div id="player_2"></div>
    <hr />
    <div id="player_3"></div>
    <hr />

  </body>
  <!--[if IE]>
    <script src="/javascripts/firebug-lite-compressed.js" type="text/javascript"></script>
  <![endif]-->
  <script src="/javascripts/jquery.js" type="text/javascript"></script>
  <script src="/javascripts/swfobject.js" type="text/javascript"></script>
  <script src="/src/uniPlay.js" type="text/javascript"></script>
  <script src="/src/uniPlay/Modules/JWPlayer.js" type="text/javascript"></script>
  <script src="/src/uniPlay/Modules/Vimeo.js" type="text/javascript"></script>
  <script src="/src/uniPlay/Modules/YouTube.js" type="text/javascript"></script>
  <script type="text/javascript">
     var YourScope = {};
     YourScope.examples = {
       vimeo :  {
                 "video_id": "14533805",
                 "player": "Vimeo",
                 "width" : 180,
                 "height" : 120
                },
       youtube : {
                 "video_id": "OQSNhk5ICTI",
                 "player": "YouTube",
                 "width" : 180,
                 "height" : 120
                },
       /* this is for if you have something hosted on your own*/
       jwplayer : {
                 "url": "https://s3.amazonaws.com/snitchmedia-nostalgia-transcoded/94709166a8222c9306a63665c5980259vid00002.mp4",
                 "video_id": "video_two.mp4",
                 "player": "JWPlayer",
                 "image" : "https://s3.amazonaws.com/snitchmedia-nostalgia-transcoded/thumbnail.png",
                 "width" : 180,
                 "height" : 120
                }

     }
     $(document).ready(function () {
        $('#player_1').uniPlayer(YourScope.examples.vimeo);
        // LOOKING like we'll only see one youtube for now
        opts = {"video_id" : "ksThvPT_V5A",
                 "player": "YouTube",
                 "width" : 180,
                 "height" : 120}
        $('#player_2').uniPlayer(opts);
        $('#player_3').uniPlayer(YourScope.examples.jwplayer);

        $('#play').click( function(e) {
            YourScope.yourUniPlayer.play();
        });

        $('.examples').click(function(e) {
            //TODO this must die!!
            if(UniPlay.playerInstance) {
                // old UniPlay.playerInstance.unload();
                $('#player').uniPlayer('unload');
            }
            var attr = $(e.target).attr('class').split(' ');
            $('#player').uniPlayer(YourScope[attr[0]][attr[1]]);
            $('#player').uniPlayer('register', {'timer': $('#timer')});
            $('#player').uniPlayer('register', {'currentPosition' : $('#currentPosition')});
            $('#player').uniPlayer('register', {'currentState' : $('#currentState')});
        });

        // initialize if something was selected
        var picked = location.hash;
        if(picked) {
            $('.'+picked.substring(1,picked.length)+':first').trigger('click');
        } else {
            $('.examples:first').trigger('click');
        }
     });

  </script>
</html>