I have built a site that has a background video and looking to improve on the user experience. Currently all text elements load before the background video does. What I want is for the video to load first before the text does, how can i achieve this? Below is the css and html snippet I'm using. You can also use this test url to view the site http://www.convenantkingsandqueens.academy
video.fullscreen {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translate(-50%, -50%);
}
<header id="page-top" class="header">
<div class="container">
<div class="text-vertical-center">
<img src="images/tmw_logo.png" class="img-responsive logo_img" alt="Timeline Media Workx Logo" style="height: 200px; width: 450px;">
<video class="fullscreen" src="videos/bkg/sample.mp4" autobuffer autoloop loop autoplay></video>
</div>
</div>
</header>
The preload attribute specifies if and how the author thinks that the video should be loaded when the page loads.
The preload attribute allows the author to provide a hint to the browser about what he/she thinks will lead to the best user experience. This attribute may be ignored in some instances.
<video class="fullscreen" src="videos/bkg/sample.mp4" autobuffer autoloop loop preload="metadata"></video>
Note: The preload attribute is ignored if autoplay is present. It does not work in IE browser
Related
I set the video at the desktop page version. I would like to change that video to the image when the page width is less than 480px (for the mobile version). I've already set a poster for the video tag but don't know how to make the image to be shown correctly on mobiles (now it is the only video shown on all devices). Please, tell me how to set an image correctly.
Thanks
.video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
<main class="main">
<div class="main-background">
<video preload="none" autoplay playsinline muted loop class="video"
poster="./images/beach.jpg" id="video">
<source src="./video/Atropicallandscape.mp4" type="video/mp4">
</video>
</div>
</main>
JavaScript solution
You could use JavaScript to determine the media size using matchMedia() => MDN: method returns a new MediaQueryList object that can then be used to determine if the document matches the media query string, as well as to monitor the document to detect when it matches (or stops matching) that media query.
In your HTML, add the image element in your video elements parent element and add a helper class to toggle display: none; on the elements style in your CSS to be used when your media query matches the size you want.
Then you create a function and pass the event in to the function that checks the size of the browser using event.matches => e.matches. A conditional can be used to handle the switching of display for the elements. You can use a helper class that simply defines the display property as none which can be toggled back and forth if truthy using el.classList.add/el.classList.remove.
Then add an eventListener to use your function that checks the size of your devices screen size.
const main = document.querySelector('.main-background')
const video = main.querySelector('.video')
const image = main.querySelector('.image')
const mediaQuery = window.matchMedia('(max-width: 450px)')
function handleChange(e) {
if (e.matches) {
video.classList.add('hidden')
image.classList.remove('hidden')
}else{
image.classList.add('hidden')
video.classList.remove('hidden')
}
}
mediaQuery.addListener(handleChange)
.video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.image {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
background: url('https://picsum.photos/450/450') no-repeat;
}
.hidden {
display: none;
}
<main class="main">
<div class="main-background">
<video preload="none" autoplay playsinline muted loop class="video" poster="./images/beach.jpg" id="video">
<source src="./video/Atropicallandscape.mp4" type="video/mp4">
</video>
<div class="image hidden">
</div>
</div>
</main>
Using reactjs, I'm inserting a video in a component but it doesn't seems to like when I use a relative unit in the max-height I've set for the container.
And I'd like to use vh to set the max-height, but when I do the video goes above the other contents of the page (like a wild z-index) and don't work like a child-block that'd set the container's dimensions...
Is it possible to counter/avoid that effect?
Simplified render method :
render() {
return (
<div className='ThatComponentContainer'>
<div>
<p>Some content</p>
</div>
<div className='VideoPlayer' width='520' height='294'>
<video controls preload="auto" width='520' height='294'>
<source src={VideoWEBM} type="video/webm" />
<p>I'm sorry; your browser doesn't support HTML5 video in WebM with VP8/VP9 or MP4 with H.264.</p>
</video>
</div>
<div>
Some other cotent
</div>
</div>
);
}
CSS:
.ThatComponentContainer {
display: flex;
}
.VideoPlayer video {
min-height: 100%;
height: auto;
}
.VideoPlayer {
/*
max-height: 20vh; <<<----- I'd like to use this */
max-height: 588px;
min-height: 294px;
height: auto;
max-width: 90%;
width: auto;
}
Here is the video, and I've another issue but I can't seem to find anything about it...
The video's controls are over the video's bottom, hence you can't see a part of the video.
I'd like to have the controls under the video, is it possible?.
As stated by Tushar Vaghela in the comments, this is part of the shadow-dom (the built in browser CSS, essentially).
The best solution right now is to hide controls and use simple custom ones. Here's everything you need, courtesy of MDN.
The code
Live example
Written guide
try to add this css too with your video tag if it helps
video {
object-fit: fill;
}
if this does not work for you than try video.js it will help you to give your video player a customs options too with the default controls
According to this page -
http://docs.brightsign.biz/display/DOC/HTML5+Video
you should be able to play a video stream in html just like this right ?
<video src="udp://239.192.1.1:5004" brightsign-properties="StreamTimeout:0;StreamLowLatency:0;">
i have built my html page, and when I inspect it, I have this in my body -
<div id="rightPane" style="position: absolute; top: 20%; left: 50%; width: 50%; height: 80%; background-color: green; visibility: visible;">
<video src="udp://224.0.0.1:9999" brightsign-properties="StreamTimeout:0;StreamLowLatency:0;" style="width: 100%; height: 100%;">
</video>
</div>
however when my page loads I get the error ,
GET udp://224.0.0.1:9999 net::ERR_UNKNOWN_URL_SCHEME
any idea on why it says unknown url scheme? is that page wrong in how I have to specify the udp url or?
thanks for any help.
The tag implementation is browser specific. I doubt you'll find much more than HTTP. I think FireFox supports RTSP.
I'd be surprised if you find wide browser support outside of HTTP.
I am fairly new to HTML & CSS. I want to display some text in a section, with a looping video background.I tried setting the z-index to -1 but I am still unable to see the text.I also tried placing the text (<p> Hello!</p>) in different parts of the block but to no avail.Here is the HTML Code:
<section id ="quote" style="height:200px ; width: 100%; padding-top: 0px; padding-bottom: 0px; margin: 0px">
<div>
<video id="video" style=" position: relative ; background : cover ; background-position: center; width:100%; height:20% z-index:-1" autoplay loop muted >
<p color":#000000"> hello ! </p>
<source src="journey.mp4" type='video/mp4'/>
</video>
</div>
</section>
Here is the CSS for the quote id tag :
#quote {
background-repeat: repeat;
overflow-x: hidden;
overflow-y:hidden;
height: 20px;
}
I tried setting the z-index to -1 but I am still unable to see the
text.
In this case z-index is not really what you need in order to create this style effect. position:absolute; is what you need.
By putting your <p> outside of the <video> and giving it a position absolute will do the job.
I want to display some text in a section, with a looping video
background
To create a looping video as a background you'll need to set
<video preload autoplay loop muted>
preload - We don't really need this here beacause the preload attribute is ignored if autoplay is present.
The preload attribute specifies if and how the author thinks that the video should be loaded when the page loads.
The preload attribute allows the author to provide a hint to the browser about what he/she thinks will lead to the best user experience. This attribute may be ignored in some instances as mentioned above.
autoplay - Autoplays the video. The video will automatically start playing as soon as it can do so without stopping.
loop - It specifies that the video will start over again, every time it is finished.
muted - It specifies that the audio output of the video should be muted. Assuming that you want to avoid the music/sound of the video to be turned on for a background video
At the end, here's how the whole thing looks like:
<section id ="quote" style="height:200px ; width: 100%; padding-top: 0px; padding-bottom: 0px; margin: 0px">
<div class="videoContainer">
<video autoplay loop muted>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/webm; codecs="vp8, vorbis"' />
Video not supported.
</video>
<p class="overlayText"> hello there! This is some text.</p>
</div>
</section>
and your CSS
#quote {
background-repeat: repeat;
overflow: hidden;
position: relative;
}
.overlayText {
color:#000;
position:absolute;
top: 0;
}
/* This is just some CSS styling to make the video fill 100% of its div */
.videoContainer {
height:100%;
width:100%;
overflow: hidden;
}
.videoContainer video {
min-width: 100%;
min-height: 100%;
}
Online Example Here
I've seen this question pop up a couple of times without any clear resolution.
I'm loading a simple video
<video src="" controls></video>
Onto my page. The video works and plays well cross-browser (not showing all the format setup for this question since it isn't relevant).
I've then applied a border-radius to the video tag. This works, except in Chrome.
I can even pull up the console and see the border-radius applied to the video tag, but it isn't rendering the border radius.
Is anyone familiar with this issue? I've read it's a bug in Chrome, but I'm not sure if it's been resolved or if there might be a workaround?
I'm not sure but I think that this is what's meant by "using SVG":
The idea is to create a HTML overlay element that is the same width and height as the video, set multiple SVG backgrounds on it (border-radius's in whatever the background color is) and make it "mouse-invisible" (pointer-events: none):
Demo: http://jsfiddle.net/pe3QS/3/
CSS (minus the SVG's):
#video-container {
position: relative;
}
#overlay {
position: absolute;
width: 320px;
height: 240px;
left: 0;
top: 0;
pointer-events: none;
background-image: url('data:image/svg+xml...');
background-position: top right, top left, bottom left, bottom right;
background-repeat: no-repeat;
}
HTML:
<div id="video-container">
<video width="320" height="240" src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" controls></video>
<div id="overlay"></div>
</div>
You could also use a psuedo-element (not on the video element, it would'nt display):
Demo: http://jsfiddle.net/pe3QS/2/
CSS:
#video-container:after {
position: absolute;
width: 320px;
height: 240px;
content: " ";
.....
HTML:
<div id="video-container">
<video width="320" height="240" src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" controls></video>
</div>
The SVG's are pretty simple to modify, just change the fill attribute on each of them.
This could probably also be done via JS.