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.
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 am having some strange issues with Safari 15.0.
I have put a jsfiddle test up here: https://jsfiddle.net/batdan420/3jrvgc2p/3/
You should hopefully be able to replicate the issue by visiting the url in Safari 15.0 and also see that it is not a problem on other modern browsers.
The issue seems to be to do with the video element starting out as position fixed.
This has worked on past versions of Safari (and other browsers) for many years but when I updated Safari, I found that the sites I am using the code on no longer displays the video when the page loads...
The above example should make it easier to diagnose/confirm the issue but if you want to see the code without going to the test here is the line of code that is causing the issue:
<video style="left: 0;top: 0;height:100%;position:fixed;width: 100%;z-index: -20;" autoplay loop muted playsinline>
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
</video>
I was able to fix the issue by REMOVING the position property from the css (that is currently inline for testing purposes) and THEN using javascript/jquery to set the css of the video element to position fixed AFTER the document is ready but this is not the most ideal solution.
The issue does NOT seem to happen on current versions of Chrome (94.0) or Firefox (93.0).
Perhaps there is something wrong with my code? or is this an issue with Safari 15.0?
I just had the same issue with Safari desktop. The solution was just to put the video tag inside a wrapper which has the fixed position as Safari seems to be unable to handle it directly on a video tag.
This doesn't work in Safari:
<video style="position: fixed" src="..."></video>
This works:
<div style="position: fixed">
<video src="..."></video>
</div>
When adding an audio element to a website in earlier Firefox versions you could set the width of the audio element like this:
<audio controls style="width: 500px">
<source src="x.mp3" type="audio/mpeg">
</audio>
However now this is not possible any longer. No matter if I set 500px or 600px the player always has the same width. This was not a problem in earlier Firefox versions.
Is there something I did wrong or is it a Firefox bug?
In Chrome for example everything works.
It's a bug with the new firefox, i just tried out on version 55 it worked and then I upgraded to version 56 and now it doesn't, u may have to wait for them to fix the bug for the time being, or u can send them a bug issue.
If any update I'll edit my reply but for now you can consider sticking with other browsers.
Edit: I have just sent them a bug report. should be fixed anytime now, be sure to check and update your ff browser.
It appears that it will be fixed in FF57 - it's not showing up in the betas, so whatever was broken, it's already been hunted down and corrected.
Here's the bug report I posted (couldn't find another one): https://bugzilla.mozilla.org/show_bug.cgi?id=1409552
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
Sometimes the HTML video on the topmost portion of my site doesn't run even though after it has been completely downloaded. I am using Safari 5.0.6 on iMac. On other browsers as well, sometimes it works fine and at times, it only starts working when I refresh the page.
Can you guess what may be causing this ?, or how I could try fixing this ?
Got the same issue in chrome, autoplay can be emulated by the next way (using jQuery's selector):
<video ..... oncanplay="$(this)[0].play()" >...</video>
Well, I opened your site on my browsers. It's working just fine on Chrome 15 and Firefox 7 [Windows7]. May be you should try it on newer browsers.