Created
July 18, 2018 14:06
-
-
Save prof3ssorSt3v3/70f26dbe3a8eae0f15adeb745418e863 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>HTML5 Video & Audio Input</title> | |
<meta name="viewport" content="width=device-width"> | |
<link rel="stylesheet" href="main.css"> | |
<style> | |
p>audio, | |
p>video, | |
p>img{ | |
max-width:90%; | |
} | |
</style> | |
</head> | |
<body> | |
<header> | |
<h1>HTML5 Video & Audio Input</h1> | |
<h2>Capturing Media with HTML</h2> | |
</header> | |
<main> | |
<form action="#" id="myform" enctype="multipart/form-data"> | |
<label for="capture">Capture Media</label> | |
<input type="file" | |
id="capture" | |
accept="image/*,video/*,audio/*" | |
capture | |
multiple /> | |
<br/> | |
<input type="submit" value="Process" /> | |
</form> | |
<p><img src="" id="img" alt="from phone"/></p> | |
<p> | |
<audio src="" id="audio" controls></audio> | |
</p> | |
<p> | |
<video src="" id="video" controls></video> | |
</p> | |
</main> | |
<script> | |
document.addEventListener('DOMContentLoaded', (ev)=>{ | |
let form = document.getElementById('myform'); | |
//get the captured media file | |
let input = document.getElementById('capture'); | |
input.addEventListener('change', (ev)=>{ | |
console.dir( input.files[0] ); | |
if(input.files[0].type.indexOf("image/") > -1){ | |
let img = document.getElementById('img'); | |
img.src = window.URL.createObjectURL(input.files[0]); | |
} | |
else if(input.files[0].type.indexOf("audio/") > -1 ){ | |
let audio = document.getElementById('audio'); | |
audio.src = window.URL.createObjectURL(input.files[0]); | |
} | |
else if(input.files[0].type.indexOf("video/") > -1 ){ | |
let video = document.getElementById('video'); | |
video.src=window.URL.createObjectURL(input.files[0]); | |
} | |
}) | |
}) | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment