HTML5 Video Fallback Image Issue Loading Messy - html

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;
}

Related

Firefox not displaying WebVTT captions on video

I have a basic example of using the track element to load captions. In Firefox, the captions render sometimes, but not other times. Things that I have checked:
CSS positioning of video element (still see the issue with no positioning change)
Opening a private window (sometimes makes them show)
Disabling cache
CORS headers of mp4/vtt server (they are set to Access-Control-Allow-Origin: *) and the video tag has crossorigin="anonymous"
Changing autoplay and muted attributes
Reproduced intermittently in Firefox versions 97.0 and 98.0b4. I haven't noticed this issue in other browsers.
Edit: I added some CSS to this snippet that makes the issue repro for me now. So it's pointing to CSS, but weirdly, once I reproduce it, the captions continue to remain hidden even when I remove all styles.
.modal {
display: flex;
flex-direction: column;
}
.video-wrap {
flex-grow: 1;
height: 480px;
position: relative;
}
video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
}
::cue {
color: pink;
}
<div class="modal">
<h1>Video w/ VTT</h1>
<div class="video-wrap">
<video controls muted crossorigin="anonymous">
<source
src="https://cuttle-learning.netlify.app/onboarding-sketch/videos/onboarding2.mp4?cachebreak=001"
type="video/mp4"
/>
<track
label="English"
kind="captions"
srclang="en"
src="https://cuttle-learning.netlify.app/onboarding-sketch/videos/onboarding2.vtt?cachebreak=001"
default=""
/>
</video>
</div>
</div>
Demo also here: https://h05uh.csb.app/
Sounds like it's this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1733232
That's currently the most minimal example I have which consistently
fails. Some (basic) examples fail after a couple of reloads. I assume
that's because of caching and layout complexity.

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>

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

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 :)

HTML5 video background on iPad/iphone

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

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.