FlasHTML5 Video: The JavaScript Library and WordPress Plugin

Posted on July 30th, 2010 by Norm McGarry

There is nothing better than a little friendly competition, right? Mike came to me with the request to make his post a little more modular and into a javascript library that could be shared for the masses. Don’t get me wrong, I pretty much hate javascript unless it is wrapped by JQuery, but any opportunity to improve and take credit for another person’s hard work sounded too fantastic to pass up. So here is my update to Mike’s post — the BETTER way to implement video that is compatible with mobile phones, difficult browsers and HTML5-lovers/Flash-haters!

I apologize if my javascript coding techniques are not up to javascript-guru standards.

FlasHTML5Video.js

Implementation

Although javascript is not a object-oriented language, I tried to write this class in a object-oriented way that allows for multiple instances on a page. The method is very simple to the experienced programmer and only takes a few lines of code to implement.

function init()
{
	var video = new HTML5Video();
 
	video.init({
		outputElementId:'container',
		useFlashFirst:false,
		mobileVideoObject: new HTML5VideoObject(480,192, {"autobuffer":"autobuffer","controls":"controls"}),
		mobileH264: new HTML5VideoAsset("telematics_mobile.mp4","video/mp4"),
		mobilePosterImage: new HTML5VideoImage("telematics_mobile.jpg", 480, 192, "telematics", "No video playback capabilities."),
		androidPosterImage: new HTML5VideoImage("telematics_mobile_play.jpg", 480, 192),
		desktopVideoObject: new HTML5VideoObject(980, 390, {"autobuffer":"autobuffer","controls":"controls"}),
		desktopH264: new HTML5VideoAsset("telematics_desktop.mp4","video/mp4"),
		desktopAdditionalVideos: [new HTML5VideoAsset("telematics_desktop.ogv","video/ogg"), new HTML5VideoAsset("telematics_desktop.webm","video/webm")],
		desktopFlashObject: new HTML5VideoFlashObject("player.swf", 980, 414, {"allowFullScreen":"true", "flashvars":"file=telematics_desktop.flv&amp;image=telematics_desktop.jpg"}),
		desktopPosterImage: new HTML5VideoImage("telematics_desktop.jpg", 980, 390, "telematics", "No video playback capabilities.")
	});
 
	video.detect();
}

Now, most of the parameters should be pretty self-explanatory. However, there are a few objects that are used that need to be understood.

/*
This object represents the actual video tag in HTML5.
@param width Integer of the width of the video.
@param height Integer of the height of the video.
@param params Object of parameters that can be used on the video tag. Examples are:
autoplay autoplay If present, then the video will start playing as soon as it is ready
controls controls If present, controls will be displayed, such as a play button.
loop loop If present, the video will start over again, every time it is finished.
preload preload If present, the video will be loaded at page load, and ready to run. Ignored if "autoplay" is present.
src url The URL of the video to play
*/
new HTML5VideoObject(480,192, {"autobuffer":"autobuffer","controls":"controls"});
/*
This object represents the different sources for the HTML5 video object.
@param src Source path to the video.
@param type Type of video. Examples:
video/mp4
video/ogg
video/webm
*/
new HTML5VideoAsset("telematics_mobile.mp4","video/mp4");
/*
This object represents the fallback image and the poster image for the video.
@param src Source path to the image.
@param width Integer of the width of the video.
@param height Integer of the height of the video.
@param alt Alt tag to the image
@param title Title for the image
*/
new HTML5VideoImage("telematics_mobile.jpg", 480, 192, "telematics", "No video playback capabilities.");
/*
This object represents the flash object implementation.
@param src Source path to the swf to load.
@param width Integer of the width of the flash.
@param height Integer of the height of the flash.
@param params Object of parameters that can be used on the flash implementation. Examples are:
flashvars Flash vars passed to the flash module: Example: "file=telematics_desktop.flv&amp;image=telematics_desktop.jpg"
allowFullScreen If present, controls will be displayed, such as a play button.
wmode Window mode
bgcolor Background color
allowscriptaccess Whether to allow script access.
See more: http://kb2.adobe.com/cps/127/tn_12701.html
*/
new HTML5VideoFlashObject("player.swf", 980, 414, {"allowFullScreen":"true", "flashvars":"file=telematics_desktop.flv&amp;image=telematics_desktop.jpg"});

API Options

/*
outputElementId The string id of the HTML element to inject the code into. This method is used when the code is placed into the body of the page. Optionally, leaving this option out and placing the script tag inside the <body/> will output the code directly into that location. Note: <b>This only works using the "onload" method of implementation.</b>
useFlashFirst This is an optional boolean value for flash lovers that will use flash before using HTML5 as a fallback. Defaults to false (don't tell my flash coworkers). Also, this option requires the adobe detection kit js file. See example below.
mobileVideoObject A video object for mobile users (ipod, iphone, ipad, ios, blackberry, android). Allows a different sized video than desktop users.
mobileH264 The video asset to use by default.
mobilePosterImage The default poster image to use for all mobile devices (Android is different, see androidPosterImage below)
androidPosterImage Android phones do not currently overlay a play button on top of the video and require a slightly different implementation, for that reason, we allow a separate image for android phones with a play button in the poster image itself.
desktopVideoObject The video object that specifies the size of the video for desktop users.
desktopH264 The default h264 video for desktop users.
desktopAdditionalVideos Some browsers support different video formats. You can add additional ones and browsers will process from top-to-bottom until a compatible video is found.
desktopFlashObject The flash object to embed for the flash fallback.
desktopPosterImage The desktop poster image and fallback image in case a incompatible browser without flash is found.
*/

Implementation/Usage

To initialize the library, there are two implementation options:

Document <head></head> tag method.
Inline html method.

Document <head></head> tag method.

 
<head>
	<!-- You MUST include this file. -->
	<script type="text/javascript" src="js/html5.js"></script>
	<!-- Optional file to include if you are using flash as the default and HTML5 as a fallback. -->
	<script src="AC_OETags.js" language="javascript" type="text/javascript"></script>
	<script type="text/javascript">

	function init()
	{
		var video = new HTML5Video();
 
		video.init({
			outputElementId:'container',
			useFlashFirst:false,
			mobileVideoObject: new HTML5VideoObject(480,192, {"autobuffer":"autobuffer","controls":"controls"}),
			mobileH264: new HTML5VideoAsset("telematics_mobile.mp4","video/mp4"),
			mobilePosterImage: new HTML5VideoImage("telematics_mobile.jpg", 480, 192, "telematics", "No video playback capabilities."),
			androidPosterImage: new HTML5VideoImage("telematics_mobile_play.jpg", 480, 192),
			desktopVideoObject: new HTML5VideoObject(980, 390, {"autobuffer":"autobuffer","controls":"controls"}),
			desktopH264: new HTML5VideoAsset("telematics_desktop.mp4","video/mp4"),
			desktopAdditionalVideos: [new HTML5VideoAsset("telematics_desktop.ogv","video/ogg"), new HTML5VideoAsset("telematics_desktop.webm","video/webm")],
			desktopFlashObject: new HTML5VideoFlashObject("player.swf", 980, 414, {"allowFullScreen":"true", "flashvars":"file=telematics_desktop.flv&image=telematics_desktop.jpg"}),
			desktopPosterImage: new HTML5VideoImage("telematics_desktop.jpg", 980, 390, "telematics", "No video playback capabilities.")
		});
 
		video.detect();
	}

	</script>
</head>
<body onload="init()">
	<div id="container"></div>
</body>

Inline html method.

<html>
	<head>
		<!-- You MUST include this file. -->
		<script type="text/javascript" src="js/html5.js"></script>
		<!-- Optional file to include if you are using flash as the default and HTML5 as a fallback. -->
		<script src="AC_OETags.js" language="javascript" type="text/javascript"></script>
	</head>
	<body>
		<div id="container2" style="margin-top:30px;">
			<script type="text/javascript">

				var video = new HTML5Video();
 
				video.init({
					useFlashFirst:false,
					mobileVideoObject: new HTML5VideoObject(480,192, {"autobuffer":"autobuffer","controls":"controls"}),
					mobileH264: new HTML5VideoAsset("telematics_mobile.mp4","video/mp4"),
					mobilePosterImage: new HTML5VideoImage("telematics_mobile.jpg", 480, 192, "telematics", "No video playback capabilities."),
					androidPosterImage: new HTML5VideoImage("telematics_mobile_play.jpg", 480, 192),
					desktopVideoObject: new HTML5VideoObject(980, 390, {"autobuffer":"autobuffer","controls":"controls"}),
					desktopH264: new HTML5VideoAsset("telematics_desktop.mp4","video/mp4"),
					desktopAdditionalVideos: [new HTML5VideoAsset("telematics_desktop.ogv","video/ogg"), new HTML5VideoAsset("telematics_desktop.webm","video/webm")],
					desktopFlashObject: new HTML5VideoFlashObject("player.swf", 980, 414, {"allowFullScreen":"true", "flashvars":"file=telematics_desktop.flv&image=telematics_desktop.jpg"}),
					desktopPosterImage: new HTML5VideoImage("telematics_desktop.jpg", 980, 390, "telematics", "No video playback capabilities.")
				});
 
				video.detect();

			</script>
		</div>
	</body>
</html>

Examples

Flash with HTML5 fallback (inline implementation)
HTML5 with Flash fallback ( <head> implementation)
Two videos on one page example: one using <head> implementation, one using the inline implementation

Download

Javascript library file
Javascript library with example HTML source code.
Entire package with examples and test videos

WordPress Plugin

Michael: Whoa Whoa Whoa… If there’s gunna be any glory stealing going on here, I’m not going to miss out. That’s right; I’m cutting in on Norm’s post and taking back some thunder.

Leveraging his newly minted JavaScript library, I have created a WordPress plugin to simplify things for those the more bloggily inclined. Simply install the plugin, use the following short codes, paste in the main parameters from the library function, and the plugin will do the rest. There is also an admin panel with documentation. Enjoy!

[FlasHTML5]
useFlashFirst:false,
mobileVideoObject: new HTML5VideoObject(480,192, {"autobuffer":"autobuffer","controls":"controls"}),
mobileH264: new HTML5VideoAsset("http://labs.byhook.com/html5video/telematics_mobile.mp4","video/mp4"),
mobilePosterImage: new HTML5VideoImage("http://labs.byhook.com/html5video/telematics_mobile.jpg", 480, 192, "telematics", "No video playback capabilities."),
androidPosterImage: new HTML5VideoImage("http://labs.byhook.com/html5video/telematics_mobile_play.jpg", 480, 192),
desktopVideoObject: new HTML5VideoObject(980, 390, {"autobuffer":"autobuffer","controls":"controls"}),
desktopH264: new HTML5VideoAsset("http://labs.byhook.com/html5video/telematics_desktop.mp4","video/mp4"),
desktopAdditionalVideos: [new HTML5VideoAsset("http://labs.byhook.com/html5video/telematics_desktop.ogv","video/ogg"), new HTML5VideoAsset("http://labs.byhook.com/html5video/telematics_desktop.webm","video/webm")],
desktopFlashObject: new HTML5VideoFlashObject("http://labs.byhook.com/html5video/player.swf", 980, 414, {"allowFullScreen":"true", "flashvars":"file=http://labs.byhook.com/html5video/telematics_desktop.flv&image=http://labs.byhook.com/html5video/telematics_desktop.jpg"}),
desktopPosterImage: new HTML5VideoImage("http://labs.byhook.com/html5video/telematics_desktop.jpg", 980, 390, "telematics", "No video playback capabilities.")
[/FlasHTML5]

See the plugin in action.
Download the plugin.

html5, Javascript, Utilities, video

116 Responses to “FlasHTML5 Video: The JavaScript Library and WordPress Plugin”

Newer Comments »

Wholesale cheap jerseys says:

December 19, 2011 at 10:21 pm

Wow, I’m obviously not being creative enough, haha…Great work!

Reply
Cheap football jerseys says:

December 19, 2011 at 8:14 pm

It makes me feel so surprise.I never know there is such a wonderful place that I can find what I need

Reply
ugg boots on sale says:

December 19, 2011 at 3:24 am

These fashion-forward UGG Mayfaire boots total any casual look.the Mayfaire takes a basicsilhouette to some fresh, style forward style.A metal logo plate adds signaturedetail for the heel. A multi-tonal zipper provides effortless suit in the side of the 8inch shaft. moisture-wicking sheepskin cushioninginsole regulates temperatures in warm and cold climates.

Reply
Buy Generic Zyban says:

December 16, 2011 at 4:40 am

Please share more collection like this one, I learned a lot.Excellent post.keep on sharing with us such nice post.

Reply
Drew Brees jerseys says:

December 16, 2011 at 12:56 am

quickly after the brand new agreement was announced, Loomis mentioned the top workplace was self-confident Payton wished to sustain what he has assisted develop in New Orleans instead than start much more than somewhere else yangchengbin/201112

Reply
bridal wedding dresses says:

December 11, 2011 at 9:47 pm

nice post , i like it , thanks for sharing it . have a nice day.

Reply
NFL Accessories says:

December 11, 2011 at 8:06 pm

Put on Atlanta Falcons Red Fitted Hat, support your favorite team. Offering a flat visor flex with a unique 2-in-1 shape, the hat delivers a remarkably comfortable feel. It features a raised team drawings, including logo and an embroidered team name. Atlanta Falcons Red Fitted Hatis the best way to show off your favorite team with a perfect fit, just for you! yangchengbin/201112

Reply
Snapback Hats says:

December 9, 2011 at 4:14 am

I’m waiting for your more smart advice in future. thanks.

Reply
NFL Hats says:

December 7, 2011 at 1:31 am

His times using the Bears started to be numbered using the signing of Marion Barber, and any attempts to business him went nowhere.
To make room, the Cardinals released tight complete Stephen Spach, linebacker Quan Sturdivant and defensive complete Ronald Taley. Taylor, who turns 32 on Sept. 22, passed his actual on Monday,but do not exercise using the team. He is anticipated to participate in Wednesday’s workout and be available when Arizona opens its time period Sunday at house against the Carolina Panthers.yangchengbin/201112

Reply
cheap jerseys says:

December 7, 2011 at 1:31 am

Hello dude, just browsing the networks looking for some stuff and came across your page. I am engraved by the content that you have on this website. It shows how good you follow this subject. Bookmarked this blog, will get back for further. You, buddie, ROCK!!!

Reply
buy wedding dress says:

December 5, 2011 at 2:59 am

Other great resources:

Reply
Cheap NHL Jerseys says:

December 3, 2011 at 1:44 am

For the target that countrywide MLB LEAGUE baseball adventure shot this minds about countless hockey enthusiasts, to merely acquire an enormous amount of rugby Mementos for example countrywide MLB LEAGUE jerseys, much less difficult, t shirts to show its guidance with their well-liked workforce or maybe musician.

Reply
Cheap authentic NFL jerseys says:

December 2, 2011 at 10:17 pm

Cheap authentic NFL jerseys
authentic NFL jerseys
Wholesale Cheap authentic NFL jerseys

Reply
Cheap Nike Shoes says:

December 1, 2011 at 6:55 am

Thank you for sharing, this information is useful to me. good quality

Reply
Cheap Nike Shoes says:

November 22, 2011 at 10:11 pm

Thank you for sharing, this information is useful to me. good quality
http://www.cheapshoes-handbags.us/mens-shoes-c-1361.html?zenid=0208bc2cad5c68bdb9896e95e91aef2a

Reply
cheap nfl jerseys says:

November 18, 2011 at 1:28 am

Thank you for taking the time to publish this information very useful!I’m still waiting for some interesting thoughts from your side in your next post thanks.

Reply
Wholesale Jerseys says:

November 17, 2011 at 9:09 pm

Excellent publish. I’m dealing with several these troubles.

Reply
Cheap NFL Jerseys says:

November 16, 2011 at 8:49 pm

It seems that you’ve put a good amount of effort into your article and I want a lot more of these on the World Wide Web these days. I truly got a kick out of your post. I do not have a bunch to to say in reply, I only wanted to register to say fantastic work.

Reply
cheap jerseys says:

November 16, 2011 at 2:56 am

thanks for your sharing.

Reply
wholesale jerseys says:

November 14, 2011 at 2:11 am

marketed T-shirts on-line or locally inside the level permitted by law. fees are large you the independence to appoint their individual fees and compensated a reasonable worth for the profit of T-shirts.

Reply
ugg boots says:

November 13, 2011 at 10:20 pm

Thank you for posting the great content.I was looking for something like this.I found it quiet interesting, hopefully you will keep posting such blogs..Keep sharing

Reply
Cheap Jerseys says:

November 9, 2011 at 1:30 am

Inside of a broader part, sports some athletes often provide their ok’d jerseys to get publicity and perhaps for charity that really help them get hold of donations for your noble cause on behalf of a NGO or a financial institution. Hence, there’s a simple big demand from customers for jerseys. Manufacturers often have trouble to stay informed about the demand from customers especially in advance of any significant sport occurrence.

Reply
ugg boots clearance says:

November 8, 2011 at 3:58 am

XHPJOYQCC1F5HTFWXZ
all types of UGG boots for women and men to enjoy their life time

Reply
Donald Driver Jersey says:

November 7, 2011 at 1:44 am

Very happy to see your article, I very much to like and agree with your point of view.

Reply
Clay Matthews Jersey says:

November 7, 2011 at 1:43 am

assume you are an expert on this subject. Well with your permission allow me to grab your RSS feed to keep up
to date with forthcoming post. Thanks a million and please carry on the rewarding work.

Reply
Charles Woodson Jersey says:

November 7, 2011 at 1:43 am

Simply wish to say your article is as surprising. The clarity in your post is simply excellent and i can

Reply
Charles Woodson Jersey says:

November 7, 2011 at 1:42 am

Hey, your website is quite interesting.. And it was something I can definitely connect with Ill
constantly visit in your blog therefore i hope you continue making fun and interesting posts such as this one…

Reply
Aaron Rodgers Jersey says:

November 7, 2011 at 1:40 am

I definitely liked reading everything that is written on your blog.Keep the information coming. I liked it!

Reply
NFL jerseys says:

November 6, 2011 at 8:37 pm

Chicago Bears and RB Matt Forte are on hold Forte was looking for an extension as he headed to the fourth and final yr on his rookie contract,The Bears have been prepared to negotiate, however the talks are getting tabled for now.yangchengbin/201111

Reply
Cheap jerseys says:

October 27, 2011 at 9:46 pm

very nice post, i certainly love this website, keep on it.

Reply
Baseball Hats says:

October 27, 2011 at 9:39 pm

It is an interesting approach. I commonly see unexceptional views on the subject but yours it’s written in a pretty unusual fashion. Surely, I will revisit your site for additional info. Thanks for the article.
I really like this website , and hope you will write more ,thanks a lot for your information.

Reply
Nick Tann says:

October 27, 2011 at 10:40 am

Ok if you’re a code monkey but for a lesser mortal who just wants an uploaded video to play?

I have it installed and activated, but can’t see how to make it work.

Reply
iPhone Application Developer says:

October 27, 2011 at 5:43 am

This is the perfect blog for anyone who wants to know about this topic. You know so much its almost hard to argue with you (not that I really would want…HaHa).

Reply
supra shoes says:

October 25, 2011 at 8:13 am

very happy to read your blog.Thank you for sharing this article.It is great!
Thanks for sharing this nice post.I will keep your article in my idea.

Reply
Moncler Down Jackets says:

October 25, 2011 at 1:09 am

That was the prospect, we had in the future via and that we gotit completed.”Santana joined the Co Rockies Jerseys game5-0 which has a 3.86 ERA as part of his last 5 begins as well as was presented an early on lead whenthe Angels scored a couple of in the to start Ranger starter H.J. Wilson. However theRangers could actually keep coming back for his or her 6th directly earn and third straightover the particular Angels.

Reply
Justin Bieber Shoes says:

October 19, 2011 at 3:52 am

we can provide you with high quality, THANKS.

Reply
wholesale jerseys says:

October 17, 2011 at 6:10 am

Steve Jobs Stanford Speech – this is a bitter franklin marshall,franklin marshall pill count, but I think my patients need it.

Reply
Authentic NFL Jerseys says:

October 14, 2011 at 2:17 am

Another large web site for is definitely wholesale soccer jerseys profootballlstuff.com, where site visitors possess quite a number to be able to decide on form and will choose the team of your choice along with go up to sort through your inventory. Most products on this web site is accredited and also delivery can be pretty reliable.

This specific website is not only excellent pertaining to shirts along with less difficult, however , pertaining to many other components for example lamps, NFL crafted household furniture, along with far more.

Reply
Authentic NFL Jerseys says:

October 13, 2011 at 3:52 am

is the fact that it’s your widest range as well as variety. Browsing on craigs list regarding things such as soccer shirts can be especially fulfilling, as it is unusual with regard to issues such as a good Eli Manning Jersey being sold with regard to rates just $15.double zero.Craigslist . Org is actually a different excellent method to watch out for wholesale soccer jerseys under a full price price ranges.

Reply
discount jerseys says:

October 11, 2011 at 2:34 am

Check out Norm’s new post for our easy to use javascript html5 video library. and WordPress plugin.

Reply
Alejandro Yanaculis says:

May 12, 2011 at 1:46 pm

Where can I find the player.swf for Flash fallback? I managed to get the plugin working everywhere except Firefox

Reply
giacomo says:

March 28, 2011 at 6:07 pm

do someone knows if mp4 files coming from android 2.2 works with this?

Reply
iPhone App says:

February 9, 2011 at 2:42 am

Fine information. Thanks so much, have a good day!

Reply
janko says:

February 8, 2011 at 3:55 am

Hi
I have installed the WordPress Plugin, but what does that mean:

…Simply install the plugin, use the following short codes, paste in the main parameters from the library function…

Where can i find the “library function”?
Some Scrennshot would be nice !)

Reply
Cristiano says:

January 28, 2011 at 10:33 am

Hi friends,

I found your WordPress plugin and I think it could be the solution to my problems! jeje but, it´s still a little bit dificult to use…

Could you guys make a UI where, in each post, the user just upload the video (or paste the video url) and fill/choose some parameters and the functions do the rest?

It could have an options page when you can choose to use it just in some custom post types, for exemple.

Thanks!!!

Reply
BayouGirl says:

January 20, 2011 at 3:09 am

This is an awesome plugin. But could you consider speaking down to the “little people” who don’t quite know the elusive coding language and give us some cut and dry 5 yr old instructions? =). Appreciate ya.

Look forward to seeing what else you come up with. Great work!

Reply
Stef says:

September 19, 2010 at 10:32 am

This is an amazing plug in. Congrats to you guys. I have one complaint. There is not instructions, no clear instructions on how to add video to the post, there’s not screen shot, no follow along, no adding video to WordPress for idiots. I’m trying to find the best, easiest plug available for a client to use in WordPress. I myself wouldn’t even know where to start to tell her how to do it. Any advice here guys?

Thanks

Reply
Steve says:

September 16, 2010 at 12:31 pm

I have finally found the solution for providing video on my Orange County video production website that most people can play without using a paid hosting plan like Vimeo. The last post was pretty right and a good link, however I tweaked it slightly to use a local swf player (JW Player) instead of a player hosted on the Flash site. I also used a fallback to a basic Quicktime embed instead of a fallback to html5 with mpeg4 and OGV files.

Here is the process I used:
_______________

Video Compression:

I used MPEG Streamclip to encode. Main settings are as follows:

- File Format = H.264 Video w/ AAC audio in an MPEG-4 Container!!!
- Audio = MPEG-4 AAC, Stereo, Khz (Auto), 128 kbps
- Use “Fast Start” (It’s greyed out in MPEG Streamclip, however it’s still enabled)
- Multipass
- No B-Frames
- Limit data rate to 700 Kbps.
- Better Downscaling
- Lower Field First
- Deinterlace Video (only if interlaced)
- Size = 320×240 (SD) or 320×180 (HD)
_______________

Code:

1. Download the Flash player from JW player at href=”http://www.longtailvideo.com/players/jw-flv-player/”>http://www.longtailvideo.com/players/jw-flv-player/

2. It doesn’t include the expressinstall.swf for some reason so make sure you download it. Instructions and a download link are located here:
http://blog.deconcept.com/swfobject/
Make sure you use the expressinstall.swf from SWFObject version 1.5 because that is the version JW Player uses (and recommends) in it’s code wizard. All you need from all the files that download is just the expressinstall.swf.

3. Upload the swfobject.js and the player.swf from JW Player download to the top level of your root directory on your server. Then do the same with the expressinstall.swf from deconcept download.

4. Create an ID DIV for the fallback video. If the Flash expressinstall fails (such as on an iphone or ipad that doesn’t use Flash) then it will FALLBACK to the video in the ID DIV.

5. Use the code wizard from JW player to point to your video and player files (you must use the complete paths ie. http://...) and make the other settings you want. MAKE SURE YOU SELECT THE EMBED USING “SWFOBJECT 1.5 CODE” NOT “EMBED CODE” (located above the generated code) that way we can use the fallback and expressinstall features, then copy the code and paste it right after the ID DIV in your body. Full instructions are located on the JW player site and on the deconcept page above. The code wizard is located on the JW Player site here:
http://www.longtailvideo.com/support/jw-player-setup-wizard

6. Now you have to manually add the expressinstall.swf code into your code. I will show a full example below but instructions are on the deconcept site I gave the link to. Express install will automatically prompt the user to install a newer version of Flash if the designated version is not found. The first version of Flash to play H.264 was 9.0.115 so you can see where I inputted that below. I also used autoplay parameters because I wanted my videos to auto play.

7. Now see the code inside the DIV ID below? That is where you put the fallback video or videos. Many people suggest putting the html5 “video” tag here with an MP4 first and an OGV of the same video second. Instead I used a simple Quicktime embed of the same MP4 file I used for the Flash player. That way I didn’t have to re-encode all my files for OGV and iphones and ipads can still play it!

8. Use the following video player sizes in your code.

JW Flash Player (Controller is 24 pixels tall):
SD = 320×264
HD = 320×204

Quicktime Player (Controller is 16 pixels tall):
SD = 320×256
HD = 320×196
________________

Conclusion:

If someone comes to my page and they have an older version of Flash than 9.0.115 then expressinstall.swf will prompt them to download a newer version. If they don’t have Flash installed or have an iphone or ipad then the Quicktime player will play the same file.

Here is my code. Notice the difference in size between the Quicktime player and JW Flash Player in the respective parts of the code:

<pre name=”code” class=”html”>
<div id=’media-320×264′>
<embed src=”../media/doubletree.mp4″ width=”320″ height=”256″ autoplay=”true” pluginspage=”http://www.apple.com/quicktime/download/”></embed>
</div>
<script type=’text/javascript’>
var so = new SWFObject(‘http://www.playroomcreative.com/player.swf','mpl','320','264','9.0.115‘);
so.useExpressInstall(‘http://www.playroomcreative.com/expressinstall.swf‘);
so.addParam(‘allowfullscreen’,'true’);
so.addParam(‘allowscriptaccess’,'always’);
so.addParam(‘wmode’,'opaque’);
so.addVariable(‘file’,’http://www.playroomcreative.com/production/media/doubletree.mp4‘);
so.addVariable(‘autostart’,'true’);
so.write(‘media-320×264′);
</script>
</pre>

To see it in action, click on one of the video thumbnails on my page:
http://www.playroomcreative.com/production.html
_________________

Other great resources:

http://camendesign.com/code/video_for_everybody

http://adobe.edgeboss.net/download/adobe/adobetv/gotoandlearn/html5fallback.mp4
_________________

Playroom Creative
Orange County Media Production and Visual Marketing | TV, Web, Print
http://www.playroomcreative.com/

Reply
HTML5 Video with Flash Fallback / Flash Video with Mobile Fallback* | Hook - Labs says:

August 4, 2010 at 6:01 pm

[...] *Due to popular demand on The Twitter, the name of this post was changed. Check out Norm’s new post for our easy to use javascript html5 video library. and WordPress plugin. [...]

Reply
Tweets that mention FlasHTMLVideo.js - HTML5 Video with Flash Fallback / Flash Video with Mobile Fallback | Hook - Labs -- Topsy.com says:

August 3, 2010 at 1:15 am

[...] This post was mentioned on Twitter by Maurizio Patitucci, Tony Brown. Tony Brown said: Currently reading http://labs.byhook.com/2010/07/30/flashtml5-the-javascript-library-and-wordpress-plugin/ [...]

Reply

Newer Comments »

Click here to cancel reply.

Labs.byHook

Flash Scripts, Tools & Methods Developed at Hook

Hook is a digital production company that develops interactive content for industry leading agencies and their brands. For more information visit www.byhook.com.