I have MP4 videos, all encoded with the same settings. The first 9 work properly in IE, Chrome and Firefox. The 10th video's default dimensions are 5184x3456px. IE and Firefox refuse to render this MP4 in their players, but Chrome continues to work properly like the first 9. Does anybody know if it is because of the larger default dimensions of the video? Is there a workaround for this issue?
Related
How are you doing?
Well. I'm running 3 videos on my website - HTML5
1st video > Specs: 4K 3840 × 2160 pixels - .WebM format
2nd video > Specs: FullHD 1080p 1920 x 1080 pixels - .WebM format
3rd video > Specs: FullHD 1080p 1920 x 1080 pixels - .mp4 format
As known .webm has compatibility pratically with all browsers.
I made a really simple test to check which browser has compatibility with .webm
Selected browsers for the test I've done:
Google Chrome, Safari, Firefox, Opera and Microsoft Edge.
1st test:
Browsers that definitely have compatibility with .webm after playing the video on my website:
Google Chrome, Firefox, Opera and Microsoft Edge. (Definitely, Safari is the only not acceptable)
2nd test:
Browsers that definitely worked on 4K .WebM:
Google Chrome, Opera and Microsoft Edge.
3rd test:
Browsers that definitely worked on 1080p .WebM:
Google Chrome, Firefox, Opera and Microsoft Edge.
4th test:
Browsers that definitely worked on 1080p .mp4:
Google Chrome, Safari, Firefox, Opera and Microsoft Edge.
Conclusion: From the list (Google Chrome, Safari, Firefox, Opera and Microsoft Edge) all browsers can play .webm format, except safari.
From the list of browsers that can play .webm (Google Chrome, Firefox, Opera and Microsoft Edge), all of them can run 4K. Only Firefox doesn't accept 4K .webm (firefox only accepts 1080p .webm)
Safari definitely can't run .webm format.
If you wanna check the tests I've done by yourself, please access my website link: http://167.71.100.135
Here is the point:
I'm definitely fine that Safari doesn't work with .webm
What I really don't "accept" is the way Firefox goes. Does anyone
knows why Firefox can't run on 4K .webm? As mentioned before, maximum
resolution I could get on firefox was 1080p .webm
Does anyone know how to make it works on 4K .webm? I'm really not satisfied with maximum firefox 1080p .webm, knowing that all others browsers do the 4K job.
Thank you very much!
I value your feedback, so let me know what you think!
Sincerely,
Mat
How are you my friend?
Yes, the video 4k is 3.8GB, 2k is 1.5GB and 1080p 800MB.
Exactly, the videos are an hour long and I can play smoothly the 4K video using any browser (chrome, opera and microsoft edge). I can't play only on firefox. (Firefox only accepts only max 1080p)
Oh yeah, I tried with a shorter video for sure. It's a 5min 4k (600mb) video and firefox doesn't accept... here is the link, you can try by yourself, please: http://167.71.100.135/5min-4k-600mb
Look forward to hearing from you.
Sincerely,
Mat
Do these videos play if you just open them locally in the browser? The videos are an hour long, and the 4k video is 3.8 GB, the 2K is 1.5 GB and the 1080p is 800 MB.
Perhaps trying with a shorter video? I am able to play a 600MB 4k video in Firefox opening from localhost.
Have you thought about streaming a video of this size?
EDIT:
Looking at the 3 videos with FFprobe, the 4k and 2k videos are VP9 encoded, and the 1080p is h264 encoded. You should standardise the encoding on all 3 videos, to ensure that it really is the size, and not the encodings:
https://www.streamclarity.com/probe?url=http://167.71.100.135/wp-content/uploads/media/webm1080p.webm
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
I'm using hmtl5 video. It works normally in all browsers, except IE9.
In IE9 it's cannot playing after first play, or video freezes after a few seconds, but video state is "playing". I've add eventlisteners to check it.
Can anybody help me to solve this problem?
I would suggest using a flash player fallback for Internet Explorer 9 and other browsers with issues with HTML5 video.
I think IE9 has some issues regarding HTML5 Video. You shouldn't trust on that to work. Maybe a (flash) fallback for IE9 would be good. Most of those bugs are fixed in IE10. So HTML5 Video should work there (if you use the right video encodings).
http://caniuse.com/#search=video
An odd thing with firefox. This video will only play when it's seeked from ~6 seconds onwards
http://www.wealthplanning.tv/media/videos/introduction.webm
html link here too http://wealthplanning.tv/media/videos/test.html
Works fine in Chrome, and even opera when inside the video tags.
Anyone have any ideas?
Seems that it was an encoding issue. Was using Miro originally, but tried it with XMedia Recode instead and that solved it.
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