php


thumbnails without using ffmpeg, using html canvas here with no luck


Trying to make a thumbnail from a video without ffmpeg since the persons hosting site doesn't have it and they are not willing to change hosts. Ive tried several combinations offered in similar questions on this stackoverflow with no luck. With this code, once the forms "video" input is changed, a function is called to have the video source equal the forms "video" input value. Then I have a button "Create thumbnail" to set the html canvas equal to a snapshot of the embedded video. I can see the snapshot in the canvas area but when I right-click the image, it doesn't give me the option to save image, also if I use code to take a snapshot of the that canvas id it comes out blank, also if I try to get the data url of the canvas it returns nothing, please help and thanks in advance.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js" ></script>
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
var w, h, ratio;
video.addEventListener('loadedmetadata', function() {
ratio = video.videoWidth / video.videoHeight;
w = video.videoWidth - 100;
h = parseInt(w / ratio, 10);
canvas.width = w;
canvas.height = h;
}, false);
function snap() {
context.fillRect(0, 0, w, h);
context.drawImage(video, 0, 0, w, h);
document.getElementById("test").innerHTML = context.toDataURL("image/png");
}
function loadVid(){
var embedVidSrc = $("#videoSource").attr("value");
var tester = document.getElementById('sourceOfVideo').src = embedVidSrc;
}
</script>
</head>
<body>
<div id="box">
<form method="Post" enctype="multipart/form-data">
Title:<br />
<input type="text" name="title" /><br/>
Description:<br />
<input type="text" name="description" /><br/>
Select Video:<br />
<input type="file" name="video" id="videoSource" onchange="loadVid()"/><br />
Select Thumbnail:<br />
<input type="file" name="thumbnail" id="thumbnailSource"/><br></br>
<input type="submit" value="Upload"/>
</form>
<p id="test"></p>
<button id="snap" onclick="snap()">Create Thumbnail</button>
<button id="tried" onclick="tryit()">Try it</button><br />
<div class="thumbss">
<video autoplay controls>
<source src="" id="sourceOfVideo" type="video/mp4">
</video>
</div>
<div class="thumbs">
<canvas id="mycanvas"></canvas><br />
</div>
</div>
</body>
</html>

Related Links

How to sort array keys by other array keys? [duplicate]
Laravel4 memory consumption concerns
PDO: Can't connect to mysql when host is set in variable
CSS #import not working with PHP
Wordpress: Display all pages
Insert values from function php in database mysql
WooCommerce coupon code per line item
Datetime ISO 8601
Website design using html and php(no javascript/jquery/ajax) [closed]
Getting no response on Zoho API CRM
Get summed value from specific rows
how to use $_FILES[] with slim
Set Background Image from Custom Meta in WordPress
Email Sending error mail() function
Read cookie from parent directory
Google ping failing - cURL

Categories

HOME
plesk
list
verification
vagrant
swi-prolog
loopbackjs
plpgsql
embedded-resource
elisp
phpseclib
anchor
yahoo
lc3
cqrs
createjs
gravity
bazaar
clr
adminlte
workday
xdebug
npoi
boolean-logic
javax.persistence
social-networking
guice
xenapp
wampsharp
devtools
directfb
cmis
dreamfactory
fastlane
cartopy
hidden-markov-models
tidal-scheduler
task-parallel-library
opal-framework
optionaldataexception
nuclio
kitura
windows-media-player
nothing
password-hash
jgrapht
solr-query-syntax
sonatype
htmlspecialchars
scala-collections
connect-direct
haraka
thread-exceptions
data-management
bilinear-interpolation
right-to-left
powerpoint-2013
gulp-uglify
grinder
servicestack-bsd
unhandled
uitest
mgwt
pass-by-value
visual-c++-2012
prism.js
oxygene
django-settings
discovery
unrealscript
postgres-xc
spark-view-engine
android-dialog
firebird1.5
navigationcontroller
yuidoc
dynamic-c
getopts
android-2.1-eclair
jdownloader
pinax
rational-unified-process
ppc
powergui
jboss-mdb
objectinstantiation
rootkit

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App