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
As I was upgrading a site to use bootstrap css I noticed a page that has an iframe that it uses. Another developer claims it works only in IE, but I cannot get it to work in IE, FF or Chrome. FF and Chrome display nothing, while IE 11 blows up trying to load the pdf.
The code that is literally in the view source of what the browsers are trying to read just doesn't look quite right to me. Thoughts?
<iframe id="ContentPlaceHolder1_pdfFrame" width="720" height="590" name="pdfFrame" src="File:\\chc\shared\IntakeTest\Storage\WF_Test_20130702161454_2.pdf"></iframe>
Is it possible to use only a mp4 video and the HTML5 player in ie7,8,9 firefox, chrome and safari
I've seen these links
http://blog.beverlyguillermo.com/post/14813549122/ie7-and-html5-video
and
http://w3schools.com/tags/tryit.asp?filename=tryhtml5_video
and
http://designwebkit.com/web-and-trends/10-good-html5-video-players-website/
Have you ever done this
Thanks
Try this http://code.google.com/p/video4all/ . Its a nice way you can integrate with all the browsers you have listed
If you are not satisfied try the answer here :- How to play the html5 video in IE8 Browsers
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
I'm building a simple page to display videos uploaded from my iphone using the html5 video tag.
if you're watching it with chrome you probably see this video is presented horizontal, although it's not- try to download it or watching it from safari (haven't tried another browsers).
I havne't found anything on the net mention this problem, is it a known chrome bug? does this tag any attribute that I can change to display it properly?
Thanks.
Edit:
looks like this also happen in IE
you could use style="-webkit-transform: rotate(90deg);" on the video tag along with a html5 compatible video player solution (otherwise you get rotated controls as well)
It's an encoding issue from iPhones. I downloaded the video and it was still displayed horizontally using mplayer. There is more information here:
http://help.videojs.com/discussions/problems/1508-video-orientation-for-iphone-wrong
and as suggested you'll need to re-encode the videos using a library that uses a more supported standard encoding. (Or try to transform the video, on the page but that would be ugly)