The title pretty say it all, a fully fonctional video.js player broke on safari for mac after moving the video on a distant media server. It works on chrome, firefox and IEs.
my first guess is a cross server issue, but it shoudln't work on others browsers if it was the case.
Related
This video spreading across Discord is very intriguing...
The same webm file behaves as follows in the following browsers:
Browser / Player
Message
Chrome
"Discord detected on Chromium/Electron"
Firefox
"Discord detected on Gecko (Firefox)"
VLC
"Discord detected on Gecko (Firefox)"
Media Player Classic
"Discord detected on Chromium/Electron"
Edge
"Discord detected on Chromium/Electron"
Safari
Play bar loads but only plays first frame of video.
Epiphany
Play bar loads but won't play at all.
Edge (Legacy)
Won't load/play
IE11
Won't load/play
Windows 10 Movies and TV
Won't load/play
I'm well aware that the "Discord" part of the message baked-in to the video, but what about the rest?
I had originally suspected that the .webm file was somehow switching to a streaming method and using server-side headers to influence the video content, but I tried in a VM in airplane mode and it still worked.
My second thought is that since .webm-capable browsers can be split up into two groups: Chromium-based and Gecko-based, that this video has multiple video sources embedded and is taking advantage of a very specific browser incompatibility, like a magic trick that forces you to select a card.
I am trying to use mediaRecorder API and make it run on maximum of browsers
video/webm;codecs=vp8,opus : that works fine on chrome and Firefox.. but not on Safari
video/mp4;codecs:h264 : works on Safari and Chrome.. but not on Firefox
It looks like Safari is now able to play webm.
What would be the mime type to use to make it run on both 3 browsers ?
I've been attempting the same thing and it is painful to say the least.
I'm able to use MediaRecorder to record video across Chrome, Firefox, Edge, and Safari. BUT the resulting videos do not playback on all browsers.
Safari - records in mp4 and mp4 will playback on all browsers
Chrome & Edge - I'm recording with mimeType: "video/webm;codecs=vp9", which will playback on Chrome, Firefox, and Edge, but not Safari.
Firefox - I'm using the default. It will playback on Chrome, Firefox, and Edge, but not Safari.
Supposedly Safari will playback webm with macOS Big Sur 11.3. I need to upgrade to test this.
Unfortunately webm is still not supported by iOS, so I'm looking into the Cloudconvert API to convert webm videos to mp4 before storing in S3.
Other suggestions welcome.
You'll need to use the MediaRecorder.isMediaTypeSupported API to find out what the browser you are using supports. See this open PR for details.
That does not help with playback however.
You've stumbled into an electropolitical food fight.
Sad to say, there's no commonality of codecs between browsers. You won't be able to find a common codec. Apple (Safari) is firmly in the H.264 / AAC world, the world of MP4.
Chrome, but not open-source Chromium, supports H.264 (which carries a patent burden). The fully open source Chromium browser does not. Firefox, via an automatically installed plugin from OpenH264.org, does, but it only supports H.264's constrained baseline version, not the fancier versions. Use MIME type video/webm; codecs="avc1.42E01F" and you'll be fine in Firefox and Chrome.
Microsoft new Edge supports the same stuff as Chrome.
WebRTC is rigged to allow endpoints to negotiate codecs with each other. In my opinion this is a kludgey way to patch this electropolitical squabble.
This is not a good situation. But it's Q1CY2021 reality.
as a simple answer that I found since it's not simply out there. Use a library like below to record in mp3. It's not supported by browser MediaRecorder natively, but libraries make it easy to encode to mp3
and then you have a blob or file that can be played in any browser and even mobile devices like ios
https://github.com/closeio/mic-recorder-to-mp3
I am displaying a video with the html5 video element. The source is a pre-signed url from Wasabi s3. It works well on Chrome but it won't play on Safari. I did some research and it seems like this is usually due to the server not being configured to return a 206 code. However, I did check the server and it seems to support byte-range requests.
Here is the network tab. Any help would be greatly appreciated.
Ok, it seems like I usually get stuck on those minuscule problems. Turns out that Safari, unlike Chrome, doesn't like to play files without file extension. Adding ".mp4" to my files solved the problem...
I have been playing with phantomJS for a while and I came across problems when using it in websites that use matchMedia queries to distinguish device types.
For a while I thought that was a phantom problem but it is happening with other headless browsers like slimerJS and Headless Chrome.
The problem is that matchMedia queries are not honouring the view port on HB.
As sample, the following steps reproduce the problem in these HB:
Setting a mobile view port(ex: 736x414).
Open https://josebrandao13.github.io/
Take a screenshot.
screenshot
Result is always: "I'm a tablet". Meaning that width and height are greater than 768px when they are not.
If you open this website on Chrome or Firefox dev tools and switch between phone and tablet devices, matchMedia behaves as expected. Also if I open it on my mobile phone chrome's everything is ok.
Is there any known problem with headless browsers and matchMedia ?
After a time struggling with this problem I found a way to emulate a mobile device with Headless Chrome, including match media queries.
For those interested:
https://github.com/josebrandao13/headlessChromeMatchMedia
I have a site with an embedded YouTube Flash (AS3) player, and it's no longer working in Safari.
Check out this fiddle, the code for which is merely:
<object type="application/x-shockwave-flash"
data="http://www.youtube.com/apiplayer">
</object>
In Chrome, Firefox, and IE, the request to http://www.youtube.com/apiplayer returns normally (200). In Safari, the server returns a 303 to https://youtube.googleapis.com/apiplayer.
This player loads, but I am unable to interact with it in JavaScript. I assume that's because it's served over https — though I am explicitly requesting http — resulting in a mixed-mode security issue. Here's error I see when trying to do anything with the player (this is with the full chromeless player embed code):
>>> player.playVideo()
Error: Error calling method on NPObject.
If I change Safari's user agent to something else, or even just mangle the word "Safari", then the correct player is loaded. I also have no trouble loading the Vimeo and Viddler players (http://vimeo.com/moogaloop.swf and http://www.viddler.com/player/key).
I see this both in the stable Safari release and in the WebKit nightly. It also occurs with my extensions disabled and in Private Browsing mode.
I tried working around it by embedding http://youtube.googleapis.com, hoping that there would be no redirect and I'd get the player over http. But it still redirects to https, and it does so in all browsers.
I filed this YouTube API ticket last week, but there's been no response so far.
Seems like there's a playback issue with Safari and YouTube. There're multiple solutions suggested at MacRumours http://forums.macrumors.com/showthread.php?t=1098606, like switching to 32 bit browser, use non-HTML5 version, etc.
One that seems to work is below:
Select Safari > Preference > Privacy > Details
Search for Youtube
Delete the cookie called youtube-nocookie.com then click Done.
Restart Safari and try again.
The YT API bug report has been answered, and there is a workaround: appending the version to the URL:
<object type="application/x-shockwave-flash"
data="http://www.youtube.com/apiplayer?version=3">
</object>
Apparently when the version is not specified, they fall back to the AS2 player for Safari only. I'm not sure why that would force the switch to https, but regardless, this works.