Prevent Safari from auto-adding ',video' - node.js

Using the server-side Node code from here, but for src="data:..." I use fileSystem.readFile(). For troubleshooting/testing, can also use the video in the link on that post. It doesn't actually matter what file I use; none work.
I recently started experimenting with HTML5 video. Everything works correctly on Chrome and Firefox, but Safari has been broken for a few days and I couldn't figure out why until I took some time to look closely at the tags.
I'm using this to stream content into the page in chunks:
<video width="800" height="600" autoplay controls>
<source src="/file.mp4" type="video/mp4;base64">
Not supported.
</video>
It wasn't until I tried this:
<video width="800" height="600" autoplay controls>
<source src="data:video/mp4;base64,(Data)">
</video>
That I noticed the problem. After all, how can you go wrong when embedding the entire file?
As it turns out, Safari automatically turns the second one into this:
<video width="800" height="600" autoplay controls>
<source src="data:video/mp4,video;base64,(Data)">
</video>
I decided to drop the video from my folder into Safari to see the markup it created, and I found something curious: src was in the <video> tag instead of in its own source tag.
For kicks I changed the src tag in the video tag to match the <source> tag and the issue persisted, but instead of a blank white box, it was a black box with a Play button with a diagonal line through it. This suggests that for some reason, Safari doesn't pay attention to <source> tags, while other browsers do.
This was a more concerning issue when I discovered even if the src of the <video> is broken (By having a broken src="data:..."), it still won't check to see if there's a compatible <source>. What's really interesting is that it was paying attention to <source> a few days ago.
Since the <video>'s src had the same issue (,video), I removed the ,video by editing in the dev console and it worked exactly as it should. I attempted to put data:base64;video/mp4, but the issue persisted.
A few other things I tried included removing video/mp4;base64, from the tag entirely, which broke it on all browsers. I put video/mp4;base64 into the type parameter both in the <video> and <source> tags, and it seems those are ignored when the src is data:.
Eventually I tried an image, since those are much shorter load times, and found the same issue: Safari automatically adds ,image to embedded images.
Linked images (<img src="/file.png">) work fine with type="image/png;base64" -- and don't add ,image, while linked videos (<video src="/file.mp4">) doesn't work (And adds ,video).
I thought perhaps this could have something to do with my system not taking byte range into account yet (Per this post)... though this same video, streamed with the exact same code, worked flawlessly the first day I tried it (Call it a week ago).
To make sure I wasn't just missing something, I re-enabled the old snippet (Had a backup) just to see if it'd work that way. No dice.
Although removing ,video and ,image manually works for data: sources, it doesn't work for file sources, as even editing it manually won't cause Safari to re-request the file (When you manually edit data:, you can visibly see it reload the player).
For kicks I tried a couple other thoughts: type="video,mp4" and mp4,video, and the equivalent for src="data:...", all of which also work fine on other browsers, but fail (With an added ,video to the end) on Safari.
For a brief recap:
Video, whether src="file" or src="data:..." becomes broken by Safari's automatic addition of ,video in either src="data:..." or src="file" type="...".
Images break if src="data:..." but not if src="file".
Manual removal of ,image or ,video from a src="data:..." works.
Manual removal of ,video from a src="file" doesn't work.
Video and image both worked fine ~ a week ago with the same (And similar) code.
Video and image currently work on Chrome and Firefox.
Anyone aware of what could cause ,image and ,video to show up, and/or how to prevent it?
Not looking for an external module to work around the problem. Wondering what's causing it and how to prevent it.

Related

Audio question - loading multiple files silently and using faders

Weird question, I apologise in advance.
I'm using Twine 1.4.2 to create music lessons for students. (Remote learning and Covid. It's such a drag.) https://twinery.org/
I jiggered the music macros from here, https://www.glorioustrainwrecks.com/node/5061, to make the 'loopsound' macro into a thing where I could loop multiple .oggs on passages at 0 volume. Then I could use 'fadeinsound' and 'fadeoutsound' like faders on a mixer - so a passage could fade a stem in, or out. The tracks all looped simultaneously, so it was like one big piece of music, with stems being faded in or out - when you went to the next web page.
This worked for several years - on almost all browsers. It's broken recently. Not sure why. Something to do with how audio files are loaded and browsers changing up their conventions? This Twine code has preload written into it.
Anyway. I was thinking of trying to do rewrite myself, with the audio element. I do not have the chops.
This is where I'm at. So, on the first passage (like a web page), I've got ...
<audio preload>
<source src="c1.ogg" type="audio/ogg">
<source src="c2.ogg" type="audio/ogg">
<source src="c3.ogg" type="audio/ogg">
</audio>`<audio preload>
<audio preload>
<source src="f1.ogg" type="audio/ogg">
<source src="f2.ogg" type="audio/ogg">
<source src="f3.ogg" type="audio/ogg">
</audio>
The 3 cs are supposed to loop in line. And the 3 fs.
On the next passage I have ...
<audio loop autoplay id="c1">
<source src="c1.ogg" type="audio/ogg"></audio>
<audio loop autoplay id="c1">
<source src="c2.ogg" type="audio/ogg"></audio>
<audio loop autoplay id="c1">
<source src="c3.ogg" type="audio/ogg"></audio>
This works. All of these play in line. (Like, not out of time with each other.)
So ...
How do I get them to all loop at zero volume?
How would I then get them to fade in or out at current time - on a new page? (Like, without restarting the track.)
Any help appreciated! Hopefully that made sense. It's a weird, niche project, really.
Thanks!
Meg
Fixed it.
Sort of. In case anyone comes looking for anything this weird in the future.
Couldn't use the audio element at all because each passage is a separate page. Had to rearrange the order of the macros within Twine. I know what I did, but I have no idea how to explain it.
If someone really does come looking for this in the future (probably one of my students - hello), post and I'll try to explain.
PS. Full credit to L for the macro code. I just messed with it. (I just made the loops play at 0 volume and not restart after fadeout. https://www.glorioustrainwrecks.com/node/5061

Fontastic.me not working on mobile

Fontastic.me is a website that let you upload svg files so you can use your icons as a font. I've used this site lots of times, but today I noticed the icons are not working on mobile anymore. They do work in the browsers on computer. I only noticed it today, it has always worked before.
You can use this link to test on mobile.
To me it seems like a bug in the Fontastic CSS generator: your page links CSS
https://fontastic.s3.amazonaws.com/8pMGtiqubDqmpbD4ER7hE3/icons.css
this contains last SVG fallback linked as
https://cdn.myfontastic.com/8pMGtiqubDqmpbD4ER7hE3/fonts/1446830181.svg#1446830181
the hash part of the URL must correspond with font ID in the SVG, but actual source contains <font id="cloud-font" horiz-adv-x="512"> instead.
So replacing #14468301 with #cloud-font in CSS or replacing #id value in SVG should fix your problem.
This applies only for case your mobile really resorts to SVG version. Only few browsers would do that (I think Android below 4.4, maybe old Safari, Blackberry, and maybe Opera Mobile).
(Besides that, your HTML contains extra HEAD tag with icon CSS link in BODY, what is not valid. I donʼt think this will make any sane browser completely ignore the link, but cannot exclude such possibility. If you have served your page as real application/xhtml+xml, browser should show the error right away.)
Greg, i had the same issue. I end up ditching Fontastic and use https://glyphter.com/ instead.
Glyphter creates your own font set by uploading each character at a time.
It worked for me and perhaps you can try this too and see if it works.

mp3 audio works in all browsers but not IE9

I have three mp3 audio files that play fine in all browsers but play for only 1.x seconds in IE9 unless I change "controls" to "autoplay" in which case it plays just fine.
I was then sent the original, unedited file in .wav format. I encoded it myself to mp3 but have the same problem.
However, if I create my own mp3 audio file and insert it into the same markup, it works in all browsers, including IE9 with the "controls" attribute.
I can only think there is something about the settings in the original audio file that would cause the issue but don't have a clue what that could be.
Here is the test markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<audio src="poem.mp3" controls >
</body>
</html>
EDIT:
I put three audio files on the page. Sometimes one or two will play all the way through while the third won't play at all. Other times, two will play for a second but the third does nothing.
In case anyone is still dealing with this issue, I use the standard <audio> markup for mp3.
<audio controls="controls" preload="auto">
<source src="http://www.davehullthehullabalooer.com/help(5).mp4" type="audio/mp4"/>
<source src="http://www.davehullthehullabalooer.com/help.ogv" type="audio/ogv"/>
<source src="http://www.davehullthehullabalooer.com/help.webm" type="audio/webm"/>
<source src="http://davehullthehullabalooer.com/add-for-beatles-page-188.mp3" type="audio/mp3"/>
</audio>
In IE9: Internet options > Advanced Tab > Multimedia, I select "Play sounds in webpage"
All good!
EDIT: My fix didn't work. It still fails in IE9 but everything works still in every other browser.
An answer to my own question that solves the problem, at least, but I have not found out why.
I don't know why some mp3 files play just fine in IE9 but others, that also work well in any modern browser, won't play in IE9 using the markup I show above. I made audio play by adding the audio attribute preload="auto" and all is fine now in IE9.
Modern browsers do not need this. Why IE9 does, I do not know yet.
I was having trouble with audio controls showing on IE9 and found that IE9 struggles with the preload attribute. I didn't want the browser to preload all the files by setting them all to 'auto' but found that setting the preload setting to 'metadata' instead of 'none' did the trick. Could be an alternative solution.
http://helephant.com/2011/12/29/the-html5-audio-tag/ : "Metadata suggest that the browser just download enough of the file to find out things like dimensions, running length and size."
Ran into the same problem, audio files would only play first second when preload is set to metadata on IE9.
Turns out that my API was gzip compressing all responses and IE9 was having trouble dealing with it. After removing gzip/deflate compression from audio and video files, IE9 was fine with it.

SVG with external images doesn't load them when embedded with <img> tag in browsers

I made the following observation:
If I create an svg image that references an external raster image via xlink:href and try to load the svg in browsers, the external images are only shown if I use the <object> tag, but not when using the <img> tag.
Rendering with the <object> tag is quite slow and not as clean as using the img tag for images so I was wondering if there's a way to make it work through the <img> tag.
At first I thought it doesn't work because of a same origin policy, but even if the referenced image is in the same directory and I reference it through its name only, it wont load.
Any ideas?
Are you using IE? IE doesnt recognize SVG anyway. Microsoft is always ten years behind, yet they are more popular and far more costly, for some reason. Name brand propaganda?
SVG loads in Firefox. Both as an XML document referenced directly in the URL, and also if you embed it into an XHTML (fully XML compliant) document with proper namespacing, the SVG should render properly. The great thing about this option is that DHTML can manipulate your SVG. Everything I said in this paragraph also applies to MathML, if youre curious.
Aside from that, SVG doesn't load from an image tag. I do believe Firefox is working on this upgrade, though. Im not entirely sure.
Using the object or embed tag is reasonable, I suppose... but one of my earlier fixes was to use an iframe. Embed an iframe in your html that references the complete SVG file. Using CSS you can make the iframe look flush with the rest of your document, appearing and acting like an image. Encased in a div or span tag, you can have onhover and onclick event handlers.
Using the image tag, your src can be a PHP file on server side. If properly coded and with the appropriate cgi apps, you can rasterize your SVG on server-side, and have that PNG data sent back to your image via the PHP src.
There's no particular reason <object> should be any slower to load than <img> apart from possibly the interaction aspect (img's are static while object's are fully interactive documents). The images inside the svg should load in both scenarios, so it sounds like a bug in the browser.
Could you post a link to your example?
I think you are at least 10 months behind...IE9 supports SVG, and pre-release versions (including a beta) have been out for quite a while. Check out www.ietestdrive.com to grab the platform preview - it's pretty good. In my opinion, parts of their SVG support are much better than Firefox currently (but they don't support SMIL yet).

Best way to play wav files in the browser?

I have no choice but to play wav files directly in the browser (serverside encoding to mp3 isn't an option, unfortunately.)
What's the best way to do this? I'd really like to take advantage of the HTML 5 audio tag but my target audience includes many, many teens using IE6. As far as I'm aware flash isn't an option, but speedy playback really is critical.
Thanks.
Nowadays, the best way is probably just to use the HTML5 <audio> tag. In the past, you might have done it like this:
Background:
<embed src="bgsound.wav" hidden="true" autostart="true" loop="1">
On Click:
Play Sound
It's been a few years since the last answer. Embed tag was good but I had an issue trying to trigger it to play in JavaScript. New audio tag works well is most browsers.
<audio src="cat9.wav" preload></audio>
You can trigger it manually with audioElement.play()
<audio controls="controls"><source src="http://blablabla.com/hghghgh/my%20file.wav" type="audio/x-wav" /></audio>
Due to unfixed bug (issue from 2012 year?) sometimes Chromium-like browsers cannot play .wav from redirected URLs because they "think" that file size is zero. But .mp3 is OK.
Opera 12.14 and Firefox play from < audio >
tag normally in the same case (redirected URL).
I tried JPlayer's 2.9.* lib in Drupal 7 with 3 players, but not successful (was black inactive rectangle 300*14 pixels for each player).

Resources