Javascript: HTML5 Video

I’ve recently been developing a website for a production company located in Binghamton, and came across a small problem; they wanted their homepage to show off some of the video work they’ve done for their clients, and they wanted the user to be able to select from several videos to load on the fly. I started thinking about it, and realized Javascript would provide the cleanest implementation. One slight problem with this realization – I do not know Javascript. And when I say I don’t know it, I do not mean that I am not proficient in it and can kind of work my way through it – I truly have no background in writing any Javascript. Fortunately, my friend Alex had sent me a few JS ebooks over winter break, so I had a jumping off point. After countless hours of searching Google and various forums, I was nowhere closer to finding a solution to my problem. With the client beginning to get impatient, I buckled down and figured out how to write the code myself. For anyone who finds themselves in the same position I was in, this code is designed to load a new video into the 3 <source> tags [mp4, webm, ogv] and the flash fall-back. The function is passed the new video name, and destroys the existing video element. It then creates new elements for the Video, 3 Sources, Flash Object and 2 Flash Params. These elements are then given the appropriate attributes, and appended to the correct parent. Finally, the new Video element is appended as a child to a container <div> in the body of the HTML.

Here’s a basic implementation of the code. I’ve changed some of the id elements used in the actual version of the code to be more example friendly. It should be noted that this JS function will work anywhere in a webpage, just ensure that you set up the css to place the video where you want it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<script type="text/javascript">
			function watchMore(video) {
				// Remove Old Video
				var x = document.getElementById('vid');
				document.getElementById('video').removeChild(x);
 
				// Create Elements for New Video
				var v = document.createElement('video');
				var mp4 = document.createElement('source');
				var webm = document.createElement('source');
				var ogv = document.createElement('source');
				var f = document.createElement('object');
				var p1 = document.createElement('param');
				var p2 = document.createElement('param');
 
				// Populate New Elements
				v.id = 'vid'; v.width = '868'; v.height = '398'; v.controls = true;
				mp4.id = 'mp4'; mp4.src = 'videos/' + video + '.mp4'; mp4.type = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
				webm.id = 'webm'; webm.src = 'videos/' + video + '.webm'; webm.type = 'video/webm; codecs="vp8, vorbis"';
				ogv.id = 'ogv'; ogv.src = 'videos/' + video + '.ogv'; ogv.type = 'video/ogg; codecs="theora, vorbis"';
				f.id = 'flash'; f.width = '868'; f.height = '398'; f.type='application/x-shockwave-flash'; f.data='videos/YTPlayer.swf';
				p1.name='movie'; p1.value='videos/YTPlayer.swf';
				p2.name='flashvars'; p2.value='controlbar=over&amp;file=videos/' + video + '.mp4';
 
				// Append New Elements
				f.appendChild(p1); f.appendChild(p2);
				v.appendChild(mp4); v.appendChild(webm); v.appendChild(ogv); v.appendChild(f);
				document.getElementById('video').appendChild(v);
 
				// Play Video
				v.play();
				return true;
			}
		</script>
	</head>
	<body onload='watchMore("Video#1");'>
		<div id='video'>
			<video id='vid' controls>
				<source id="mp4" src="videos/Video#1.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
				<source id="webm" src="videos/Video#1.webm" type='video/webm; codecs="vp8, vorbis"'> 
				<source id="ogv" src="videos/Video#1.ogv" type='video/ogg; codecs="theora, vorbis"'> 
				<object id="flash" type="application/x-shockwave-flash" data="videos/YTPlayer.swf"> 
					<param name="movie" value="videos/YTPlayer.swf" /> 
					<param name="flashvars" value="controlbar=over&amp;file=videos/Video#1.mp4" /> 
				</object> 
			</video>
			<img src='circle.jpg' onclick='watchMore(Video#2);'>
			<img src='circle.jpg' onclick='watchMore(Video#3);'>
			<img src='circle.jpg' onclick='watchMore(Video#4);'>
			<!-- Add More Videos as Necessary -->
		</div>
	</body>
</html>

If you have any questions, please post a comment below. Like I mentioned above, this took me a while to come up and is published in the hope that someone else will not be found in the same position I was; please do not reproduce this code without written permission.

This entry was written by Marc Budofsky , posted on Tuesday February 01 2011at 11:02 pm , filed under Javascript, Programming, Web Design and tagged , , , , , . Bookmark the permalink . Post a comment below or leave a trackback: Trackback URL.

10 Responses to “Javascript: HTML5 Video”

  • Ella says:

    Would it be possible to use a video class, instead of an ID? I’m using drupal and it is automatically adding seperate numbered ids to each video instance.

  • As long as the class for each video is unique, I don’t see why it wouldn’t work. Post up the code and a link to your website and I can take a look at it for you.

    Marc

  • Ella says:

    I am kind of in a position where I shouldn’t publically post the link — may I email you in instead?

    To give you some background, I am using the videojs module. It creates the divs for each video based on the node ID. have used this plug-in before & successfully manipulated it with js, but outside of drupal, where I was able to write the embed code by hand & pop in my own div IDs/classes. Here is the code generated by the drupal module:

    Ty for taking a look. :)

  • Ella says:

    Oops — here it is in pastebin.

    http://pastebin.com/j0kU7quh

  • Ella says:

    Also, I am curious to know the significance between file name and function name — if creating an onclick to video#2, does div containing video#2 already have to exist somewhere on the page/site?

  • Ella says:

    Lol, okay, last comment, I swear — I am following the example as-is on a non-drupal local dummy site, using generic filenames to keep things simple — just to understand the code as thoroughly as possible. Though, I am receiving a javascript error — video is not defined. Where is should it be defined outside of the div ids and head tag?

  • If you want to email me the link, my address is marc.budofsky@gmail.com.

    For the file name/function name question: The file name is the name for each video that you want to load. The function name is just that – its to define the function that will handle the the loading of each video. There is one generic div that the page must contain that will have the code for each video. Video#2 is the video file that will be loaded.

    For the last comment: Do you have a div with the id “video” on the page. Post a link to the dummy site so I can take a look at it.

    Lastly, you may want to to look at the updated code I have posted here: http://blog.mediabymrb.com/2011/02/html5-video-and-ie/. I made a couple of changes to the function that made it work better.

    Marc

  • Ella says:

    Ty so much for taking the time to answer my questions. Do you know how I would be able to add a class to the newly appended video? I am using a custom styled player that is called upon my adding a class to the video element.

  • you can add a class as follows:

    var x = document.createElement( 'div' );
    x.className = "className";

    I’ve kept the variable names similar to the example posted above. You would want to insert the ‘x.className = …’ line immediately after the ‘var x = …’ line.

    Let me know how it works out. Also, please post a link to the finished product – I would love to see how it to turns out.

    Marc

  • [...] Feed « Javascript: HTML5 Video WordPress for iPhone [...]

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>