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 :)
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.
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%;
}
I want to overlay a video with some text. The html/css works fine in Safari and Firefox - but in Chrome the text disappears on scrolling. Here is a quick video showing the problem: https://imgur.com/2iShiaL
The HTML/CSS is quite straight forward:
<figure>
<video preload autoplay loop muted playsinline src="https://zachholman.com/video/utc-one.mp4" poster="https://zachholman.com/images/talks/utc/poster-one.jpg">Your browser does not support the video tag.</video>
<h1 style="left:8vw; top:6vw; font-size: 5vw; color:blue;">
<div>What is</div>
<div>Time?</div>
</h1>
</figure>
and
* {
margin: 0;
padding: 0;
}
figure {
position: relative;
}
figure video {
width: 100%;
display: block;
}
figure h1 {
position: absolute;
}
Here is a codepen: https://codepen.io/tcurdt/pen/MXJpPr/
Is this a well know bug in Chrome? Is there a work around?
This was fixed in a recent build. Updating Google Chrome fixed it. So simple.
I used this solution to use an html5 video as the background of my site.
However, it doesn't seem to work on iPad/iphone, all I am getting is a black screen, and the video is not resizing.
Also, the video does not resize correctly when the aspect ratio of the window is not the same as the aspect ratio of the video. You will see that the background image begins to become visible.
Thanks!
In http://www.develooping.com/canvas-video-player/ you can see a responsive mp4 background working in iPad/iPhones. Download the code from http://www.develooping.com/wp-content/uploads/2016/04/html-canvas-video-player.zip. It uses an adapted version of HTML canvas video player script by Stanko;
<div class="video-responsive">
<video class="video" muted="muted" loop="loop" autoplay="autoplay">
<source src="mY_movie.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<canvas class="canvas"></canvas>
<div id="over_video">Look at me</div>
</div>
The script is used as follows
<script src="canvas-video-player.js"></script>
<script>
var isIOS = /iPad|iPhone|iPod/.test(navigator.platform);
if (isIOS) {
var canvasVideo = new CanvasVideoPlayer({
videoSelector: '.video',
canvasSelector: '.canvas',
timelineSelector: false,
autoplay: true,
makeLoop: true,
pauseOnClick: false,
audio: false
});
}else {
// Use HTML5 video
document.querySelectorAll('.canvas')[0].style.display = 'none';
}
</script>
The CSS is
body {
background: #000;
padding:0;
margin:0;
}
.video-responsive {
padding-bottom: 56.25%;
position: relative;
width: 100%;
}
.canvas,
.video {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
background: #000;
z-index: 5;
}
#over_video{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
top: 0;
z-index: 10;
font-size: 12vw;
color: #FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 20%;
text-shadow: 4px 4px 4px #5C433B;
}
Hope it can help.
Just mark as record.
Nowadays, the ability of background video get supported (iOS 10 +) due to the new policies of WebKit.
To be specific, check out the official document below.
https://webkit.org/blog/6784/new-video-policies-for-ios/
Since iOS10 there is a solution, see here: https://webkit.org/blog/6784/new-video-policies-for-ios/
On iPhone, <video playsinline> elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins.
<video> elements without playsinline attributes will continue to require fullscreen mode for playback on iPhone.
When exiting fullscreen with a pinch gesture, <video> elements without playsinline will continue to play inline.
Unfortunately, the iPad doesn't support automatic video play, so you'd need a play/stop/pause button. Here's an example of something that does work on iPad: http://html5-fullscreen-video.ceseros.de/html_5_fullscreen/movie/1
SquareSpace uses an interesting approach to "simulating" video on their website by using a clever loop of .pngs and overlays. See http://www.squarespace.com/
If you sift through the HTML you will find the hand sequence here: http://cf.squarespace.com/details/musician-hand-sequence-hires.png
It works on phones.. Just something to think about.
The only way to autoplay videos on mobile devices is to ditch the html video tag.
I see three options, assuming you don't need audio:
Use a gif instead of the video. Depending of the animation, the file size will skyrocket though
Use a really long jpg or png that contains every frame of the video and then shift through them with javascript
Decode the video with javascript. For example use this h.264 decoder and play videos with good compression. Only downside I see is that it requires quite some CPU for the decoding.
I went for the last solution and it works fine.
I have stumbled upon something that might help you with this task..
http://vagnervjs.github.io/frame-player/
Its a JS player that receives a JSON list of images representing frames of the video.
This will also provide flexibility with regards to styling options of the video itself and responsiveness..
You could load a different set of images (lower in quality) to suuport IPADs vs. desktop support for instance.
Most easiest way I think, just use gif for background. For example you can convert it online like in http://ezgif.com/video-to-gif