JS:
<style>
.space {
height: 10px;
}
.timeline canvas {
height: 100px;
}
</style>
<div id="test">
</div>
<script>
var videothumbs = function (cont, videosrc, typevideo) {
var timeline = document.createElement('div'),
video = document.createElement('video'),
space = document.createElement('div'),
time = 0,
ended = false;
count = 0;
video.setAttribute('controls', 'controls');
video.src = videosrc;
video.type = typevideo;
space.setAttribute('class', 'space');
timeline.setAttribute('class', 'timeline');
video.setAttribute('class', 'video');
video.addEventListener('loadeddata', function (e) {
loadTime();
}, false);
video.addEventListener('seeked', function () {
if (ended === false) {
createImage();
loadTime();
}
}, false);
video.addEventListener('ended', function (e) {
ended = true;
}, false);
function loadTime() {
if (ended === false) {
time += (Math.ceil(video.duration / 9));
if (time <= video.duration) {
video.currentTime = time;
} else {
console.log('end');
ended = true;
}
}
};
function createImage() {
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
timeline.appendChild(canvas);
var dataURL = canvas.toDataURL();
saveImage(dataURL);
};
function saveImage(dataURL) {
this.count++;
$.ajax({
url: "saveImage.php?count="+ this.count,
data: {
base64: dataURL
},
type: "post",
complete: function () {
console.log("Ok");
}
});
}
cont.appendChild(video);
cont.appendChild(space);
cont.appendChild(timeline);
video.currentTime = 0;
}
videothumbs(document.getElementById('test'), './uploads/test.mp4', 'video/mp4');
</script> |
<style>
.space {
height: 10px;
}
.timeline canvas {
height: 100px;
}
</style>
<div id="test">
</div>
<script>
var videothumbs = function (cont, videosrc, typevideo) {
var timeline = document.createElement('div'),
video = document.createElement('video'),
space = document.createElement('div'),
time = 0,
ended = false;
count = 0;
video.setAttribute('controls', 'controls');
video.src = videosrc;
video.type = typevideo;
space.setAttribute('class', 'space');
timeline.setAttribute('class', 'timeline');
video.setAttribute('class', 'video');
video.addEventListener('loadeddata', function (e) {
loadTime();
}, false);
video.addEventListener('seeked', function () {
if (ended === false) {
createImage();
loadTime();
}
}, false);
video.addEventListener('ended', function (e) {
ended = true;
}, false);
function loadTime() {
if (ended === false) {
time += (Math.ceil(video.duration / 9));
if (time <= video.duration) {
video.currentTime = time;
} else {
console.log('end');
ended = true;
}
}
};
function createImage() {
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
timeline.appendChild(canvas);
var dataURL = canvas.toDataURL();
saveImage(dataURL);
};
function saveImage(dataURL) {
this.count++;
$.ajax({
url: "saveImage.php?count="+ this.count,
data: {
base64: dataURL
},
type: "post",
complete: function () {
console.log("Ok");
}
});
}
cont.appendChild(video);
cont.appendChild(space);
cont.appendChild(timeline);
video.currentTime = 0;
}
videothumbs(document.getElementById('test'), './uploads/test.mp4', 'video/mp4');
</script>
PHP:
<?php
$baseFromJavascript = $_POST['base64'];
$base_to_php = explode(',', $baseFromJavascript);
$data = base64_decode($base_to_php[1]);
$filepath = "image_".$_GET['count'].".png";
file_put_contents($filepath,$data);
?> |
<?php
$baseFromJavascript = $_POST['base64'];
$base_to_php = explode(',', $baseFromJavascript);
$data = base64_decode($base_to_php[1]);
$filepath = "image_".$_GET['count'].".png";
file_put_contents($filepath,$data);
?>
Related Posts