I'm trying to use picture tag in Firefox. caniuse.com says that picture supported in Firefox 33 (beta) and I can enable support in Firefox 32 (current) manually.
I opened an example from html5rocks and I can see that it doesn't work. Also I tried on my own http://vm-0.krasulya.kd.io/. There are requests only to basic image (src attribute) in webinspector network panel.
Both examples work in Chrome Canary.
According to http://www.whatwg.org/specs/web-apps/current-work/multipage/edits.html#the-picture-element HTML is correct.
Does FF support picture at all?
UPD
Here is my markup:
<picture>
<source
src="1.jpg"
type="image/jpeg"
media="(min-width: 300px)"
srcset="1.jpg, 2.jpg 2x"/>
<img
src="1.jpg"
srcset="1.jpg, 2.jpg 2x">
</picture>
Suddenly scrset attribute is still disabled by default in Firefox (even Nightly, see bug #870021). To enable it, go to about:config and set dom.image.srcset.enabled value to true.
Here’s the page to test it: http://pepelsbey.net/pres/picture/demos/retina.html
There’s also layout.css.devPixelsPerPx flag which could be set to 2.0 to test retina on non-retina device.
Related
I have two images in my html page that are of webp file type.
<img src="./assets/beros-capak.webp" class="article-image" />
<img src="./assets/mapa.webp" class="article-image" />
But, as you can see in the image above, the first webp image is not loaded and the other is loading fine.
I have tested it on chrome, firefox and safari on iphone, and they are all not loading the first image, while both on android and mac pc load both images with no errors.
Why is that?
It depends on the version of iOS.
All browsers on iOS use WebKit so they are all subject to the same compatibility issues as Safari.
According to https://caniuse.com/webp, WebP is supported on iOS 14 and up.
On the page there is a HTML tag Video, which broadcasts the video from the interlocutor (WebRTС).
<div id="remoteVideoContainer">
<video id="remotevideo" autoplay="autoplay" controls="" loop="loop" preload="true"
height="500" width="100%">
</video>
</div>
And css related to this part:
video {
display: inline-block;
vertical-align: baseline;
}
After upgrading Chrome to version 67.0.3396.87, I had a very strange bug - a black box (or two) whose size is depending on the size of the window (for some sizes it disappears). There is also a hole in full screen mode. What could be the problem?
Here is inline mode:
And here is full screen:
In earlier versions of Chrome there was no such problem. It also does not exist in other browsers.
Try to create video element not from HTML but from JS. For example:
var el = document.createElement('video');
el.setAttribute('controls', 'true');
....
I think its helps.
This is interesting, on the latest chrome canary build and can't replicate this issue. The only solution you have is to wait for the next chrome update. The problem isn't in your code, it's on the browser that I can guarantee is fixed in the upcoming update.
Like Sethu says, it seems to be chrome, not your code.
Is there a chrome beta build you could try which might have a fix by now?
If not maybe you could roll back to the previous chrome version.
I'm looking at this page for reference
The code I'm trying to get to work looks like this
<figure>
<picture>
<source srcset="images/specto1#1x.png 1x, images/specto1#2x.png 2x">
<source srcset="images/specto1.png">
<img src="images/specto1-old.png" alt"Spectrogram of hiss event at the South Pole">
</picture>
<figcaption>Spectrogram of hiss event at the South Pole</figcaption>
</figure>
The demo for loading different images using scrset does not seem to work with safari 9 however it works fine in chrome. I was under the impression that safari and iOS has now implemented scrset attribute since safari 9 and iOS safari 8.
At the moment safari 9 is loading specto1-old.png while chrome is loading specter1#1.png
Can someone explain why the demo works in chrome but not safari?
EDIT: Idk How i butchered the tittle so badly. "Is safari not correctly displaying images using the srcset and pictures tag?"
srcset on img should work in Safari but picture doesn't work yet (only in beta at the moment).
I'm using the HTML5 video tag to play a short video on my website with this code:
<video width="100%" poster="/images/video_preview.jpg">
<source src="/images/movie.mp4" type="video/mp4">
<source src="/images/movie.webm" type="video/webm">
Your browser does not support HTML5 video.
</video>
The video's are shown but when I'm on my website in Google Chrome the colors look a little bit more purple then they should be and on Internet Explorer the whole video got a darker look. I also have a preview image as you can see in my code and that image is now a different color then shown on the browser and that's not what I want. I noticed that for example Apple also uses the <video> tag but they have no color difference between browsers.
How is this possible? I'm using the same code for all browsers. Is this because of the rendering of all the browsers?
How can I fix this? Thanks.
ADDED BOUNTY
Is there anyone that had the same issue with video rendering in browsers and can help me fix this issue? Still haven't figured out why the same video file is shown darker in Internet Explorer and with a purple glow in Google Chrome.
The page is online so you can see the difference here.
How is this possible?
About the video
Do not expect 100% the exact same behavior from browsers, especially not colors and video. Display inconsistency is expected between different browsers (and especially different systems).
Different browsers might use different software implementations of h264 decoder, different video enhancement plugins, etc.
This is not a problem with your source or anything you can forcefully fix.
The preview image
This is something you might be able to fix. The image is maybe saved in a certain color profile which isn't supported by both browsers or they simply render differently.
When saving an image the safest way is to always select "save for web & devices", which is a sRGB profile. Check your photoshop or image editor settings if needed.
Different browser will have different implementation of certain things. Especially IE. However, I have never heard of this happening. If you have CSS code or any JavaScript code effecting the video element can cause this. It must be with the way the browsers differing ways of rendering the image.
You can try to reimplement the poster function through JavaScript. Have it draw and image. When that image is clicked have it remove the image and draw the video in its place.
As stated above, it's to do with how the browser renders the video on its video panel - something that's difficult to change. You could try re-encoding the video and altering the colours that way to see if that changes anything.
i ran into a similar issue with Google Chrome and youtube videos. In Chrome my video had a yellow tint to it while in Firefox the video was fine. I managed to remove the color distortions in Chrome by doing the following:
In Chrome's url bar, enter "chrome://flags"
enable the "Override software rendering list" flag
This obviously won't affect how other viewers see your videos, but at least you get to see it correctly...
I had the same problem. Try to render mp4 video with "601" colorscope. This should help.
EDIT: Safari = no proper webM support. Safari quite popular I hear. Have to use giant gifs... 🧐🤦♀️🤷♀️
Came across this issue several times, very annoying, no proper solution, so I ended up using transparent background video!
.webm video format allows transparency 🥳(way smaller and higher res than .gif or .apng) https://web.dev/replace-gifs-with-videos/
If you have a transparent .mov, you can convert it to .webm using ffmpeg (Handbrake seems to remove the alpha channel)
Something like this:
ffmpeg -i video-in.mov -c:v libvpx -pix_fmt yuva420p -auto-alt-ref 0 video-out.webm
^ webm video currently not playing in safari, "Safari only supports VP8 used in WebRTC." https://caniuse.com/webm,
https://webkit.org/blog/8672/on-the-road-to-webrtc-1-0-including-vp8/. No idea what that means in practice, any help in comments appreciated 💚
ffmpeg command src: https://superuser.com/a/624564/787069
http://fowlertown.com/projects/terry/widgets/audio.html
Or if you don't want to click the link, here is the code that matters:
<audio type="audio/mpeg; codecs='mp3'" controls src="sample.mp3">Your browser does not support the HTML5 <audio> element.</audio>
This isn't showing up in Firefox 15.0.1 and 16.0.1 on Mac OS X 10.7.4 which depresses me because this is crazy simple HTML5 code. It pops up for a fleeting moment on load but then disappears. It doesn't even show the fallback text.
Thoughts? Is it working for Windows users?
edit: http://html5doctor.com/html5-audio-the-state-of-play/ is where I got my browser support list, which indicates FF has supported the audio element (MP3 codec) since version 3.6.
You have to use this tag differently as in firefox you can't play MP3 files with such a code.
Here is the link for your help. http://support.mozilla.org/en-US/questions/758978
Firefox doesn't support mp3. See this http://www.codingforums.com/showthread.php?t=231069