SteveSoft

Interactive HTML5 Video

2012-02-20T21:48:00.000-08:00

So a good friend of mine who does video capture/editing for a living hit (Adam Kitter Media) me up the other day asking about interactive videos. In his opinion, they are the future of video online. Based on things I've seen online, I do not disagree. So he was asking me if I'd be interested in perhaps doing some of the programmatic work. Having no experience with video, I said I'd have to do some research on it. However, what I could say with certainty at that point was that there are two main video formats right now: Flash and HTML5. Since Flash is slowly being phased out, I told him the way to implement it should be HTML5.

Like video, my experience with HTML5 was almost zero so I had to learn some of things required. The first thing I learned was that putting a video on a page with HTML5 is very easy! Honestly, I spent more time trying to locate a video file in .mp4 and .ogg on my computer than getting the thing to work.

Code required to play a video in HTML5:

< html>
    < body>
        < video id="theVideo" width="480" height="360" controls="controls">
            < source src="fileName.mp4" type="video/mp4" />
            < source src="fileName.ogg" type="video/ogg" />
            Your browser does not support the video tag.
        < /video>
    < /body>
< /html>

The keen observer will note, that there are two video files within the video tag above. In the perfect world, one file format would work for all browsers (hehe or there would one browser to rule them all), however we do not live in a perfect world and not every browser supports all file types. As of this writing, the HTML5 video player supports three file types: MP4, WebM, and OGG. A combination of two of those file formats should cover all the major HTML5-supporting browsers (IE 9+, FF 4+, Chrome 6+, Safari 5+, and Opera 10.6+). If I use the code snippet above as an example, Safari loads the .mp4 video just fine, but Firefox does not and it falls back on the .ogg file. If the browser supports none of video files or does not support HTML5 video, you will get the error message.

The code snippet above isn't very interactive (minus the play/pause button), so I began looking for ways to move about the video to make it "interactive". For a first-pass implementation, I decided to create a set of "buttons" that allow the user to jump around the video (read: colored divs with onclick events).

For this implementation, I made use of two important time fields: currentTime and duration (there are others). Both are fairly self explanatory, duration is the length of the video, and currentTime is the time index the video is currently on - both values are seconds as counted in floats.

From my research, I gathered that there are a number of ways to implement the "buttons" I wanted. However, I decided to use jQuery to handle the onclick events. Basically, I had each button adjust the currentTime attribute to a different point in the movie (beginning, 1/3, 2/3, end).

$('#link1').click(function() {
    var video = document.getElementById("theVideo");
    video.currentTime = 0;
});

$('#link2').click(function() {
    var video = document.getElementById("theVideo");
    video.currentTime = (video.duration - (video.duration * 0.666));
});

$('#link3').click(function() {
    var video = document.getElementById("theVideo");
    video.currentTime = (video.duration - (video.duration * 0.333));
});

$('#link4').click(function() {
    var video = document.getElementById("theVideo");
    video.currentTime = video.duration - 1;
});

Once I had the time index changing working I just slapped a little styling on the buttons and voila! My first pseudo-interactive HTML5 video player. In retrospect, the most difficult of building this was locating a place to host the videos for this blog post.

I still have a ways to go before I'm up to the likes of these videos but at least I have something to look forward to:

My Interactive Video

FYI: The buttons work even if the video hasn't buffered yet, just look at the progress bar.

Jump to Beginning of movie

Jump 1/3 of the way into the movie.

Jump 2/3 of the way into the movie.

Jump to End the movie.

Your browser does not support the video tag.

For my next experiment into HTML5 video, I'm going to do some more research into the canvas to see if I can't make the buttons right within the video.

Making them click

2012-01-06T13:04:00.000-08:00

I recently completed the book Neuro Web Design: What makes them click? by Susan M. Weinschenk (link), and I must say that there are quite a few times throughout reading it that I would just stop and say "Mother F*****!". Why? Not because the book was bad, in fact the book was very good. No the reason I would say that would be because I'd realize that I'd been sucked into things online without me even being aware of it.

I wont give away everything the book talks about, but I'll say what I'm taking away from it.

Many of the decisions we make are unconscious ones. If we can engage the different parts of the brain then we can help facilitate unconscious decisions.
Humans are social creatures. We like to be connected to others, do what others do, and we need to feel like we belong. Adding social functions to sites can be very powerful tools. Ask yourself this, how many times have you bought something because someone you know told you it was good? Or how often do you watch videos on YouTube because they were located in the "Recommended" section of the site.
Knowing that something is scarce or only available for a short time increases your desire for that something.
Less is more.
If you want to sell something, list that item first.
Getting people's attention is very simple if you:
- Change things
- Display food
- Imply sex
- Talk about "You"
Attractive people make things they are advertising attractive (at least in our heads)
Unleashing emotions in people is very powerful, especially when people feel like they are about to lose something
Stories grab attention
Like the old saying goes "A picture is worth a thousand words". Use of pictures is far more memorable than text.

Confronting my boss...

2011-11-25T12:36:00.001-08:00

Disclaimer: While some of the comments I'm making in this post may portray my boss in a bad light, I actually believe he is an awesome man to work for and I respect him greatly.

For the most part, I am a fairly laid-back guy. I can typically deflect or vent most things that get on my nerves. Recently my parents were over for dinner and we somehow got on the conversation about how I don't really ever get angry. My spouse said that in the six years I've been with her, I've gotten mad maybe three or four times.

Having said that, there was one occasion at work where, I didn't necessarily get mad, but had to correct a problem that really started to grind my gears.

My company had been the software developer for a fortune 500 company for nearly a decade and as with all good things, the contract eventually came to an end. Prior to the actual end date however, the general feelings towards the company we were working for was rather neutral to negative. As our company's role was being replaced by another software company, it was inevitable that people would begin making statements like "they're going to crash and burn without us". These did happen and had been for a little while (I even took part in them at times), but eventually it began to nag at me.

At the time I was a business analyst and my boss was the product owner. Together, we were both main contacts for the customer and as a result, both of us were responsible for being the representatives for the customer. While I hadn't really thought about it much until then, we were also the leaders of our team. And as a result, we should be leading by example. My boss had been the product owner for the team for the nearly the whole length of my near three years with the company at that point and obviously had much stronger feelings about the lost contract than I did. By extension, he was much more vocal about the choices they were making than me or anyone else on the team.

A prime example was us being in a conference call with the customer, and after what we felt was a bad decision by the customer, my boss muted the call, began to harp on the customer to me about how bad of a decision they're making and then return to the call. These little angered complaints repeated a few times a day over the course of a few weeks was enough to get on my nerves.

Since being under his wing, he's told me that anytime I have issues, whether they are coworker, HR, or externally related, that I could pull him aside and we could chat about it. Well one day I decided to take him up on his offer, and oh my, that was the most nervous I've ever been around him - and he was the same guy I took my internship interview with. During the conversation, I think I just plowed through what was on my mind... my face getting hotter and hotter the more I talked. I'm sure that my sentences began all running together as I just wanted to get it all off my chest and by the end of it, my heart felt like it was going to pound out of my chest... especially in the few moments he took to respond.

I think what surprised me most was his reaction because A) I'm sure he wasn't really expecting that kind of talk, and B) no one likes to hear about bad things they are doing. But (if memory serves) what surprised me most was his first words back to me were "Thank You". He did realize that we (he and the team) were becoming rather unprofessional when talking about our customer. And like inappropriate jokes (ex. racial, etc), you get so used to them that eventually you end up telling them to the wrong person... and you never want that when your trying to portray your company as professional.

Having looked back on it, if we didn't have the open professional relationship we did, the meeting probably would have had to have gone through the "official channels" (you know, closed door meetings with HR who have meetings with the problem person later) and that probably just would have aggravated him.

I suppose if there is a point to the story, it is that I hope everyone can have as open a relationship with their bosses as I did mine. Not only did it make working for/with him that much better, but it made dealing with workplace issues that much better. Also, speaking to your boss about problems with them is hard! If you do find yourself having to go to your boss about something like that, make sure it comes out in a clear and professional manner... much clearer than I'm sure mine did.

CSS :before and Internet Explorer 7

2011-10-31T15:55:00.000-07:00

Well, if your company is like mine, you have a requirement to support Internet Explorer and versions as old as seven. While supporting Internet Explorer isn't in itself a huge deal, attempting to use new-age CSS with Internet Explorer 7 is.

For me, the CSS psuedo tags :before and :after are particularly useful. Many of the pages I've had to implement recently have included funky icons before menu items. While this wouldn't normally be a big deal as you would think I'd just add the image to the menu's HTML and be done with it. Well, that would work all fine and well except that we have custom built controllers that will automatically generate the menu for us. The reason for this is so that each user of our site can have their own custom made menu. So this is where the problem is: how do I add the funky images to a menu I cannot edit. The answer: Do it with CSS!

I implemented the menu icons using the CSS's :before tag. And it worked beautifully in Firefox, IE8 and IE9; however IE7 displays nothing. So I did a quick Google search and found that it is possible to do this in IE7.

The keen observer will note from that page that the implementation uses the :first-child tag to apply the image to. The problem I observed with this was the image I wanted essentially became a repeating background for the menu item it was to be in front of. So to get around this, I decided to implement a little JQuery script to insert a new element before the menu item.

JQuery:


$(window).load(function () {
    if ($.browser.msie && $.browser.version >= 7 && $.browser.version < 8) {
        var newP = document.createElement('p');
        var newParaText = document.createTextNode("");
        newP.appendChild(newParaText);
        $('#menu-item-selector').before(newA);
    } 
});

HTML (in an IE7-specific style tag):


#menu-item-selector>*:first-child { 
   background: url('path-to-image');
   height: 5px;
   width: 3px;
   position: relative;
   padding: 0;
   margin: 0 0 0 10px;
        }

By inserting a blank <p> before the menu item, the :first-child css would be applied to the P instead of the menu item. And the final result looked like this:

I will note, I didn't feel this was the most graceful approach out there as it uses some of IE7's holes to work, but with our support for IE7 being dropped as soon as our user base drops below 5% on it (currently ~10%), I decided not to worry about it.

About this blog

2011-10-28T13:50:00.001-07:00

In order to better mankind or at least the lives of my fellow front-end developers, I felt it responsible of me to begin a blog as a placeholder for my various things learned in the I.T. world. While this will most likely focus on HTML, CSS, etc. There may be times where I deviate and talk about work-related things that were particularly awesome or troubling (I'll have one about putting my boss in his place soon!).

So I hope you enjoy the contents of this blog and/or find them useful. I most likely did.

Thanks for reading.