Databases
StackOverflow2013
Postsdbo
POVideo for everybody with modernizr not working?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POVideo for everybody with modernizr not working?
    text
    copied!<p>I have a webpage coded in html5 using tags like <code>header</code>, <code>footer</code>, <code>section</code> and <code>video</code>. I use modernizr to support those tags in IE 7 and IE 8.</p> <p>There's a video in the page including flash fallback (video for everybody).</p> <p>When I test the page in IE 8, the page is well rendered, including tags specific to html5.</p> <p>The problem is that the flash fallback for the video doesn't work. I have a black area instead of the flash player.</p> <p>It works only if I remove the script tag to load modernizr. If I build a custom version of modernizr without html5 shim, the flash player loads and I can play the video, but html5 tags are not recognized.</p> <p>How can I use video for everybody with modernizr / html5 shim ? Why isn't it working?</p> <p>Thanks for your help</p> <hr> <p>Update :</p> <p>To go further in details, my page is based on html5boilerplate and use mediaelementsjs for the player.</p> <p>Here's the html code</p> <pre><code>&lt;head&gt; ... &lt;script src="js/libs/modernizr-2.0.6.min.js"&gt;&lt;/script&gt; ... &lt;/head&gt; &lt;body&gt; ... &lt;video width="332" height="250" poster="img/poster.jpg" controls="controls" preload="none"&gt; &lt;!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 --&gt; &lt;source type="video/mp4" src="video/myvideo.mp4" /&gt; &lt;!-- WebM/VP8 for Firefox4, Opera, and Chrome --&gt; &lt;source type="video/webm" src="video/myvideo.webm" /&gt; &lt;!-- Flash fallback for non-HTML5 browsers without JavaScript --&gt; &lt;object width="332" height="250" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"&gt; &lt;param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"&gt; &lt;param name="allowFullScreen" value="true"&gt; &lt;param name="wmode" value="transparent"&gt; &lt;param name="flashVars" value="config={'playlist':['http://.../img/poster.jpg',{'url':'http://.../video/myvideo.mp4','autoPlay':false}]}"&gt; &lt;!-- Image as a last resort --&gt; &lt;img src="img/poster.jpg" width="320" height="240" title="Your browser doesn't support video" /&gt; &lt;/object&gt; &lt;/video&gt; ... &lt;script defer src="js/plugins.js"&gt;&lt;/script&gt; &lt;script defer src="js/script.js"&gt;&lt;/script&gt; &lt;/body&gt; </code></pre> <p>And what is in script.js</p> <pre><code>$(function() { if($.browser.msie &amp;&amp; $.browser.version.substr(0,1)&lt;=7) { // $("video, audio").mediaelementplayer({defaultVideoWidth: 332,defaultVideoHeight: 250, features: ['playpause','progress','current','duration','volume','fullscreen']}); } else { // initialize scrollable $(".scrollable").scrollable({circular: true, mousewheel: true}).navigator(); $("video, audio").mediaelementplayer({defaultVideoWidth: 332,defaultVideoHeight: 250, features: ['playpause','progress','current','duration','volume','fullscreen']}); } }); </code></pre> <p>The plugins.js file contains the code of mediaelement-and-player.min.js <a href="https://github.com/johndyer/mediaelement/blob/master/build/mediaelement-and-player.js" rel="nofollow">https://github.com/johndyer/mediaelement/blob/master/build/mediaelement-and-player.js</a></p> <p>It works in IE 8 only if I comment the line to load modernizr. </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