-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathembed-javascript.html
46 lines (41 loc) · 2.21 KB
/
embed-javascript.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pipe Embed v2.0 JavaScript Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Pipe Embed v2.0 JavaScript Demo</h1>
<p>This is a demo implementation of the Pipe embed code v2.0 JavaScript version with custom UI and controlled through the JavaScript events and control API. The default menu is hidden. Check out the code on <a href="https://github.com/addpipe/embed-code-v2.0-demos" target="_blank">GitHub</a>.</p>
<p>You can also check out the <a href="https://addpipe.com/embed-code-v2-demos/embed-html.html">Pipe Embed v2.0 HTML Demo</a></p>
<br/>
<!-- The DIV below will contain the Pipe recorder HTML elements -->
<div id="first-recorder" style="width:640px;height:360px;border:1px solid grey;text-align:center;border-radius:8px;"><span style="line-height:180px">Loading...</span></div>
<div id="controls" class="controls">
<button id="recordbtn" disabled>Record</button>
<button id="stopbtn" disabled>Stop</button>
<button id="playbtn" disabled>Play</button>
<button id="pausebtn" disabled>Pause</button>
<button id="savebtn" disabled>Save</button>
<button id="removebtn">Remove First Recorder</button>
</div>
<br/>
<p>The 2.0 embed code supports multiple recorders on the page. The example below illustrates how easily a Pipe recorder can be added and removed from a page. This allows it to be easily integrated in single page apps built with React, Angular or Vue. This here for example inserts and removes a Pipe recorder with default UI.</p>
<!-- Div that will be replaced with a Pipe recorder -->
<div id="second-recorder"></div>
<div class="controls">
<button id="addbtn">Add Second Recorder</button>
<button id="removebtn2" disabled>Remove Second Recorder</button>
</div>
<br/>
<h3>Log</h3>
<pre id="log"></pre>
<!-- Inserting the pipe.js and pipe.css -->
<link rel="stylesheet" href="//s1.addpipe.com/2.0/pipe.css"/>
<script type="text/javascript" src = "//s1.addpipe.com/2.0/pipe.js"></script>
<!-- Our custom code for implementing Pipe -->
<script src="js/embed-javascript.js"></script>
</body>
</html>