Email Updates RSS Subscribe
Line

This blog is created and maintained by the technical team at Hook in an effort to preserve and share the insights and experience gained during the research and testing phases of our development process. Often, much of this information is lost or hidden once a project is completed. These articles aim to revisit, expand and/or review the concepts that seem worth exploring further. The site also serves as a platform for releasing tools developed internally to help streamline ad development.

Launch
Line

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

Line

FlasHTML5 Video: The JavaScript Library and WordPress Plugin

Line
Posted on July 30th, 2010 by Norm McGarry
Line

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&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&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&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.

Line
11 Responses to “FlasHTML5 Video: The JavaScript Library and WordPress Plugin”
  1. Nick Tann says:

    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.

  2. Alejandro Yanaculis says:

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

  3. giacomo says:

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

  4. iPhone App says:

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

  5. janko says:

    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 !)

  6. Cristiano says:

    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!!!

  7. BayouGirl says:

    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!

  8. Stef says:

    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

  9. Steve says:

    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/

  10. [...] *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. [...]


Leave a Reply

*

Line
Line
Pony