2

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

BrettGolding
  • 63
  • 1
  • 3
  • 10

4 Answers4

3

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;
}
coder
  • 13,002
  • 31
  • 112
  • 214
  • +1 As I've done this a few times, but the problem is that you lose the video's aspect ratio as you force it to adapt to the viewport. The solution I propose maintains aspect, with the caveat that some of the video is lost. In my experience, both may be acceptable solutions, it just depends on your video content. – msanford Apr 30 '12 at 19:17
  • Just mentioning for the sake of completeness :) – msanford Apr 30 '12 at 19:21
1

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.

msanford
  • 11,803
  • 11
  • 66
  • 93
0

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.

Community
  • 1
  • 1
MUG4N
  • 19,377
  • 11
  • 56
  • 83
0

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.

drogadon
  • 1