I have an absolutely crazy-making bug going on in IE8. At the moment, the following code works everywhere but IE8.
If I run this in chrome, with the alerts enabled "success" fires. If I run it in IE "error" does.
Sadly, in IE I can't seem to track down any sort of verbose error message.
Is there anyone who has figured this out? I'm going bonkers trying to figure it out.
<?php
function the_ajax(){
$video_embed = "<video id='myvideo' width='$videowidth' height='$videoheight' poster='$large' controls='controls' preload='none'>
<source type='video/mp4' src='$videomp4' />
<source type='video/webm' src='$videowebm' />
<source type='video/ogg' src='$videoogg' />
<object width='$videowidth' height='$videoheight' type='application/x-shockwave-flash' data='$siteroot/js/mediaelement/flashmediaelement.swf'>
<param name='movie' value='$siteroot/js/mediaelement/flashmediaelement.swf' />
<param name='flashvars' value='controls=true&file=$videomp4' />
<img src='$large' width='$videowidth' height='$videoheight' title='No video playback capabilities' />
</object>
</video>";
echo $video_embed;
}
?>
and the javascript:
<script type="text/javascript">
$.ajax({
url: 'wp-admin/admin-ajax.php?action=get_my_video&name='+thevideo,
cache: false,
type: 'GET',
success: function(response, textStatus, jqXHR){
contentArea.html(response);
$("#myvideo").mediaelementplayer({
enablePluginDebug: true,
plugins:["flash","silverlight"],
type: '',
pluginPath: "/js/mediaelement/",
flashName: "flashmediaelement.swf",
silverlightName: 'silverlightmediaelement.xap',
success:function(mediaElement, domObject) {
//alert('success');
},
error: function () {
GLOBAL_ERR = this;
//alert('unknown error');
}
});
});
</script>
Incidentally, the "sample output" in IE8 shows the POSTER IMAGE stacked on top of a large block of white space. If you right click the white space it will say "about flash" etc... so it seems to be that the flash player isn't actually initializing.
EDIT
I have found a way to get the video playing - (wooo!) but the poster/flas is still stacked.
The key to getting the video playing in IE8 is changing the opening VIDEO tag. Add src='$videomp4' to the opening tag.
<video id='myvideo' width='$videowidth' height='$videoheight' poster='$large' controls='controls' preload='none' src='$videomp4'>
EDIT2
As it turns out removing everything from <object to </object> actually fixes the layout issue in IE8. Videos seem to be playable in Chrome, F, FF3.6 & IE8
I haven't tested anything else and I worry that I've lost something somewhere... but for everything I've tested this seems to be working.
