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.
Related
I currently have this html code:
<video playsinline="playsinline" autoplay loop="" preload="auto" muted poster="" class="fullscreen-bg__video">
<source src="my video url" type="video/mp4">
</video>
This code works perfectly on every browser including for mobile. It even works for in Instagram's own in-app web browser when you tap on a link/open something in their app. However this doesn't work for TikTok's own in-app web browser. Didn't find much resources on this especially debugging in-app web browsers so any help is much appreciated!
Don't think this is needed but here is my css code as well:
.fullscreen-bg__video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -100;
}
/* new div */
.cover {
width: 70%;
height: 100%;
}
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 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;
}
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.