I'm developing a web app and in one of my pages I have a video element that shows the user's webcam video.
I noticed the page was a little blurry and then I was messing with the developer tools and deleted the video element and now the page was really sharp.
Images:
The first image is the slightly blurred page with the video element and the second one is the sharp one without video element.
The page looks fine on Firefox but not on Chrome.
Chrome version: 47.0.2526.106 m
Related
I have a simple webpage with a <video> tag. I tried assigning the src attribute of the video tag with URLs of two different videos, both about 2 and a half seconds long:
The first video has a frame resolution of 3840x2160. JSFiddle: https://jsfiddle.net/u2sgawk7/2/
The second video has a frame resolution of 4096x2160. JSFiddle: https://jsfiddle.net/u2sgawk7/3/
I'm encountering a problem with the second video when loading the webpage from Google Chrome on my mobile device (Galaxy S10). The first JSFiddle works perfectly fine on all devices. The second JSFiddle seems to work fine on desktop browsers, but simply displays a blank white screen when I open it on my mobile device (on Google Chrome for example).
I've tested this functionality using many other video files, and it is clear that the frame resolution is the decisive factor here: the problem occurred with every single video with a resolution of 4096x2160, and only with these videos.
I tried using this website: https://clideo.com/crop-video, to test whether or not it is even possible to display high resolution videos on mobile. I uploaded the second video (the one that was causing a white screen), and it was successfully displayed using a video tag on that website - both on desktop and on mobile!
What am I doing wrong? Any help to resolve this would be appreciated.
Once again just to clarify:
The issue does not happen on desktop browsers at all.
The issue does not happen on FireFox on my Galaxy S10.
The issue happens on every other browser I tried on my Galaxy S10, as well as in Safari on iPhone.
I am experiencing an issue in Chrome browser on Android operating systems, there are some bars that appear when the video is played in full screen mode on landscape. The bars are present on this video: https://www.w3schools.com/html/html5_video.asp and you may see a screenshot taken from a Samsung Galaxy S9 below.
Are these bars meant to be there? What is their purpose / what do they symbolize if so?
it is a (new) control that reacts to a tap/swipe to show the main Android navigation UI even when in full-screen (disappears along with the rest of the controls)
It appears via the shadow dom as video::-internal-media-controls-display-cutout-fullscreen-button in an element <input type="button" pseudo="-internal-media-controls-display-cutout-fullscreen-button" style=""> but it appears (similar to some other shadow dom elements) resistant to styling at the moment.
It's for those who have a notch. You have to tap it, and it will shift the video, so the notch won't disturb you when watching the video.
On an iphone, videos that I'm loading through a element appear with the immovable iOS play button overlay.
When viewing the site in the Chrome browser, I'm able to see the first frame of each video behind the play button. In Safari for iOS, I only see the play button and the blank video player behind it.
I would like users to see the video preview in both browsers the way they can when using Chrome. How can I achieve this in iOS Safari?
So I'm designing and build a website for school as part of a project, on this page there are 3 images which in Internet Explorer and Firefox seem perfectly fine but when in Google Chrome, When ever you re-size the browser they seem squashed. I tried Googling it to see if there was a bug but nothing has popped up?
Picture comparing Google Chrome with Internet Explorer : http://prntscr.com/22cr26
Live site (So you can see for yourself) : http://baileywhite.comule.com/penguin/Shop.html
You have width and height attributes on the img tag that are not the same ratio as the original image, and that is what is "squishing" the image.
HTML5 full-screen overlay is behind content text.
It appears that any content after the video is displayed, renders above the video on full-screen.
The blackberry developer tools were no help when trying to find the issue, or change z-indexes on various elements.
Is there a hook for html5 in blackberry that I can get to display above the content?
Is this a Blackberry bug or a VideoJS bug?