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

PHP's exec() command not accepting a valid variable for execution
How to join multiple tables in symfony
PHP Add dash to decode
Extend PDO prepare method to replace query prefix
Download files from AWS S3 to client system
htaccess rewriterule for query string
Android PHP JSON parsing giving 404 error but fetching data
session_start() creates new session every refresh, no warning
Why does date() not convert YYMMDDHHMM to MySQL acceptable date format correctly?
How can I use $POST in PHP to automatically collect data from HTML5 inputs and send through e-mail?
Warning: mysqli_query(): Couldn't fetch mysqli in my code
What is the best way to target older IE browsers with PHP?
Error on displaying the forum data
Laravel 5.1, using variable's name in view files
PDO Code Is not inserting data from Form into MySQL Database
wordpress custom is_front_page logic

Categories

HOME
cocoapods
livecode
ant
biztalk
visual-studio-2010
linker
google-search-console
tiff
stimulsoft
trace32
twisted
pywinauto
l20n
scala-ide
jaspersoft-studio
multiple-tables
altium-designer
fluent-migrator
vuforia
ratio
macromedia
iwebbrowser2
docx4j
autodesk-model-derivative
rspec-rails
gsp
xmlunit
custom-keyboard
adminer
dreamfactory
xerces-c
pdfminer
bluemixtools
assert
oauth2
plane
uipickerview
newtons-method
fluid-mac-app-engine
zend-form
xcode8.2
linq-to-excel
md5-file
openstack-glance
sequence-diagram
http-basic-authentication
xmlbeans
system.web.optimization
livecycle
p6spy
right-to-left
fdt
polymerfire
mnesia
boost-proto
variable-length-array
google-maps-api-2
dsa
enaml
hmisc
sequence-sql
karma-coverage
ipod
scala-swing
mutators
maven-shade-plugin
symja
wicket-1.5
xhprof
angular-ui-select
windows-messages
forceclose
vlab
acceptance-testing
statechart
ui-design
tfs-sdk
office-app
multiscaleimage
cgrectmake
daap
zend-pdf
audiotoolbox
word-frequency
system-information
flymake
affinetransform
dynamic-c
qtextbrowser
nsrangeexception
photo-management
rational-unified-process
database-cloning
rakudo
motif
objectinstantiation
activex-exe
parentid

Resources

Database Users
RDBMS discuss
Database Dev&Adm
javascript
java
csharp
php
android
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App