I have a page with a <source> for an HMTL5 video player; I need to obtain its file size.
Is it possible to check the size in MB of a video uploaded on the server from a <source>?
Does the HTML5 API provide some functions for this? Solutions with PHP or JavaScript are both fine.
While the best way to do this would be via a server side script that responds to (say) and Ajax request, reads the size of the file and responds (or depending on how the pages are being generated you could add it as a custom property to the element when you create the page the only way I can think of to answer your specific question would be to load the file itself via an ajax request and check the size of the respond - see Why don't all videos load on page in Chrome? for an example of how to do that
Related
I use html5 video tag to play video.
Then I use canvas element to draw video frame.
Video is from remote source.
There is no problem to draw frame. But there is problem to get image data from canvas. I want to get image data to make img element or to send data to server for creating image, but it is not possible, because operations with canvas are insecure.
When I use video from same domain, there is no problem.
Only one way, that i have found - is to make script on server, which get remote video and output it, and us this script like source for video element. But it is not very good idea, because it makes additional overload for server.
I am not sure that i have understood properly articles about using "cross-origin"? I think server, where remote video is located, has to send headers like: "Access-Control-Allow-Origin: *" , but if I don't have access to that server, for example I want to user youtube video, there is no ability to execute to do it?
The simple answer is, no, unfortunately.
It can't be done if you don't have access to the remote server to allow cross-origin use, or can ask the administrator of that site (which is very little likely to happen with a site like YouTube).
Generally, you can try to request cross-origin use by supplying the crossOrigin attribute:
<video ... crossOrigin="anonymous">...</video>
If it's allowed you will see data when you get the image data.
Solutions
One is to copy the video to your own server and stream it from there.
Two, use a proxy server or script as you already tried with your server.
And yes, both cases will impact traffic on your server (and there is a possible legal aspect to this regarding copyright etc.)
Sorry, no way around it.
I'm trying to make drag-n-drop functionality to load images on the site. Most of the tutorials show how to drag images from your local computers. But I need also to drag them from other pages from other hosts.
As I understand I need to first load image into blob and then using FileAPI upload it to my server.
I can't send just url to server instead of blob, because image can be on private site, and my server don't have an access to it.
Or maybe there is a way to build File object from <img> element?
This one example doesn't work because of cross origin ajax restrictions.
https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th/chapter-22/downloading-a-blob-with
Is it possible to blur a remote image using http://www.blurjs.com?
I have our images hosted on a remote CDN and we want to use blurjs to blur the image for a background effect. When we try and use blur js directly with the remote image javascript cannot read the file and throws a unable to read image data error.
The way i'm currently doing it is regenerating the image in php and then using blurjs, but it is very slow and consumes a lot of resources.
We've tried the css solution too with filters but the browers runs too slow when we do.
does anybody have a solution?
Your problem is that pixel access in canvas is not allowed for images loaded from a different domain than the one the page is hosted on. What you need is a proxy script that runs on your server which that allows your javascript to load images from other domains via your server. Of course the downside is that all traffic will also run through your server and that the time to retrieve the image will increase (since the image has first to be loaded to your server and then to the client) and there is unfortunately no way around that.
The good news is that this is a problem that Flash developers had to face many years ago already so it has been solved many times:
Here's for example a php script: http://www.abdulqabiz.com/blog/archives/2007/05/31/php-proxy-script-for-cross-domain-requests/
Here's a more recent implementation in Node.js http://codelikebozo.com/creating-an-image-proxy-server-in-nodejs
Context:
I setup a photo upload that uses an iframe to upload the image, then that has an optional jCrop step.
the client doesn't want to have to wait for the image to be uploaded. here's what the client said:
"You shouldn't have to wait for anything on the server end.
I don't care if the cropping happens on the server or client.
The interaction for cropping shouldn't wait on upload"
Is the client crazy, or is there some kind of way for me to have the image available for front-end manipulation instantly?
Edit:
TLDR: using a <input type="file"/>, if a user picks an image, can I immediately reference that local file somehow? would that show up as the input's value after change?
I can think of three technics to do a browser based image manipulation possible:
- java applet
- flash
- html5: file api (to read the image) and canvas (to show and manipulate it). But the browser support for the file api is not quite good as far as I know.
It seems to me if information is already being output to a user by a browser it ought to be accessible in the DOM in some manner via javascript. When you upload a file using a webkit browser (and possibly others) using the good old iframe trick the browser displays an upload percent in the status bar at the bottom of the browser window. It would be pretty amazing to be able to tap into that instead of needing to query the server for that same information. Has anyone ever tried to do so?
I have try something like this. If using old method with iframe for uploading files you can get upload information only if you have APC enable on server side (for php). With javascript the maximum that you can know is the start and the end of the upload (by using iframe onload event). So you can use an animated gif when file upload start and remove the animated gif when it ends (that causes the onload event of the iframe).
Then after upload iframe will contain any errors message of the upload status. You can do some more trick by returning file info as JSON when upload finish.