Databases
StackOverflow2013
Postsdbo
POmediaelement.js not working when called after AJAX in IE8
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POmediaelement.js not working when called after AJAX in IE8
    text
    copied!<p>I have an absolutely crazy-making bug going on in IE8. At the moment, the following code works everywhere but IE8.</p> <p>If I run this in chrome, with the alerts enabled "success" fires. If I run it in IE "error" does.</p> <p>Sadly, in IE I can't seem to track down any sort of verbose error message.</p> <p>Is there anyone who has figured this out? I'm going bonkers trying to figure it out.</p> <pre><code>&lt;?php function the_ajax(){ $video_embed = "&lt;video id='myvideo' width='$videowidth' height='$videoheight' poster='$large' controls='controls' preload='none'&gt; &lt;source type='video/mp4' src='$videomp4' /&gt; &lt;source type='video/webm' src='$videowebm' /&gt; &lt;source type='video/ogg' src='$videoogg' /&gt; &lt;object width='$videowidth' height='$videoheight' type='application/x-shockwave-flash' data='$siteroot/js/mediaelement/flashmediaelement.swf'&gt; &lt;param name='movie' value='$siteroot/js/mediaelement/flashmediaelement.swf' /&gt; &lt;param name='flashvars' value='controls=true&amp;file=$videomp4' /&gt; &lt;img src='$large' width='$videowidth' height='$videoheight' title='No video playback capabilities' /&gt; &lt;/object&gt; &lt;/video&gt;"; echo $video_embed; } ?&gt; </code></pre> <p>and the javascript:</p> <pre><code>&lt;script type="text/javascript"&gt; $.ajax({ url: 'wp-admin/admin-ajax.php?action=get_my_video&amp;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'); } }); }); &lt;/script&gt; </code></pre> <p>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.</p> <p><strong>EDIT</strong> 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 <code>src='$videomp4'</code> to the opening tag.</p> <pre><code> &lt;video id='myvideo' width='$videowidth' height='$videoheight' poster='$large' controls='controls' preload='none' src='$videomp4'&gt; </code></pre> <p><strong>EDIT2</strong></p> <p>As it turns out removing everything from <code>&lt;object</code> to <code>&lt;/object&gt;</code> actually fixes the layout issue in IE8. Videos seem to be playable in Chrome, F, FF3.6 &amp; IE8 </p> <p>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.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload