HTML video showing black screen but sound is playing on iOS 15 - html

My website shows a video using video tag which worked perfectly until not long ago.
The video is working but when pressing on full screen, the video is playing but the screen is black while the sound is still playing. The issue occurs only on iPhones with iOS 15 (using Safari and Chrome also).
Things I've tried:
I've tried playing the video directly with a URL to the actual file(to check its not codec issue) and it worked properly.
My video tag has 'position: absolute;' on it and I tried removing it(even though it breaks my layout) and that didn't work either.
Tried pausing the video immediately and playing it after the video loads.
Tried applying a background: white; or any non-transparent color to the video tag.
Tried removing auto play.
Tried to disable 'GPU process: Media' on safari settings just to check if that affects anything
and it didnt.
This is the html:
<video data-test-id="long-video" #longVideo muted controls playsinline [class.d-none]="!isShortVideoHidden"
*ngIf="isPageLoaded" src="https://cdn1.someurl.com/videos/commercial_1.mp4"
type="video/mp4">
</video>
and the css(with the parent):
#media only screen and(min-width:992px) {
.fixed-video {
position: fixed;
z-index: 10000;
margin: auto;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
transition: 0.4s;
video {
width: 80%;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
}
}
Please tell me if you have struggled with this and know how to solve it.
Thank you :)

Related

How to hide html video controls for Safari Mobile

I am currently using a video as a background for my website, it works perfectly in my chrome browser, but when I use safari- it shows the video controls for the video in the background. Is there any way to hide these controls or maybe just a better way to have the video in the background?
here's my code for the background video
HTML
<video id = 'home-bg' src = {require('../assets/leojaden-video-bg-2.mp4')} muted loop autoPlay playsinline/>
CSS
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
#home-bg{
position: absolute;
filter: brightness(80%);
top: 0;
left: 0;
height: 100vh;
width: 100vw;
object-fit: cover;
z-index: -1;
}
video::-webkit-media-controls {
display: none;
}
I am using reactjs for this website, so a react friendly solution would be helpful! :)
You can hide the controls by not adding the controls attribute to the video element.
<video autoplay playsinline></video>

Angular 9 & HTML5 Background video does not autoplay on iOS 13 ( No matter the browser )

EDIT :
I tested on 12.4.6 Version of iOS, and it plays with no problem.
On my main phone however : iOS 13.3.1 , It still got this problem described here .
I'm kinda new to Angular, and I'm developing an website for a friend, also it helps me to learn.
I ran into this problem. I set a video as a main background and it works fine on computer browsers and Android browsers ( Chrome only tested on android ):
Here's the HTML Code :
<div class="video_box">
<div class="video_overlay"></div>
<video #videoElement [loop]="true" [muted]="true" [volume]="0.2" [autoplay]="true" playsinline id="bgVideo">
<source src="assets/bgVideo.mp4" type="video/mp4"/>
</video>
</div>
Here's the CSS Code :
.video_box {
top: 0;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.video_box video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 53.5%;
left: 50%;
transform: translate(-50%,-50%);
}
.video_box .video_overlay {
top: 0;
position: absolute;
height: 100%;
z-index:1;
width: 100%;
background: #000000;
opacity: 0.5;
}
It loads fine and most importantly autoplays on Desktop / Android. But on iOS devices when I serve my application and connect to it ( no matter the browser ), it doesn't play, only after user interaction. ( If I click my own Mute or Play buttons )
And by my knowledge it already respects the rules of Safari or Chrome with being muted. ( The volume tag, does not affect it even if I remove it ) .
I tried lifecycle hooks such as ngOnInit or ngAfterViewInit but same story applies .
I ran out of ideas .
Thanks in advance .
I found it. Yes I am also stupid and don't know iOS that better
The thing is, when you have Low Power mode Enabled, the video autoplay in the phone settings is turned OFF and you can't modify that only if you get out of Low Power mode.
I turned that off, and it works as intended.
Thanks. I'll leave this here, maybe others run into it.

HTML5 Video element on IPhone has border

I have been building an app recently and have a loading animation playing at the start (just a mp4 video - for aesthetic purposes). It works great everywhere apart from on Iphone.
The issue is that there is a grey line around some of the video - not the same on every side. If i try to screenshot the page the lines are no longer visible.
I am using an iphone 7 plus and ios safari. To see for yourself see - https:pathfinder-new.herokuapp.com
The goal is for it to be seamless with the white background - example can be seen on desktop at above address.
Cheers,
Tim
I’ve been struggling for a few hours and found this as the only way to remove it (tested on Safari, Chrome and Firefox on iOS):
video {
-webkit-mask-image: -webkit-radial-gradient(white, black);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
Took inspiration from this gist
I tried that on iOS 12 installed iPad WiFi 2017 on Safari and things were all good. Do you have any chance to video that glitch with another recording device?
Edit: General appearance cleaner -webkit-appearance: none may do the trick.
I had to go with the approach of a wrapper div and a position absolute one, something like:
HTML
<div class="wrapper">
<video loop muted autoplay playsinline>
<source src="./video.mp4" type="video/mp4">
<source src="./video.webm" type="video/webm">
<source src="./video.ogv" type="video/ogg">
</video>
<div class="video-ios-border-fix"></div>
</div>
CSS
.wrapper {
display: block;
position: relative;
font-size: 0;
}
.video-ios-border-fix {
position: absolute;
z-index: 1;
box-sizing: initial;
left: -2px;
top: -2px;
right: -2px;
bottom: -2px;
border: 4px solid #fff;
}
video {
width: 100%;
}

HTML5 Video Fallback Image Issue Loading Messy

I have a fallback poster image inside my html5 video preload settings that loads messy while waiting for the actual video to load as it sits then suddenly disappears when the video loads. My question is can I code this transition more neatly and how can I not make the image flash then disappear so messy just right before the video loads? Also when video cannot be loaded such as on mobile/and handheld devices how to remove the play button rendered to the fallback image?
Here are my settings:
<div class = "sudirlayheader-container">
<div class = "sudirlayvideo-container">
<video preload = "auto" autoplay = "autoplay" loop = "loop" volume = "0" poster="video/Dubai-Wallpaper.png">
<source src = "video/sudirlayvid.mp4" type = "video/mp4">
<source src = "video/sudirlayvid.ogg" type = "video/ogg">
<source src = "video/sudirlayvid.webm" type = "video/webm">
<source src = "video/sudirlayvid.mov" type = "video/mov">
</video>
</div>
</div>
I found my own solution, apparently the html5 code that I originally have is correct and the best way to do things but the way to make a smooth transition is mainly just a little editing of css and picture schemes on my behalf. So sum it up I just took a snapshot of the main pic and lightened the frame so that if the video loads but takes time the fallback image just seems to be a cool fade in effect and the css is used to remove the play button when the video does not load on mobile/and handheld devices etc.
Now my main css looks like this:
.header-container {
width: 100%;
height: 900px;
border-left: none;
border-right: none;
position: relative;
padding: 20px;
}
.video-container {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
z-index: -1;
opacity: 1;
width: 100%;
}
Notice this line fixes the weird button showing up on the fallback image when video doesnt load
video::-webkit-media-controls-start-playback-button {
display: none;
}

Can we stack elements on top of HTML5 Video?

What I want is for example:
<video> = z-index: -1;
<div id="post"> = z-index: 0;
I've tried this to a certain degree... but it would be good to know if anyone has some concrete information on it. I'm new to H5 Video, and I know with Flash it is possible, but not for mobile devices (which I don't care about atm, can have some crappy fallback)
Thanks for any info in advance.
You can stack elements on top of html5 video using z-index, exactly as you described. You can see my demo with this jsfiddle, http://jsfiddle.net/cJJwj/3/
And here's the code that I use in that fiddle:
HTML
<video width="200" height="200"
controls="controls"
src="http://upload.wikimedia.org/wikipedia/commons/4/43/Eisbach_surfen_v1.ogv">
</video>
<p>paragraph</p>
CSS
video {
position: relative;
z-index: 0;
}
p {
position: absolute;
top: 50px;
left: 50px;
color: red;
font-size: 2em;
border: medium solid yellow;
z-index: 1;
}
I should mention, however, that I tried using z-index: -1; for the video, and the video controls wouldn't work (in Firefox 5 beta and Chrome), but when I used z-index: 0 instead, the controls worked fine. I don't know why that is yet.
I haven’t worked with HTML5 video much either, but I know that the Vimeo HTML5 player seems to do exactly what you’re asking. They use <div> and even <canvas> above the video to render the playback controls, title, and other buttons.