HTML5 Video and IE
I just finished up this new site I was working on after a 3 day battle trying to figure out how to handle loading HTML5 Videos dynamically with Javascript under IE. Before I get into that solution, I want to post the updated code I used for Firefox/Chrome/Safari to dynamically load the new videos. I know I posted some code the other day, but I had to modify it a little bit from what was originally there.
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 | <!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');
var p3 = document.createElement('param'); var p4 = document.createElement('param'); var e = document.createElement('embed');
// Populate New Elements
v.id = 'vid'; v.width = '868'; v.height = '398'; v.controls = true; v.preload = 'auto';
if (auto == 1) v.autoplay = 'true';
v.poster = 'images/wkposter_front.jpg';
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';
p1.name = 'movie'; p1.value = 'videos/player.swf';
p2.name = 'allowfullscreen'; p2.value = 'true';
p3.name = 'allowscriptaccess'; p3.value = 'always';
p4.name = 'flashvars'; p4.value = 'file=' + video + '.mp4&image=images/wkposter_front.jpg';
e.name = 'flash'; e.setAttribute('type', 'application/x-shockwave-flash'); e.setAttribute('src', 'videos/player.swf');
e.setAttribute('width', '868'); e.setAttribute('height', '398'); e.setAttribute('allowscriptaccess', 'always');
e.setAttribute('allowfullscreen', 'true'); e.setAttribute('flashvars', 'file=' + video + '.mp4&image=images/wkposter_front.jpg');
// Append New Elements
f.appendChild(p1); f.appendChild(p2); f.appendChild(p3); f.appendChild(p4); f.appendChild(e);
v.appendChild(mp4); v.appendChild(webm); v.appendChild(ogv); v.appendChild(f);
document.getElementById('wkp_video').appendChild(v);
// Autoplay the video if necessary
if (auto == 1) {
v.play();
}
return true;
</script>
</head>
<body onload='watchMore("Video#1");'>
<div id='video'>
<video id='vid' controls></video> <!-- Placeholder; Gets deleted on pageload -->
<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> |
The changes are really just correcting for the flashback in the video element, and not needing all of the code present when the page loads because the original video element is removed immediately. While I was hoping that this would work for all browsers, IE 8 under Windows 7 was throwing an error message on the last appendChild() [for the embed]. After several unsuccessful attempts to fix this problem, I came up with a new solution – check the user’s browser on page load, and if it is IE, don’t use the javascript function. Instead, I hard code the videos into the page, passing the new videos to be played via the $_GET variable. Checking the browser information is accomplished by using $_SERVER['HTTP_USER_AGENT'], and then parsing it with regular expressions.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $useragent = $_SERVER['HTTP_USER_AGENT']; if (preg_match('|MSIE ([0-9].[0-9]{1,2})|',$useragent,$matched)) { $browser_version=$matched[1]; $browser = 'IE'; } elseif (preg_match('|Opera ([0-9].[0-9]{1,2})|',$useragent,$matched)) { $browser_version=$matched[1]; $browser = 'Opera'; } elseif(preg_match('|Firefox/([0-9\.]+)|',$useragent,$matched)) { $browser_version=$matched[1]; $browser = 'Firefox'; } elseif(preg_match('|Safari/([0-9\.]+)|',$useragent,$matched)) { $browser_version=$matched[1]; $browser = 'Safari'; } else { $browser_version = 0; $browser= 'other'; } |
Ultimately, I use the $browser variable and check if it’s equal to IE – if not, load the appropriate code to use the javascript and dynamically load the video. If it is IE, load the videos one at a time, passing the new name on the url. Testing under Firefox/Chrome/Safari on OS X showed that the originally functionality of the site was still in tact. Additionally, under IE 8 I was able to load the appropriate videos without any errors on the page.