-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
160 lines (138 loc) · 7.65 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
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>Slate Embedded Player SDK</title>
<meta name="description" content="Slate Embedded Player SDK demo.">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.0.8/es5-shim.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/prism.css" rel="stylesheet">
<style type="text/css">
iframe {max-width: 100%; width: 100%;}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="assets/prism.js"></script>
<script type="text/javascript" src="slate.player.js"></script>
<script type="text/javascript">
$(function() {
$('.example .example-code').each(function() {
var $el = $(this),
code = $el.text();
$el.closest('.example').find('pre code').text(code);
});
});
</script>
</head>
<body>
<div class="container">
<section class="jumbotron">
<h1>Slate Embedded Player SDK Demo</h1>
<p>This demo shows some examples of how the embedded player works and can be controlled by JavaScript API.</p>
<p>
<a href="https://github.com/slate-app/player" class="btn btn-primary btn-lg" role="button">GitHub Repo</a>
</p>
</section>
<section id="events" class="example">
<div class="row">
<h2>Listening for DOM events</h2>
<div class="col-md-6">
<iframe class="slate-player" width="555" height="300" src="https://presents.slateapp.com/embed/112?width=555&height=300" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" scrolling="no" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="col-md-6">
<p>Events:</p>
<textarea class="form-control example-log" style="height: 270px;"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3>Code:</h3>
<script type="text/javascript" class="example-code">$(function() {
// grab reference to the log element
var $log = $('#events .example-log');
// listen for DOM events on the player
$('#events .slate-player').on([
// list of all events that we listen for
'initialized', 'load', 'error', 'finish', 'mute', 'pause', 'resume', 'stop',
'beforeseek', 'fullscreen', 'fullscreen-exit', 'progress', 'seek',
'speed', 'volume'
].join(' '), function(ev, currentClip, third) {
// log this event to the log element
$log.text(
$log.text() + 'event ' + ev.type
// add clip information if set
+ (currentClip !== undefined ? ' with clip #' + currentClip.id + ' "' + currentClip.title + '"' : '')
// add third argument information if set
+ (third !== undefined ? ' and 3rd argument: ' + JSON.stringify(third) : '')
+ "\n"
);
// make sure scrolled to bottom
$log.scrollTop(999999999);
});
});</script>
<pre class="pre-scrollable"><code class="language-javascript"></code></pre>
</div>
</div>
</section>
<hr>
<section id="control" class="example">
<div class="row">
<h2>Control with JavaScript</h2>
<div class="col-md-6">
<iframe class="slate-player" width="555" height="300" src="https://presents.slateapp.com/embed/108?width=555&height=300" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" scrolling="no" referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
<div class="col-md-6">
<p>Control:</p>
<p>
<button type="button" class="btn btn-success" data-action="play"><i class="fa fa-play"></i> Play</button>
<button type="button" class="btn btn-danger" data-action="stop"><i class="fa fa-stop"></i> Stop</button>
<button type="button" class="btn btn-warning" data-action="pause"><i class="fa fa-pause"></i> Pause</button>
<button type="button" class="btn btn-success" data-action="resume"><i class="fa fa-resume"></i> Resume</button>
<button type="button" class="btn btn-default" data-action="toggle"><i class="fa fa-pause"></i>/<i class="fa fa-resume"></i> Toggle pause/resume</button>
</p>
<p>
<button type="button" class="btn btn-info" data-action="seek" data-argument="2">Seek to 2s</button>
<button type="button" class="btn btn-info" data-action="seekTo" data-argument="5">Seek to 50%</button>
</p>
<p>
<button type="button" class="btn btn-warning" data-action="speed" data-argument="0.5"><i class="fa fa-forward"></i> 0.5x speed</button>
<button type="button" class="btn btn-success" data-action="speed" data-argument="1"><i class="fa fa-play"></i> 1x speed</button>
<button type="button" class="btn btn-danger" data-action="speed" data-argument="2"><i class="fa fa-fast-forward"></i> 2x speed</button>
</p>
<p>
<button type="button" class="btn btn-danger" data-action="mute"><i class="fa fa-volume-off"></i> Mute / Unmute</button>
<button type="button" class="btn btn-default" data-action="volume" data-argument="0.1"><i class="fa fa-volume-down"></i> 10% volume</button>
<button type="button" class="btn btn-default" data-action="volume" data-argument="0.5"><i class="fa fa-volume-down"></i>50% volume</button>
<button type="button" class="btn btn-success" data-action="volume" data-argument="1"><i class="fa fa-volume-up"></i> 100% volume</button>
</p>
<!--- `$player.slatePlayer('load', clip)` - load a clip to the player where `clip` is an object containing clip data from Slate -->
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3>Code:</h3>
<script type="text/javascript" class="example-code">$(function() {
// listen for clicks on the buttons
$('#control button').click(function() {
var $button = $(this),
// get the action name from the button's data-action attribute
action = $button.data('action'),
// get optional argument for the button's data-argument attribute
argument = $button.data('argument') || null;
// call the Slate Player plugin action
$('#control .slate-player').slatePlayer(action, argument);
return false;
});
});</script>
<pre class="pre-scrollable"><code class="language-javascript"></code></pre>
</div>
</div>
</section>
</div>
</body>
</html>