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”

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=""> <s> <strike> <strong>