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.
Related
We are having a real time data upload application, that reads continuous streaming file. We developed this logic 2 year before.
In chrome 81, real time file upload stopped working because file BLOB read by chrome is not getting updated (If file data changed), it still shows old Blob. Whatever new data adding in file not showing. Further I see, all File API properties showing old data e.g. File.lastModifiedDate, File.Size.
In previous versions of chrome, all these properties got updated when file content got changed.
Uploaded file details. File grown upto 1000KB, FILE API still shows old details with size 49.2KB.
I believe this is a new bug in Chrome 81 has to be addressed. Please advice if their is an alternative.
Unfortunately this new behavior is working as intended. File objects on the web always were supposed to be immutable snapshots. Chrome in the past unfortunately had a number of exceptions where this behavior wasn't implemented properly (largely because the implementation predates the specification), and those inconsistencies were fixed in M81.
In Chrome we're also experimenting with the Native File System API (https://web.dev/native-file-system/), which explicitly does intend to support the use case of being able to read from files even after they are modified, so that might be an alternative.
I think I have exhausted every avenue in trying to solve an issue whereby an HTML5 video won't play on my site. I have a simple demo page (below) to demonstrate where I am. I originally had a video in various formats for different browsers but for easier testing I am now just working with webm and testing in Chrome (Version 41.0.2272.89 (64-bit) on Mac OSX Yosemite). You will see the basic markup from the page above.
Demo 1 - .webm video hosted locally on the server - No video playing
I have tested the following:
Video file itself is accessible (cURL shows 200 response header)
Video file has correct MIME type (cURL shows video/webm set by .htaccess)
Video file has ok permission (644)
...so unless I am missing something obvious the markup is fine (for the browser I am testing) and the file itself is available and in the correct format.
OK, so the issue must be with the file itself then? Perhaps a codec issue or something, maybe something corrupted in the compression? Well, I don't think so...
The file came from an external source and if I embed it directly from the third-party's server it works fine. Check out this demo which is identical in markup other than the fact the video file is hosted externally:
Demo 2 - Same markup but video hosted elsewhere
Works fine for me!
So to confirm, the markup is the same in each case, the file when hosted externally loads fine, the exact same file when downloaded from the external source and uploaded to my server and referenced locally does not work.
I can only think that my testing here has ruled out issues with the video file itself and also with the HTML. It must be a server config issue with the parsing of the file surely? But, with the 200 response, the correct MIME type added via .htaccess and correct permissions I don't know what else to try.
Is everyone else seeing the same issue? What else should I be checking?
Thanks all!
For anyone else with HTML5 Video not displaying as expected check the following:
MIME types are supported
Rule out issues with the video file itself
Check your server for support of range request
In this case Apache 2.2.23 did not support an empty range request. The option is to update Apache to 2.2.27 as detailed in the following thread Range: bytes 0- FAILS in Apache 2.2.23
Thanks to Pablo Montilla for the guidance!
I think your problem lies in byte range support.
If you use curl:
curl "http://alkemist.partners/video-js/small.webm" -H "Range: bytes=0-"
You'll see the Empty reply from server response, but if you remove the Range header, your server returns the file correctly.
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.)
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
If an image file name does not reflect its correct file type(e.g stored with .pdf extension), is it safe to use it in HTML? Will the browser decide the correct type of the image? Will mobile browsers be able to deduce correct file type?
I have tested it with google chrome, it is working, but Is it guaranteed to run on all reasonable browsers?
UPDATE: I can't rename them to correct extensions, since they will be uploaded by users and then shown again.
Will mobile browsers be able to deduce correct file type?
Browsers don't usually deduce file types (there are exceptions, notably in IE—resulting in text files discussing HTML being treated as HTML and IIS servers sending text/plain content-types for HTML documents without their owners noticing—but they shouldn't be the primary concern).
Instead, browsers determine the type of data by examining the HTTP Content-Type Response header. By default, most servers will set this based on the file extension of the file they are reading from the filesystem to serve to the client.
You can override this, but doing so is fiddly and could cause problems if people save a file before opening it from their local file system (because it will have the wrong extension and their OS will associate it with the wrong application).