videomail-client
Version:
A wicked npm package to record videos directly in the browser, wohooo!
116 lines (103 loc) • 3.06 kB
HTML
<html>
<head>
<title>videomail-client examples</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style type="text/css">
input[type='email'],
input[type='text'],
fieldset,
textarea,
.buttons,
#startOver {
margin: 1em 0;
display: block;
}
</style>
</head>
<body>
<h1>With CC and BCC</h1>
<p>Another form example with optional CC and BCC input fields for email addresses.</p>
<!-- Once you set the method to POST, then two request will be made internally. -->
<!-- The first one to the videomail server and the second one to the specified action -->
<form action="/contact" method="post" id="videomailFormWithCcAndBcc">
<input
name="from"
size="64"
type="email"
placeholder="Enter your email address"
required
/>
<input
multiple
name="to"
size="64"
type="email"
placeholder="Enter recipient TO email addresss(es)"
/>
<input
multiple
name="cc"
size="64"
type="email"
placeholder="Enter recipient CC email address(es)"
/>
<input
multiple
name="bcc"
size="64"
type="email"
placeholder="Enter recipient BCC email address(es)"
/>
<input
name="subject"
size="64"
type="text"
placeholder="Enter a subject"
required
/>
<div id="videomail"></div>
<textarea
id="body"
name="body"
placeholder="Enter your message"
cols="40"
rows="4"
required
></textarea>
</form>
<!-- Placed outside the form by intention to ensure code works with that scenario as well -->
<input type="button" value="Submit" disabled />
<div id="viewVideo" style="display: none">
<h2 class="subject"></h2>
<h3 class="status"></h3>
<p class="body"></p>
<video class="replay"></video>
<button id="startOver">Start over</button>
</div>
<script src="/js/videomail-client.js"></script>
<script>
var videomailClient = new VideomailClient({
verbose: true,
video: { limitSeconds: 120, width: 320, countdown: false },
selectors: {
submitButtonSelector: 'body input[value="Submit"]',
formId: 'videomailFormWithCcAndBcc'
}
})
var startOverButton = document.getElementById('startOver')
var onSubmitted = function (videomail, response) {
var statusHeader = document.querySelector('h3.status')
// status has been generated on server side, see gulp task 'connect'
statusHeader.innerHTML = response.status
this.replay(videomail, 'viewVideo')
startOverButton.onclick = this.startOver
}
videomailClient.on(
videomailClient.events.SUBMITTED,
onSubmitted.bind(videomailClient)
)
videomailClient.show()
</script>
</body>
</html>