Ok so I need to have a video load full screen as an intro to a website. Can I do this in HTML5 or do I need to use flash?
Can someone please explain or point me to some good resources on how to do this.
I need to website to load and the 5 second clip to play through with no player controls or anything and then go straight through to the main site.
Exactly like this example: http://www.firecrackerfilms.com/
Thanks :)
If you need to set a background video try this
Use position:fixed on the video, set it to 100% width/height, and add a negative z-index on it so it appears behind everything.
If you look at VideoJS, the controls are just html elements.
HTML
<video id="background" src="video.mp4" autoplay>
CSS
#video_background {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1000;
}
The page in your example isn't full-screen, nor is it even full-viewport, it's a small video with a black background that blends into the page's black background. If you can get away with doing that, that will work.
If you care, you will never be able to auto-play an HTML5 video intro on iPad, because iOS inhibits autoload and autoplay unless they are triggered by a finger touching the screen. But then again, it can't play Flash anyway.
If you want an HTML5 video to be full-viewport, for, say, a 16:9 video viewed in a 4:3 monitor, you will make the video full-height and lose the sides of the video. Similarly for the reverse case. This will maintain the video's aspect ratio with the caveat that you lose part of the video content to hidden overflow.
If you don't care about aspect ratio, you can make the video height: 100% and width: 100%, as #coder suggests.
For this reason, it's probably easier to go with what they did on your example site, and make the video blend into the background.
Here is a nice thread about html5 vs flash video and the pros and cons:
HTML 5 <video> tag vs Flash video. What are the pros and cons?
Personally I would prefer html5 because you can watch videos on almost every device type like iphone or ipad and so on).
But html5 is not as powerful as flash videos.
You should also consider that some users have disabled javascript or flash configuration in their browser.
I don't think real fullscreen is possible with a user requesting it. At least in flash it's not possible.
If you mean to fill the whole viewport then it can be done by using css to size the video element with the caveat that if you set width and height to something that doesn't match the aspect ratio of the video, the video is not stretched to fill the box. Instead, the video retains the correct aspect ratio and is letterboxed inside the video element. The video will be rendered as large as possible inside the video element while retaining the aspect ratio.
Related
I came across this site: https://hinge.co/ and tried to follow the HTML/CSS to find out how they have the fluid, responsive HTML5 video background.
I came across several properties which I don't understand, for example:
max-width: calc(177.778vh);
height: calc(56.25vw);
I understand this is a JS plugin they're using, and the values in calc are dynamic. But why would the vh height be more than 100? Wouldn't that be bigger than the viewport itself? The video seems to be the exact viewport size so I don't understand the logic here.
Has someone created something like this before and can help understand how this is done?
I've checked the code and those two particular lines are not doing much more than constraining how zoomed in the video should be.
What does the trick is
min-height: 100vh;
min-width: 177.77vh;
which guarantees the video will cover the entire screen and more, regardless of the videos size/shape (vertical or horizontal).
I came across this site: https://hinge.co/ and tried to follow the HTML/CSS to find out how they have the fluid, responsive HTML5 video background.
They didn't use the HTML5 video element. They embedded the video from Vimeo then positioned it with the CSS.
I understand this is a JS plugin they're using, and the values in calc
are dynamic. But why would the vh height be more than 100?
They probably did it to keep the aspect ratio of the video correct in any screen size.
Wouldn't
that be bigger than the viewport itself? The video seems to be the
exact viewport size so I don't understand the logic here.
It overflows the wrapper. Which has overflow as hidden.
Similar Example: https://startbootstrap.com/snippets/video-header/ (Not exactly same but HTML5 Video Element used here for video background)
HTML Video element on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
The video is being used as a background video.
The poster image needs to be the first frame of the video so when the
video is loading there are no jumps.
On certain devices, particularly iOS where autoplay of videos is disabled, can I choose a different image to display?
SUMMARY:
Can I show a different poster image if autoplay is disabled?
Thank you.
Note: I'm aware I can hide/show things with media queries, but this doesn't work too well with the likes of the iPad Pro around.
If possible I'd like a solution that doesn't require detecting different devices.
I don't know the specifics of how you'd do it, but off the top of my head, I'd suggest running a detection script at some point beforehand. Use a "dummy" video (perhaps something like a 1x1px blank video in a data-URI to ensure speed and synchronicity) with autoplay on, then check to see if it's playing or not after shortly after it renders. Then flag accordingly depending on whether it plays or not.
I see a number of ways to deal with layouts, and interchange, etc to deal with image sizes, but I haven't come across any info about video player size. For instance, using viewbix, voo, jw, or any other js served video player, the size of the player is built into the embed. It also has an associated image file for the poster frame.
Just wondering how other folks approach this. Do you make multiple versions of the embed and image for various breakpoint sizes? Does it matter if the embed is too big? Not sure if that actually affects streaming speed or not, or if the video itself is technically doing anything until play is pressed. Image would still be an issue though as serving a full width desktop size image on a 320px screen seems a waste.
What's the smart way to handle this globally?
thx
With the JW Player, we have responsive support built into the player - http://www.jwplayer.com/blog/new-in-jw-player-responsive-design/, so you don't need to worry about breakpoints, media queries, or anything like that. Those would all still be handled in your CSS.
jwplayer("myResponsiveVideo").setup({
file: "/assets/tearsofsteel.mp4",
image: "/assets/tearsofsteel.jpg",
width: "100%",
aspectratio: "12:5"
});
Basically a set up like this will make the player responsive, regardless of what container it is in.
I am currently working on a project for chromecast and ran into a problem.
When I am loading a very short video, the (videoplayer?) screen goes black while loading.
All the video's backgrounds are white and I am switching videos quite often. Therefor, it would look a lot nicer with a white loading background.
I've tried creating a white and letting it fade out to opacity 0 on event listeners (played, loaded,..). Tried the same with a bit of a delay using setTimeout(..), but there always remains at least a short "pop of black" when switching to the actual video. Also using video's "poster" attribute (by just using a white image..) doesn't prevent this.Furthermore, the natural things like background-color or color attribute's of the video tag are all set to #FFFFFF via css.
Is there any actual way to do so, which I didnt think of yet?
Basically it only needs to work on Chrome (i think chromecast is using some derivative, webkit thing).
<canvas id="whiteoverlay"></canvas>
<video id="receiverVideoElement" loop poster="white.png"></video>
I'd love if you have some kind of tipp for me or reason why it will never work.
I am using Quick time via javascript so that I can play video on my web browser. I want to resize the video so that it fits the size of the DIV. The problem is that when the player launches the video the size of the DIV remains the same but the player gets out of the DIV. I want the size of the DIV remain the same doesnt matter if the player can not be fully shown or resized.
How are you setting the size of the player? If you set the <object> width and height attributes to a certain number of pixels it should respect that. Whilst you can set width: 100%; with CSS, if that makes it resize with a liquid layout many plugins won't resize themselves after loading.
Unless you absolutely must play back old-school .mov files, I would strongly recommend avoiding the embedded video players today, and especially QuickTime which many Windows users will not have. Video on the web today is primarily done with Flash players. HTML5 <video> with fallback to Flash is nice to have for the newer browsers.