I have a simple flash activity that loads its text from an external file called QA.txt using the URLLoader function. I wanted to convert this file to html5 using Google Swiffy, which I have done, expect it doesn't seem to be loading the QA.txt file anymore. I believe it says this functionality is supported on their main website, so I'm wondering why it might not be working.
Any help would be greatly appreciated!
Swiffy does indeed support URLLoader!
I think your problem is this: if you open up your converted html file in your browser and also open up the developer tools console (try hitting F12), you should see an error message along the lines of:
XMLHttpRequest cannot load .../...myText.txt. Cross origin requests are only supported for HTTP.
Because you've open up the converted html page by itself, your browser isn't letting the code in that page fetch any other files, because they aren't being treated as coming from the same origin (even though they might well be sitting in the same directory) due to the same origin policy.
To get around this, you should access the swiffy html by fetching it through a local web server, something like apache (php) or node (javascript).
(It should also be working normally if you upload it onto the internet.)
Related
I'm trying to take my entire website offline via the HTML5 FileSystem api. So far, I have has no problems, except for the Roboto.woff2 font that I have gotten from Google's website. Basically I have a blob that writes to a file in persistent storage. However, whenever I try to load the actual page, the console says: Failed to decode downloaded font: filesystem:http://localhost/persistent/fonts/roboto.woff2
1 OTS parsing error: Size of decompressed WOFF 2.0 is set to 0.
When I view the actual file in filesystem:http://localhost/persistent/fonts/, the file size is different as well. I suspect that it has to do with text/plain type. I've tried using application/x-font-woff, application/x-font-woff2, font/woff2, etc, but nothing has worked thus far. Any help would be appreciated!
So here's what I ended out doing. There are 2 ways.
Use charset=x-user-defined when opening the XMLHttpRequest
Use xhr2 (XMLHttpRequest with advanced features) and save as a blob. Here's a helpful link: xhr2
Option 2 works on all browsers except Opera Mini.
Every time I try to view a video file on my server I get this error on iOS in Safari, Chrome.
I am using a blob server and then an Apache server so I am not sure what the problem is. However, when I only use Apache, I do get this error but then I have the video rendering too.
However when I render this using my server this is not working. Does anyone know why this is? The videos work fine on other devices and in browsers also works fine if accessed through Apache only.
The solution to this problem was just a work around. The reason being the that blob servers aren't streaming servers. iOS devices expect the videos to arrive in small chunks. So for instance a streaming server is able to do this. However, a blob server just hands the video as a blob which is not what the iOS device expects. Some browsers are smart enough to handle this but others not.
The way I solved this was to add the video files outside of the blob server in a folder within the project and then render this through the Apache server instead of serving it via the actual blob server we were using. I hope this helps.
I was also getting this error for some mp4 videos. Turns out it wasn't a server issue for me it was a video encoding issue.
Issue
A "moov atom" needs to be placed at the front of the video file. It serves as a table-of-contents for the video. That "moov atom" has to be read first for html streaming or it won't play on some devices.
The Fix
To fix, I used handbrake to transcode my video. Turn on 'web optimize' Also turning on zerolatency and 'fast decode' may help (found in the video tab).
We were getting a similar error here. I thought it may have been the streaming issue since our video was hosted in blob storage on Azure. After setting up a Media Service for streaming, the video still didn't work. It turns out, the cause of the bug for us was Safari using a Service Worker. Below is some further explanation of what we found:
Safari first sends a byte range request for a Video tag that expects a 206 response. However, if you use a Service worker, the response returns with a 200 and it appears Safari doesn't know how to handle this. Our solution was to exclude using a Service Worker for Safari.
We found this by using the network tab of the Safari debugger on a Macbook to troubleshoot the issue we were seeing on the iPad. Attached is a screenshot for comparison/reference. The left tab shows what the call should look like by default. The right tab shows what you would see if using a Service Worker.
Add the following line of code to your .htaccess (located in the root of your WordPress installation):
SetEnvIfNoCase Request_URI .(?:mp4)$ no-gzip dont-vary
The following screenshot is the new complete .htaccess
Reference: https://clickshepherd.com/blog/solved-elegant-themes-divi-and-cloudflare-mp4-media-error-formats-not-supported-or-sources-not-found/
In our case, we created a URL pattern for our blob assets and then set headers in that URL pattern definition page which sent back a mime type of 'video/mp4'. This should instruct the browser to treat the binary stream as chunked, which in turn meant we didn't need to download the whole thing before it started playing.
Google Cloud Platform Solution
This issue caused me a lot of headache, so I just wanted to add my specific solution here, if anyone else encounters this while deploying to Google Cloud Platform.
When trying to load MP4 videos in Safari, I was getting the same error:
"Failed to Load Resource, Plugin Handled Load"
Which was preventing the videos from playing.
Still, I wanted to try to keep everything inside Google Cloud, so I created a Storage Bucket for the site, and added the videos there.
Of course, trying to retrieve the videos from the storage URL from the main site resulted in a CORS error.
Fortunately, you can configure CORS pretty easily on storage buckets:
Configuring cross-origin resource sharing (CORS)
Once that configuration was deployed, I was able to retrieve and load the videos on the site in Safari without the "plugin handled load" error.
I saw the error "Failed to Load Resource" and though that this is reason, why my videos are not playing.
Turned out, my videos were missing the hvc1 tag. And when I added it - they're playing fine.
In my case issue was with H256 HEVC videos, but in your case some other encoding / tagging issues can be the reason.
In my case, issue was fixed with ffmpeg:
ffmpeg -i input.mp4 -tag:v hvc1 -acodec copy -c:v copy -movflags faststart out.mp4
Well, using HTML5 file handlining api we can read files with the collaboration of inpty type file. What about ready files with pat like
/images/myimage.png
etc??
Any kind of help is appreciated
Yes, if it is chrome! Play with the filesytem you will be able to do that.
The simple answer is; no. When your HTML/CSS/images/JavaScript is downloaded to the client's end you are breaking loose of the server.
Simplistic Flowchart
User requests URL in Browser (for example; www.mydomain.com/index.html)
Server reads and fetches the required file (www.mydomain.com/index.html)
index.html and it's linked resources will be downloaded to the user's browser
The user's Browser will render the HTML page
The user's Browser will only fetch the files that came with the request (images/someimages.png and stuff like scripts/jquery.js)
Explanation
The problem you are facing here is that when HTML is being rendered locally it has no link with the server anymore, thus requesting what /images/ contains file-wise is not logically comparable as it resides on the server.
Work-around
What you can do, but this will neglect the reason of the question, is to make a server-side script in JSP/PHP/ASP/etc. This script will then traverse through the directory you want. In PHP you can do this by using opendir() (http://php.net/opendir).
With a XHR/AJAX call you could request the PHP page to return the directory listing. Easiest way to do this is by using jQuery's $.post() function in combination with JSON.
Caution!
You need to keep in mind that if you use the work-around you will store a link to be visible for everyone to see what's in your online directory you request (for example http://www.mydomain.com/my_image_dirlist.php would then return a stringified list of everything (or less based on certain rules in the server-side script) inside http://www.mydomain.com/images/.
Notes
http://www.html5rocks.com/en/tutorials/file/filesystem/ (seems to work only in Chrome, but would still not be exactly what you want)
If you don't need all files from a folder, but only those files that have been downloaded to your browser's cache in the URL request; you could try to search online for accessing browser cache (downloaded files) of the currently loaded page. Or make something like a DOM-walker and CSS reader (regex?) to see where all file-relations are.
Basically, I'm creating a webpage filled with images of movie posters that link to video files, as a means of making a more visually-appealing form of my local video library.
I'm using
<a href="C:\blah\movie.mkv"><img src="poster.jpg">
It works exactly how I want, HOWEVER, it opens the file in the browser rather than opening it in its default program, as I would like. I would like each link to open the file in the program titled "VLC Media Player", as specified in Windows for each of their filetypes.
Let me know how I can do this (in the simplest form--I'm not too smart :P)
Thanks!
If you are creating web pages on your local system for you own use then you may want to consider looking in to a WAMP server setup. This uses php and should allow you to call VLC using the exec command. Would take some learning however.
There is very little you can do to control how a client will handle a resource.
You can use the Content-Disposition HTTP response header to state that the resource is an attachment (and thus recommend that it be downloaded instead of opened).
Content-Disposition: attachment;filename="movie.mkv"
You can't, however, stop browser native support or a plug-in from handling something instead of having it open in a separate application (let alone cause it to be opened in a specific application).
If the browser is configured to open video files internally, then nothing the author of a website can do will make it switch to using a application instead.
we have a small flash component on our website/application to upload multiple files.
This works fine, however we want to get the Content-Type from the headers and its always set to 'application/octet-stream'. From what I've learned this is due to a security of flash sandbox and FileUpLoad will never give this to us.
Is there any other way we could do this in flash (aside from creating an html/ajax multi file upload)?
many thanks
We have had a simlar problem when uploading from a browser. What is sent in the content type is dependent upon the browser and what is installed on the client machine. If it is an extension that the client machine does not recognise it will come back as application/octet-stream.
What we ended up doing was creating mapping functionality from the file extension to the content type. That way we could ensure consistency.