So, I created a nice little html5 video player with a playlist and some jQuery transitions between the playlist view and the video view. It works great in Chrome/Safari. However, firefox is a different story. All the jQuery business works just fine; however, the videos do not display. Rather, I am left with a grey-x. I've tried switching from straight ogg to ogv format which does not work either.
When I go straight to the file the browser attempts to download it rather then play it. I saw a similar post on this forum where it was a problem with the MIME settings and he fixed it somehow. I'm not sure if that is the same problem for me - so a little help would be muchly appreciated.
You can check it out here
Here is the entire code for the page; including all jQuery functions.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Erin Foote \\ Copywriter - 8mm Stories</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//init settings
$('#close-btn').css({'visibility' : 'hidden'});
//$('#preLoader').css({'visibility' : 'visible'});
//-------Text-to-Image Replacement-------\\
//replacing h1 and h2 with coresponding images
//using different replace method to keep client name/occupation SEOed
$('#menu h1').each(function() {
string = $(this).text();
filename = string.toLowerCase().replace(/ /g, '-').replace(/([^0-9a-z-])/g,'');
$(this).html('<img src="images/header-' + filename + '.png" />')
$('#vid h1').css({
'position' : 'relative',
'top' : '-20px'
});
});
//typography for video menu
$('#menu ul li:odd').css({'text-align' : 'right'});
//set up selection class for videos
$('#menu ul li a').click(function() {
$(this).addClass('selected');
});
//set up close function on close-btn
$('#close-btn').click(function() {
//fade in the video and the close button
$('#vid video').animate({opacity : 0}, 1000);
$('#close-btn').animate({opacity : 0}, 1000);
//fade out menu/title
$('#menu').delay(500).animate({opacity : 1}, 1000);
$('#menu').css({'visibility' : 'visible'}).delay(500).animate({opacity : 1}, 1000);
//remove selected class from just watch li a
$('#menu ul li a').removeClass('selected');
//remove video from dom
$('#videoCont video').remove();
});
});
function getVideo()
{
var browser;
var fileExt;
var string;
var filename;
//detect browser and match proper extension
if($.browser.mozilla) {
browser = 'gecko';
fileExt = 'ogv';
}
else if($.browser.msie) {
browser = 'trident';
fileExt = 'mp4';
}
else if($.browser.opera) {
browser = 'presto';
fileExt = 'ogv';
}
else if($.browser.safari) {
browser = 'web-kit';
fileExt = 'mp4';
}
//grab filename from html and grab file from server
string = $('#menu .selected').text();
filename = string.toLowerCase().replace(/ /g, '-').replace(/([^0-9a-z-])/g,'');
//fade out menu/title
$('#menu').animate({opacity : 0}, 1000);
//get and place video video
//(seeing that gecko browsers don't handle the expanded video tag well
// and webkit browsers dont seem to handle the shorter video tage
// we must find out which browser the user is using and append the right video tag and info
if(browser == 'gecko') {
$('#videoCont').html('<video width="640" height="480" src="/work/video/' + filename + '.' + fileExt + '"></video>');
}
else {
$('#videoCont').html('<video class="preload" width="640" height="480" controls="" autoplay="autoplay"><source src="work/video/' + filename + '.' + fileExt + '" type="video/' + fileExt + '"></video>');
}
//fade in the video and the close button
$('#vid video').delay(500).animate({opacity : 1}, 1000);
$('#close-btn').delay(500).css({'visibility':'visible'}).animate({opacity : .6}, 1000);
}
</script>
</head>
<body>
<video src="acting-art-director.ogv" type='video/ogg; codecs="theora, vorbis"'>
your browser does not support the video tag
</video>
<div id="vid">
<div id="menu">
<h1>8mm Stories</h1>
<ul>
<li><a href="javascript:getVideo();">Yacht</a></li>
<li><a href="javascript:getVideo();">pink</a></li>
<li><a href="javascript:getVideo();">he cared</a></li>
<li><a href="javascript:getVideo();">footerexia</a></li>
<li><a href="javascript:getVideo();">the answer</a></li>
<li><a href="javascript:getVideo();">yummy</a></li>
<li><a href="javascript:getVideo();">teeth</a></li>
<li><a href="javascript:getVideo();">moms</a></li>
<li><a href="javascript:getVideo();">i am smiling</a></li>
<li><a href="javascript:getVideo();">head over heals</a></li>
<li><a href="javascript:getVideo();">presents</a></li>
<li><a href="javascript:getVideo();">the shoes and tattoos remain</a></li>
<li><a href="javascript:getVideo();">the doctor</a></li>
<li><a href="javascript:getVideo();">acting art director</a></li>
<li><a href="javascript:getVideo();">the sound they made</a></li>
<li><a href="javascript:getVideo();">the reason</a></li>
</ul>
<a href="index.html" class="home">home</a>
</div>
<div id="close-btn">x</div>
<div id="videoCont"></div>
</div>
<div id="girl"></div>
</body>
</html>
Thanks for any and all help!
