I recently noticed that YouTube videos look pixelated on MacBook M1 on Chrome, FireFox, & Brave.
I have disabled Hardware-Acceleration on these browsers but still have the same issue.
Safari & Edge Chromium renders the video perfectly and there is no pixelation on any of the videos I tested.
Resolution: 1080p
Tested Video: Dolby Atmos trailer
Video Link: https://www.youtube.com/watch?v=pd_6WN9GVtQ
On Chrome / FireFox / Brave
On Safari
Found out an issue regarding the Blurry visuals in YouTube. Chrome/FireFox/Brave uses AV1 video codec to render videos whereas Safari uses VP09 which renders it perfectly. I had to change the Video playback settings in youtube to render it in VP09 as Safari does it by default.
You can also use a helper chrome plugin to mitigate this issue:
Chrome: https://chrome.google.com/webstore/detail/enhanced-h264ify/omkfmpieigblcllmkgbflkikinpkodlk?hl=en
FireFox: https://addons.mozilla.org/en-US/firefox/addon/enhanced-h264ify/
Related
I've embedded webm and mp4 format video on html page using video tag, It's working well on all devices on all browsers except ipad and Mac Pro. What video formats are supported by ipad and Mac Pro?
If you talk about the video support of the HTML5 video tag, it depends of your browser and your device (Desktop/Mobile).
See the table of video support
I found this mp4 from the site Giphy. To my surprise it plays in Firefox. Does anyone know how that can be? Normally I have to generate two versions of every video file, mp4 and webm. It would be nice to not have to do that.
Here's the file:
http://media2.giphy.com/media/yoJC2NG0MLnSoEPjIA/giphy.mp4
Firefox will use an mp4 library is a suitable one is on the system that Firefox is running on:
Firefox/Firefox for Android/Firefox OS supports the format in some cases, but only when a third-party decoder is available, and the device hardware can handle the profile used to encode the MP4.
source
If you can use HTML5 I'd suggest the video tag like the following. I figured you'd want controls so I added the controls attribute to the video tag; you could also add autoplay if you want that. I tested it on IE11 and the current versions of Firefox and Chrome. works for all of those. Having alternate versions isn't a bad idea, but mp4 is pretty universal on modern browsers.
<video controls>
<source src="http://media2.giphy.com/media/yoJC2NG0MLnSoEPjIA/giphy.mp4" type="video/mp4">
<source src="http://media2.giphy.com/media/yoJC2NG0MLnSoEPjIA/giphy.webm" type="video/ogg">
Your browser does not support the video tag.
</video>
As to why:
MP4 H.264 (AAC or MP3) The MP4 container format with the H.264 video
codec and the AAC audio codec is natively supported by desktop/mobile
Internet Explorer, Safari and Chrome, but Chromium and Opera do not
support the format. IE and Chrome also support the MP3 audio codec in
the MP4 container, but Safari does not. Firefox/Firefox for
Android/Firefox OS supports the format in some cases, but only when a
third-party decoder is available, and the device hardware can handle
the profile used to encode the MP4.
Note: MP4s encoded with a high profile will not run on lower end
hardware, such as low end Firefox OS phones. The MPEG media formats
are covered by patents, which are not freely licensed. All the
necessary licenses can be bought from MPEG LA. Since H.264 is
currently not a royalty free format, it is unfit for the open web
platform, according to Mozilla [1, 2], Google [1, 2] and Opera.
However, since royalty free formats are not supported by Internet
Explorer and Safari, Mozilla has decided to support the format anyway,
and Google never fulfilled their promise to remove support for it in
Chrome.
Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
Google Chrome screen flicker (frame drop) while playing a video with Windows 8. The video is fully streamed. Same video runs fine with Firefox and same with IE it only happens with Chrome.
Do anyone have any idea what would be causing this?
I am having a very frustrating issue with HTMl5 video and safari/mac.
I am using html5 video throughout the site where needed and it works/plays on every browsers bar safari on a mac (its fine on safari windows and chrome mac for example)
The videos dont stream and only play once the entire file is downloaded. At first I thought it may be to do with the index of the file being at the end and not the beginning (link html5 video = safari wants to download it all) so i tried qtindexswapper but when loading the MP4 into the program it said the MOOV/Index was in the correct position.
Anyone have any idea why safari mac has this issue?
A.
I've seen HTML5 be very picky with videos. They may play fine in a player, but not play or maybe play with no audio once embedded. This is usually due to a video not properly created/formatted. In most cases, re-creating the file in a professional level program alleviates the issue.
I got this audio link in my html5 document:
<audio
src="http://sverigesradio.se/topsy/ljudfil/3017771.m4a"
type="audio/mp4"
controls="true"
preload="metadata"
title="Senaste sändningen från Radiosporten">
Senaste sändningen från Radiosporten</audio>
It renders properly in chrome, but in FF4 it first flashes the controls normally and then I get a big "X". In safari, it seems to hang while reading metadata.
Is there a problem with my audio-tag or with the audio-file? Is the redirect a problem?
Firefox doesn't support MP4 audio, it supports OGG audio only.
See this page for Audio support:
http://html5doctor.com/native-audio-in-the-browser/
UPDATE: concerning m4a format (which is AAC as far as I know), Safari and Chrome should support it, maybe even IE9, but no others.
You might find some useful info here (talks about video, but video also needs audio codecs): http://diveintohtml5.ep.io/video.html
UPDATE 2: And a more up-to-date table posted by Tom Gullen.
Firefox doesn't support mp4, but you can use PCM audio standard like .WAV that supports firefox, safari & chrome.