Posts Tagged ‘video’

jQuery – Creating Elements Part II: HTML5 Data Attributes

Friday, July 13th, 2012
jQuery – Creating Elements Part II: HTML5 Data Attributes

Just when I think HTML5 sucks…

It still annoys the crap out of me, but there are some cool things in there. I just hate when people throw that word around like “We want to redo this flash to be HTML5.” What the hell does that mean exactly? And if you ask them, they have absolutely no idea. Its just a buzz word they are throwing around trying not to sound like they are out of touch. On a current project that I am working on, I came across a problem I needed to solve.

I needed to load videos on a page using the HTML5 video tag, with a flash fall back. The problem though is that there were about ten of them on the page, and the browser was reading the source tags and loading them. If this were just one video, this wouldn’t be a problem, but there were more and it was slowing things down.

The Solution

Which was to load the video on the fly when the flyout was triggered, but I needed to figure out how to get the right video to go with it. This is how I solved it.

As usual we’ll start with the HTML. First we have the link that will open the modal window. You don’t need to see the javascript that actually controls the modal, cause you can figure that out on your own. DO pay attention to the attributes on them.

(more…)

Adventures In Adding Large Video Files In WordPress

Friday, January 13th, 2012
Adventures In Adding Large Video Files In WordPress

Adding video to WordPress seems easy, right?

Why am I writing this post? Because if you have followed this blog for a while, you know I like not only passing what I’ve learned along to up and coming web developers, but I use this as a reference sometimes. I recently completed a freelance project that involved moving very large video files into a new WordPress install, and I came across multiple problems that were hard to find answers to. Adding video looks like it would be easy, right? Just click that little Upload/Insert button, drag/drop the file onto the page, and BAM! Video file is in the media library. What could POSSIBLY go wrong? I’ll start with the background to the project, and go over how I solved the issue.
(more…)

How To Use HTML5 Video Tag – The Basics

Tuesday, October 5th, 2010
How To Use HTML5 Video Tag – The Basics

Not as scary as I thought

NOTE: I did have to configure my server so that the ogg MIME type would handle the .ogv extension. If you use Hostgator.com, this is easy. Let me know if you need help.

You’ve all heard of the new HTML5 video tag, but if you are like me, you have seen an example and were like wtf? I was, until a few days ago. It is actually pretty easy, and only takes a few minutes. There are some things you need before you actually get going with it:

  • MP4 video file – for Webkit
  • ogv video file (Theora codec) – for Firefox
  • flv file – for everyone else
  • swfobject.js – for the swf

(more…)