I have gone through practically every single stackoverflow question concerning this. I still having found an answer.
I was told to add playsinline and it should do the trick but still nothing. I use videojs and I assume it's practically the same thing as using a normal html5 embed video.
I have done all that could be done. Resetting network settings,adding playsinline,adding autoplay muted and loop, using 3 different browsers namely chrome, opera and safari. This works on some ios devices but not all no matter the browser. These are mp4 video formats.
<video-js class="vjs-big-play-centered" controls preload="auto" playsinline id="vid1"><source src="" type="video/mp4"></video-js>
This is practically how my code is. I do not know what else to do as this is really stressing me out in finding the answer. Please some angel help me out...
Alright just to answer my own question.
I found out that when the attribute preload='auto' is used, ios devices/browsers load it a bit different from andriod phone.
Also this was inconsistent. It worked sometimes but majority of times it didn't.
After so many research, I was able to fix this by changing this to preload='none'.
I hope this would help someone else out...
Related
I have made a wordpress website, and I have added a video on my page and masked it. On firefox & chrome it works perfectly. But on safari, it shows a play button inside the mask. I am not able to find a solution for that, so I thought if I could just change the content for safari. I don't know if its possible or not, but if I can just put an image for safari and video for others.
Using of video has many policies in each browser engine !
safari and apple using Webkit and webkit and apple has some policies for tag
you should learn this policies here Webkit Policies For
some attribute like playsinline may help you and also you should know that if you want to make your video autoplay then should use autoplay attribute and also the for user policy you should use muted attribute or ask for an unmuted video before playing
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 having a problem playing audio in Safari or Opera. The following code does not work in either:
<audio controls>
<source src="http://fallowproduction.com/music/Paradigm%20E%20-%20Once%20upon%20a%20Dubstep2.mp3" type="audio/mpeg">
</audio>
Here's the jsFiddle for easy access to the code: http://jsfiddle.net/panq7/1/
Considering it's really simple, I'm mystified as to why. Is this a normal problem? Or is there something else going on? I looked up playing mp3 problems with Safari and while I found no solution, I found a bunch of complaints.
Edit: I fixed the Safari problem by adding an option for an embed tag. Still, it's not the ideal fix, as Safari is supposed to support the <audio> tag, which it does not, apparently (someone let me know if it works in their version of Safari). However, Opera apparently does not support the <audio> tag, or the <embed> tag. This is contrary to the browser specifications, as mentioned later by another member of StackOverflow.
Opera does support <audio> however, when using MP3, there seems to be limited support for different sampling rates. To solve this problem, I detect support for OGG and detect the Opera browser and fall back to OGG. It's not perfect because I would prefer to simply detect if there is MP3 support and go with that, however Opera reports that it does support MP3, so it's not enough to just check that.
You could also simply use supported MP3 formats for Opera. I believe the following is supported:
32kHz/44.1kHz/48kHz frequencies,
16kbps-10Mbps bitrate
The reason may be the missing closed tag /> in source line.
Wolfgang
I have a HTML5 video, working fine, and i'm happily smiling whenever i start my browser... However!
I know the Video tag isnt supported by some browsers, but i noticed there is a difference in support for video attributes/methods/whatever too. Is there a summary of this somewhere?
For example:
The poster attribute doesnt work in every browser, even if the vide DOES work!
I think its pretty worthless to just use an entire javascript library to take care of one attribute like poster, so how to take care of this?
Or am i completely wrong, and is IF video is supported, also every attribute supported the same way?
Please help me! :)
Thanks for all your advice,
WK
ps: I am using the video for everybody variant of the video. So thats working fine.
Is this the kind of thing your after?? click me.
Basically there is the following support for the HTML5 video tag:
Every modern browser that has support for HTML 5 supports <video>
meaning: IE9+, FF3.6+, Chrome, Opera, Safari
Internet Explorer 9 does not support the poster attribute. I believe
there is even a bug about this on Microsoft connect.
Firefox does not support the loop attribute. (replaying a video after it has finished)
Different browsers support different video formats, IE9 supports
H.264, Firefox supports ogg (Theora) and WebM etc, which means that you would need to provide all formats in order to be compatible with all browsers.
The rest is pretty much supported everywhere.
well, HTML 5 is not yet standardized. Due to this, every browser that support html5 works differently. As far video tag is concerned then you have to provide with different formats so as to get support on various browser list. You can test browser support on this site. Here you can get all the details about the extent your browser support to HTML5
I find this page a good resource (although it is starting to get old as it was earlier this year): http://www.longtailvideo.com/html5
On a separate note, I find if you go to mobile devices such as Android the browser support varies greatly per device. Even though they are "supported" I always get strange behavior.
As for poster, there is no good solution if you want to have support across all browsers.
Doesn't IE9 Mobile support html5 video events?
till now i got no luck with that ... and also found no information about it.
any ideas ? ;)
thx!
it seems to only support a very, very minimal subset of what desktop ie9 can handle. So far from what I observed, ie9mobile supports e.g. "loadstart" and "canplay" events but does not fire the "ended" event just like many others. Test with your phone here to see what's possible and what not: http://www.w3.org/2010/05/video/mediaevents.html