This is a continuation of HTML5 Video – What’s the Deal?
This Epsiode – Fun With IE
I previously showed how to simply mark up HTML5 Video. If you want something more in depth then check out the video section of Dive Into HTML5. Not a bad read and very informative.
This time I talk about the Flash Fallback and IE.
Flash Fallback
<div id="homepage-video" style="display: none;">
<img="homepage/video_player_close.png" id="close-video-button" alt="close" title="close video" />
<video width="640" height="360" id="myVid" controls="controls">
<source src="http://www.thescriptiest.com/vid/theScriptiest.mp4" type="video/mp4" />
<source src="http://www.thescriptiest.com/vid/theScriptiest.webm" type="video/webm" />
<source src="http://www.thescriptiest.com/vid/theScriptiest.ogv" type="video/ogg" />
<object width="640" height="360" data="swf/flashmediaelement.swf">
<param name="movie" value="swf/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&src=http:%3A%2F%2Fwww.theScriptiest.com%2Fvid%2FtheScriptiest.mp4" />
<span title="No video playback capabilities">No video playback capabilities</span>
</object>
</video>
</div>`Much more concise than my last version. Here I’m using the Video For Everybody method. You can generate your own code with their VFE Generator.
The most problematic part of this is the flash fallback. Video for everybody suggest three different ones. flashFox, Flow Player, and JW Player. Of these only flashFox is free.
If all your doing is posting videos then flashFox works. But for this project I was also doing some fancy javaScripting. Namely, on click, show the movie in a popup and start it playing, Then close the popup and pause the video by clicking a close button.
flashFox is not well documented, and hasn’t been updated since 2010. So I went with MedaiElementjs.
I should stop here and say that there is another option in video.js. It’s the simplest. Unfortunately they have a license which requires your code to be open-source. Not a great option if you don’t want to share everything. If this is not a concern then go with that.
MediaElementjs
MediaElementjs isn’t perfect but well on it’s way to being so. It’s open-source, it’s GPL, it’s well documented, and it has a limited number of dependencies. Set up instructions are easy enough and with a little trial and error you’ll be able to pick the best way to use it.
$(function () {
var player = new MediaElementPlayer("#myVid", {
features: ['playpause','progress','volume','fullscreen'],
alwaysShowControls: false,
enableKeyboard: true,
pauseOtherPlayers: true
});
// play on click events
$("#open-vid-link").click( function() {
$('#homepage-video').fadeIn(600);
player.play();
});
// pause on click events
$("#close-video-button").click( function() {
$('#homepage-video').fadeOut(600);
player.pause();
});
});`
The first Gotcha
What this does is creates a flash player to be used instead of the native video/audio capabilities of all browsers. It worked in Safari, worked in Fire Fox, worked in Chrome, and can you guess what happened in IE? Of Course it failed.
This was because flash will not let you create a flash element inside a hidden div. So I could get the popup to fade in but there would be no video because the flash element didn’t exist.
The solution
For IE only, don’t hide on load then show on click; rather position the video out of view then re-position on click. I liked the jQuery fade-in better then the slide-in effect though, so I put IE specific css on an IE only style sheet, and added a class that would re-position the video.
<!--[if lt IE 8]-->
<link rel="stylesheet" href="ie_hacks.css">
<![endif]-->`
#homepage-video {
display: none;
width: 640px;
height: 360px;
margin-left: -338px;
margin-top: -180px;
position: fixed;
left: 50%;
top: 50%;
z-index: 100;
background-color: #000;
box-shadow: 0 0 14px 4px rgba(0,0,0,0.5);
}
/* makes a nice close button
in the top right corner of the video */
#close-video-button {
position: absolute;
top: -13px;
left: 630px;
cursor: pointer;
z-index: 99;
}`
#homepage-video {
display: block;
left: -999px;
}
#homepage-video.ieVid {
left: 50%;
}`
Detecting IE
Detecting IE is not as simple as it should be. There are various methods and plugins that you can use but here’s a very clever way to detect the browser from the header. Thanks to MEO at Stackoverflow
<!--[if IE 7]> <html lang="en-us" class="full-screen ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html lang="en-us" class="full-screen ie8 oldie"> <![endif]-->
<!--[if gt IE 8]> <html class="full-screen"> <![endif]-->`
Modern browsers handle video nicely, so I only use media element for IE8 and IE7, which don’t do html5 video.
jQuery(function () {
var player;
if ($("html").hasClass("oldie")) {
player = new MediaElementPlayer("#myVid", {
features: ['playpause','progress','volume','fullscreen'],
alwaysShowControls: false,
enableKeyboard: true,
pauseOtherPlayers: true
});
};
// set the play/pause on click events
$("#open-vid-link").click( function() {
if ($("html").hasClass("oldie")) {
$("#homepage-video").addClass("ieVid");
player.play();
$('.mejs-overlay-button').hide();
} else {
$('#homepage-video').fadeIn(600);
$("#myVid")[0].play();
};
});
$("#close-video-button").click( function() {
if ($("html").hasClass("oldie")) {
$("#homepage-video").removeClass("ieVid");
player.pause();
} else {
$('#homepage-video').fadeOut(600);
$("#myVid")[0].pause();
};
});
});`
Hint: .play() and .pause() are not jQuery; they’re methods of the dom.
Second Gotcha
To speed up the site a bit I’m using a CDN. What’s a CDN? Here’s a great explanation from NCZ Online. More on this later.
All browsers were happy except IE9 and IE10 which gave me “Error: Unsupported video type or invalid file path”. The URL file path wasn’t wrong and there were no js errors. I googled this forever, till I found this article at coderwall. For them the problem was the MIME Type. IE thought they were trying to play a video type it didn’t recognize.
To see if this is happening to you follow these steps.
- Go to IE and Hit F12 to get the developer tools
- Go to the Network Tab and hit the “Start Capturing” button.
- Then reload the page and watch the list fill up with stuff.
- Find the video and look at the Type; it should say mp4, if not then it’s calling the wrong mime time
- In my case I needed to call the CDN and tell them what was happening
The CDN Host fixed it for me.
Another thing you can do to trouble shoot the video is go to the console tab, and type this:
document.getElementsByTagName(“video”)[0].error.code
It will give you more detail. Check out thebeeps blog.
(Source: Dive Into HTML5, camendesign, mediaelementjs, NCZ Online, coderwall)