I am loading an ajax page which executes an HTML5 video player script. The function for the Flash fallback is html5media(); :
//Load 1st Case Study
$("#splash").live('click', function (e) {
$(this).fadeOut('slow', function () {
$('#case-studies').load('case-study-1.html', function() {
html5media(); //initiate Flash fallback
}).fadeIn();
});
e.preventDefault();
});
This initial page load works fine in IE7 & IE8.
The problem is once this page is loaded, there are links to 4 more videos which are loaded in again using ajax. I use this function:
//Switcher
function csClients(url, client) {
$("#case-studies").fadeOut('slow', function() {
$('#case-studies').load(url, function () {
html5media(); //initiate Flash fallback
}).fadeIn();
});
}
//Page Loader
$("#cs-client-list li.client1 a").live('click', function(e) {
csClients('case-study-1.html', 'client1');
e.preventDefault();
});
Originally I was using return false; but none of the sub-page Flash videos would load in IE7. When I switched to preventDefault, the videos loaded in IE7 but still not in IE8.
I also get a weird error in both IE7 & IE8 with no helpful feedback:
Error on Page:
Unspecified error.
/ (Line 49)
Code: 0 (Char 5) URI:
http://www.mysite.com
This is line 49 in my index page:
<section id="case-studies" class="main-section">
I have a feeling it has to do with calling html5media(); too many times? At a loss...
