-
Notifications
You must be signed in to change notification settings - Fork 3
/
embed-html.html
45 lines (38 loc) · 3 KB
/
embed-html.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pipe Embed v2.0 HTML 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 HTML Demo</h1>
<p>This a demo implementation of the Pipe embed code v2.0 HTML 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-javascript.html">Pipe Embed v2.0 JavaScript Demo</a></p>
<br/>
<!-- The HTML tag below will contain the Pipe recorder HTML elements -->
<piperecorder id="first-recorder" pipe-width="100%" pipe-height="360" pipe-qualityurl="avq/720p.xml" pipe-accountHash="1edfef4c4967d69b7129ec3ffa534002" pipe-eid="5" pipe-showMenu="0" pipe-mrt="120" pipe-sis="0" pipe-asv="0" pipe-mv="1" pipe-st="1" pipe-ssb="1" pipe-dpv="0" pipe-ao="0" pipe-dup="1" pipe-srec="cbmhjlfmbhihimmlofbgkplnhgbgiipn" pipe-cornerradius="8" pipe-bgCol="0xf6f6f6" pipe-menuCol="0xe9e9e9" pipe-normalCol="0x334455" pipe-overCol="0x556677" pipe-payload='{"userId":"55a95eeb936dd30100e0aff6","jobId":"55a7e6555f1bdc010014d6a1", "email":"[email protected]", "link":"https://www.amazon.com/D-G-P-4-W/dp/ref=as_li_ss_tl?ie=UTF8&sr=8-1&keywords=devialet"}'></piperecorder>
<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</button>
</div>
<br/>
<p>The 2.0 embed code supports multiple recorders on the page. The example below is a second embed of a default HTML Embed with the default UI</p>
<br/>
<!-- Pipe Second HTML Embed -->
<piperecorder id="second-recorder" pipe-width="320" pipe-height="270" pipe-qualityurl="avq/240p.xml" pipe-accountHash="1edfef4c4967d69b7129ec3ffa534002" pipe-eid="5" pipe-showMenu="1" pipe-mrt="120" pipe-sis="0" pipe-asv="0" pipe-mv="1" pipe-st="1" pipe-ssb="1" pipe-dpv="0" pipe-ao="0" pipe-dup="1" pipe-srec="cbmhjlfmbhihimmlofbgkplnhgbgiipn" pipe-cornerradius="8" pipe-bgCol="0xf6f6f6" pipe-menuCol="0xe9e9e9" pipe-normalCol="0x334455" pipe-overCol="0x556677" pipe-payload='{"userId":"55a95eeb936dd30100e0aff6","jobId":"55a7e6555f1bdc010014d6a1", "email":"[email protected]", "link":"https://www.amazon.com/D-G-P-4-W/dp/ref=as_li_ss_tl?ie=UTF8&sr=8-1&keywords=devialet"}'></piperecorder>
<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-html.js"></script>
</body>
</html>