WEB DESIGNER &
FRONT-END DEVELOPER

Hi there.

Photo of Adam DavisI'm Adam Davis, and I am a huge nerd and Internet veteran. We got our first "computer" in 1986 - a TI-99/4A, and I used to spend hours inputting BASIC into it from program books to create simple games. My first taste of the internet was in 1994 when we got a 486 computer and I daialed into a local BBS on a 2400 baud modem. Around 1998, I started playing with HTML and building websites for fun, then in 2005-2010 I built and maintained three WordPress-based sites for a morning talk radio host whom I worked for as an editor, producer and general tech guy. These sites included e-commerce, mailing lists, ticketing, user accounts and password protected sections, and podcasts.

Always interested in experimenting with microphones, speakers, and recording, I inadvertenty fell deep into the live event buisines. What started as running sound for bands on the weekend for fun and extra money eventually turned into a crazy lifestyle with long, late hours and no semblance of a normal schedule.

I am now leaving the event world and moving into development. In my mind, mind, web programming and audio are very closely related - it's all about getting the signal flow right and troubleshooting when it doesn't work. Finding creative solutions to problems is one of my favorite things to do.

Casa Curator - Interior Design Blog

CasaCurator

The requirement for this project was to create a responsive blog site, and include a video using the HTML5 <video> tag. I did not want to simply satisfy the minimum requirements and just throw a video on a page. I wanted to take it a few steps further by using several "hero" videos within the carousel which could highlight popular or new articles.

For the carousel, I used Slick, and the Vide jQuery plugin to create the video background in the carousel. The videos are from Coverr, and were further optimized using Handbrake..

In the first itteration of the project, the videos were played via a JavaScript function using an array and event handlers to create a "playlist" which populated the <src> section of the <video> tag. These videos were actually behind the carousel, which I found was a clunky way to do it, and the videos did not always sync up with the article card that was being displayed over it. Another iddue that arose with this method was a white flash in between videos on slower systems. As a workaround for this, I added a "fader" class to my "surround" div in the carousel, which gave it a white background and used another JS function to fade the opacity from 0 to 1 every 10 seconds to cover the the raw transition between videos. that af Ideally

Details and Code Snippets

The carousel divs are structured like so:

<div class="surround" id="m2">
<div class="articlebox">
<div class="articlecontainer">
<h2>Vacation Home Vibes</h2>
<a href="#vibes">
<p class="readbtn">Read Article</p>
</a>
</div>
</div>
</div>

  • .surround: sets the height and width, and sets the overflow to hidden.
  • .articlebox: sets the size, location, and transparency of the whole "card" within the .surround
  • .articlecontainer: contains the text and provides the gold border
  • .readbtn: styles a <p> tag link to the article as a button

Font size is set by the <h2> within the .articlecontainer div. The id only comes into play as a fallback for small mobile screens where it's just not practical to play videos. Instead of the video, a gif version of the video is used as the background of the "surround" div.

Since the videos would not play within the carousel, underneath the entire Slick slider div is the video background contained inside the "opening" div:

<div id="opening">
<div id="videoBlock" class="fader video-container">
<video id="vid" preload="auto"></video>
</div>

As you can see, no video source is specified here, just an id. I used a JavaScript array to insert the video source into the video tag, and an event handler to load and play the series of videos:


		window.onload = function(e) {

		var videoSource = new Array();
		videoSource[0] = 'video/Handyman.mp4#t=5';
		videoSource[1] = 'video/Home.mp4#t=7';
		videoSource[2] = 'video/Chandelier.mp4#t=4';
		videoSource[3] = 'video/Fresh-Paint.mp4#t=5';
		videoSource[4] = 'video/Fresh-Paint.mp4#t=5';

		var poster = new Array();
		poster[0] = 'video/Handyman.jpg';
		poster[1] = 'video/Home.jpg';
		poster[2] = 'video/Chandelier.jpg';
		poster[3] = 'video/Fresh-Paint.jpg';
		poster[4] = 'video/Fresh-Paint.jpg';

		var i = 0;
		var videoCount = videoSource.length;

		function videoPlay(videoNum) {
		document.getElementById("vid").setAttribute("src", videoSource[
		videoNum], "poster", poster[videoNum]);
		document.getElementById("vid").load();
		document.getElementById("vid").play();
		}
		document.getElementById('vid').addEventListener('ended', myHandler,
		false);

		videoPlay(0);

		function myHandler() {
		i++;
		if (i == (videoCount - 1)) {
		i = 0;
		videoPlay(i);
		} else {
		videoPlay(i);
		}
		}
		}
		
.style

Details and Code Snippets

Retro Palm Springs

Photo of Del Marcos Hotel

About the project

More Hotels...

Dobbin Steet Custom Bicycles

Photo of Tramway Gas Station

about

More Mid-Century Structures...