Utilize Background Videos to Create Great Web Experiences.

climb

 

See Code on GitHub

Demo

The internet is an amazing place. There is a trend in creating websites that goes beyond the traditional brochure style landing page. One of my favorite devices in this context are utilizing background videos and audio to help sell your experience.

Human beings are visual creatures. We process 90% of information reaching the brain visually. I’ve seen the phenomenon happen when visiting certain websites, where a video in the background of a website sells the experience of that product. The one that stands out the most would be the landing page for Go Pro. After watching the video for twenty seconds I’m ready to jump onto the cart and purchase one. My thinking was that if I only had one of those I could experience everything this planet has to offer. It goes to the power of a truly well done landing page. It could also mean that I’m a sucker, but that’s for a different kind of blog.

The idea behind this post is to utilize two key HTML5 tags, the audio and video elements. this post assumes you have basic knowledge of HTML and CSS. It also assumes that you have a video file ready to use as well as an audio file.

First thing I did was set up our HTML file:

<html>
<head>
	<title>Full Screen Videos</title>
	<link rel="stylesheet" type="text/css" href="style/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="style/bootstrap-theme.min.css">
	<link rel="stylesheet" type="text/css" href="style/main.css">
</head>
<body>


<script type="text/javascript" src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
</body>
</html>

After setting up our HTML file equipped with BootStrap 3 and our JavaScript file that we will visit later we add our video and audio files to our page:

<!--Video-->
<div class="background">
	<video src="vid/rbsp_launch_720p.mp4" autoplay=”true” muted="true" loop="true"></video>
</div>

<!--Audio-->
<div class="bg-music">
	<audio id="audio" autoplay="true" loop="true src="vid/birth.mp3"></audio>
	<button class="btn btn-default" onclick="audio.play()">&#x25BA;</button>
	<button class="btn btn-default" onclick="audio.pause()">&#x2590;&#x2590;</button>
</div>

Let’s look into what we just did. we added a div with a class of background. Within that div we are going to put in our video file. There are a lot of attributes that we can add into the video attribute to give it certain properties. In this case we used a few and I’ll break them down:

  • autoplay – boolean attribute that when you declare will tell the video to automatically play even without the video fully downloading
  • muted – boolean attribute when declared will mute the video
  • loop – boolean value that when declared will automatically loop the video.

To make our video take up the screen I used some fancy CSS trick (not really) they are as follows:

body {
	background-color: #000;
}


.background {
	z-index: -9999;
}

.background > video {
	height: 100%;
	width: 100%;
	opacity: 0.85;
	position: absolute;
}

The height and width are now responsive and it will stay put even if we scrolled through the demo site. I also turned down the opacity so as to make sure that the users vision is on our content and not just the video in the background.

Now onto our audio tag. We give the tag and id of audio so our JavaScript can find it. The audio element uses the same attributes as the video element so I won’t go through them here. after the audio tag I utilized the button element to create a custom player for our audio. The reason I don’t put a player for the video is a simple deduction. From a UX standpoint I want the user to be able to pause the audio should they not have headphones and are sitting in an environment where loud music is condoned. The video however is muted and can be viewed without bothering others and still add to the experience.

You will however see some event triggers in the button element. On an click event the buttons utilize the HTML5 Audio API to play and pause respectively. The onclick is an HTML element that will execute the JavaScript that follows. In this case we have two buttons one that calls audio.play() command to play the audio when it’s paused. After that we have the button which calls audio.pause().

I wasn’t satisfied with just a play and pause so I added a progress bar under the buttons so our users can see where we are in the audio track. Within our HTML, in our bg-music div we add the following:

<br>
<progress id="seekbar" value="0" max="1" style="width:200px;"></progress>

Within the progress bar we add the id of seekbar so the following JavaScript will find it. Our challenge is to figure out a way to read out the progress of the track. Here is how I did it, in our main.js file I put in the following code:

$('#audio').on('timeupdate', function() {
    $('#seekbar').attr("value", this.currentTime / this.duration);
});

This is where our jQuery comes in. Our first task is to find the audio element and set it to update the time for use every millisecond. JavaScript reads time in milliseconds. We then create a function to look for our seekbar id and modify the attribute using jQuery’s attr() command to get the value from our progress bar. We then take the current time and divide it by the duration of the track, and change the value from our progress bar to match the quotient.

Additionally I added some CSS to our progress bar area to make it clear visible to our users:

.bg-music {
	position: absolute;
	z-index: 9999;
	background-color: rgba(255, 255, 255, 0.25);
	border-radius: 5px;
	margin: 5px;
}

That’s all there is to it. There are one caveat that I would like to point out before ending. with both the audio and video tag you can always declare the controls attribute which does all the work for us and creates a default player. I wanted to go through making a custom one because we all know the default anything doesn’t always work out on our projects. Sometimes we need to make our own. The code would look like this:

<audio id="audio" autoplay="true" loop="true" controls=”true” src="vid/birth.mp3"></audio>
1 reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply