HI WELCOME TO KANSIRIS

HTML5 Video Editor and Photo SlideShow Creator

Leave a Comment
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>HTML5 Images to Video Converter | TechSlides</title>
<style>
body {text-align: center;}
ul {list-style:none;}
#drag { border: 10px solid black; text-align: center; padding:20px; width: 500px; margin: auto; display: inline-block;}
#einput {width:400px;}
#output {margin:20px;}
#filesinput {
visibility: collapse;
width: 0px;
}
#output img{
border: 5px solid #333;
margin-right: 2px;
}
#small label {font-size:14px;}
#small div {margin:5px 0;}
</style>
<script>
//analytics tag
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-941940-28']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<h1>HTML5 Video Editor and Photo SlideShow Creator</h1>
<p>Select some photos, set some options, and watch how a video is generated using your images as a slideshow. Check out the source to see how it works. <a href="http://techslides.com/convert-images-to-video-with-javascript/">Back to Article</a></p><br>
<span id="status">Select some images.</span><br><br>
<div id="drag">DROP!
<button id="fbutton">Select Image(s)</button>
<div id="small">
<div><label>Width:</label><input id="width" type="number" step="1" value="500"></div>
<div><label>Height:</label><input id="height" type="number" step="1" value="300"></div>
<div><label>Video Frame Rate:</label><input id="framerate" type="number" step="1" value="15"></div>
</div>
<button id="createvideo">Create Video</button>
</div>
<input type="file" id="filesinput" multiple>
<br>
<video id="awesome" controls autoplay loop></video>
<br>
<a style="display:none" id="download" download="video.webm">Download WebM</a>
<canvas id="canvas" style="display:none"></canvas>
<script src="whammy.js"></script>
<script>
/* Drag'n drop stuff */
var drag = document.getElementById("drag");
var fbutton = document.getElementById("fbutton");
var createvideo = document.getElementById("createvideo");
var files = document.getElementById("filesinput");
var ctx = 0;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//image to video via Whammy
var video = new Whammy.Video(15);
var filesarr = [];
createvideo.addEventListener("click", function() {
document.getElementById('status').innerHTML = "Working... Please Wait.";
document.getElementById('awesome').src = "";
ctx = 0;
canvas.width = document.getElementById("width").value;
canvas.height = document.getElementById("height").value;
video = new Whammy.Video(document.getElementById("framerate").value);
//if we have images loaded
if(filesarr.length>0){
//loop through them and process
for(i=0; i<filesarr.length; i++) {
var file = filesarr[i];
if(file.type.match(/image.*/)){
process(file);
} else {
document.getElementById('status').innerHTML = "This file does not seem to be a image.";
}
}
} else {
document.getElementById('status').innerHTML = "Please select some images.";
}
}, false);
fbutton.addEventListener("click", function() {
document.getElementById('filesinput').click();
}, false);
drag.ondragover = function(e) {e.preventDefault()}
drag.ondrop = function(e) {
e.preventDefault();
filesarr = e.dataTransfer.items;
document.getElementById('status').innerHTML = "Please select options and click on Create Video.";
}
//process files VIA INPUT
files.addEventListener("change", function (e) {
filesarr = e.target.files;
document.getElementById('status').innerHTML = "Please select options and click on Create Video.";
}, false);
/* main process function */
function process(file) {
var reader = new FileReader();
reader.onload = function(event) {
var dataUri = event.target.result;
var img = new Image();
//load image and drop into canvas
img.onload = function() {
//a custom fade in and out slideshow
context.globalAlpha = 0.2;
context.drawImage(img, 0, 0, canvas.width, canvas.height);
video.add(context);
context.clearRect(0,0,context.canvas.width,context.canvas.height);
context.globalAlpha = 0.4;
context.drawImage(img, 0, 0, canvas.width, canvas.height);
video.add(context);
context.clearRect(0,0,context.canvas.width,context.canvas.height);
context.globalAlpha = 0.6;
context.drawImage(img, 0, 0, canvas.width, canvas.height);
video.add(context);
context.clearRect(0,0,context.canvas.width,context.canvas.height);
context.globalAlpha = 0.8;
context.drawImage(img, 0, 0, canvas.width, canvas.height);
video.add(context);
context.clearRect(0,0,context.canvas.width,context.canvas.height);
context.globalAlpha = 1;
context.drawImage(img, 0, 0, canvas.width, canvas.height);
//this should be a loop based on some user input
video.add(context);
video.add(context);
video.add(context);
video.add(context);
video.add(context);
video.add(context);
video.add(context);
context.clearRect(0,0,context.canvas.width,context.canvas.height);
context.globalAlpha = 0.8;
context.drawImage(img, 0, 0, canvas.width, canvas.height);
video.add(context);
context.clearRect(0,0,context.canvas.width,context.canvas.height);
context.globalAlpha = 0.6;
context.drawImage(img, 0, 0, canvas.width, canvas.height);
video.add(context);
context.clearRect(0,0,context.canvas.width,context.canvas.height);
context.globalAlpha = 0.4;
context.drawImage(img, 0, 0, canvas.width, canvas.height);
video.add(context);
ctx++;
finalizeVideo();
};
img.src = dataUri;
};
reader.onerror = function(event) {
console.error("File could not be read! Code " + event.target.error.code);
};
reader.readAsDataURL(file);
}
function finalizeVideo(){
//check if its ready
if(ctx==filesarr.length){
var start_time = +new Date;
var output = video.compile();
var end_time = +new Date;
var url = webkitURL.createObjectURL(output);
document.getElementById('awesome').src = url; //toString converts it to a URL via Object URLs, falling back to DataURL
document.getElementById('download').style.display = '';
document.getElementById('download').href = url;
document.getElementById('status').innerHTML = "Compiled Video in " + (end_time - start_time) + "ms, file size: " + Math.ceil(output.size / 1024) + "KB";
}
}
</script>
</body>
</html>

0 comments:

Post a Comment

Note: only a member of this blog may post a comment.