How to add conditional comments to object tag for IE

Discussion in 'JavaScript' started by chrisj, May 14, 2015.

  1. #1
    I'm trying to get an image to appear by using the following conditional comment for IE8:

    <!--[if lte IE 8]>
    Code (markup):
    however, no image appears when viewing in IE8. Any help will be appreciated. Here's all the code:

    <div class="col-a2">
    <video id="video1" poster="http://www...com/img/test.jpg" preload="none" controls="controls" width="140" height="120" >
    <source type="video/mp4" src="http://www...com/video/testVid.mp4" />
    <!--[if lte IE 8]>
    <object type="application/x-shockwave-flash" data="/mediaelement/flashmediaelement.swf" width="140" height="120">
    <img src="http://www...com/img/test1.jpg" width="140" height="120" />
    <param name="movie" value="/mediaelement/flashmediaelement.swf" />
    <param name="flashvars"     value="controls=true&amp;file=/video/testVid.mp4&amp;controlbar=over&amp;image=/img/test1.jpg&amp;file=/video/testVid.mp4" />
    </object>
    <![endif]-->
    </video>
    </div>
    Code (markup):
     
    chrisj, May 14, 2015 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    1) where are your other source types? You know, ogg and vp8?

    2) The only reason to IECC object is to detect IE vs. Rest of World, not just "IE8/earlier".

    3) also remember that IE9/newer doesn't see CC's, so there's really NO reason to declare LTE IE 8

    4) Is the object loading the flash player? If so that image will NOT show; it should only show if the flash/object fails to load!

    <div class="col-a2">
    	<video id="video1" poster="http://www...com/img/test.jpg" preload="none" controls="controls" width="140" height="120">
    		<source src="http://www...com/video/testVid.webm" type="video/webm">
    		<source src="http://www...com/video/testVid.mp4" type="video/mp4">
    		<source src="http://www...com/video/testVid.ogv" type="video/ogg">
    		<!--[if IE ]> 
    			<object 
    				type="application/x-shockwave-flash" 
    				classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
    				width="140" height="120" 
    			> 
    		<![endif]-->
    		<!--[if !IE]>--> 
    			<object 
    				type="application/x-shockwave-flash"
    				width="140" height="120" 
    				data="/mediaelement/flashmediaelement.swf" 
    			> 
    		<!--<![endif]--> 
    			<param
    				name="movie"
    				value="/mediaelement/flashmediaelement.swf"
    			>
    			<param
    				name="flashvars"
    				value="controls=true&amp;file=/video/testVid.mp4&amp;controlbar=over&amp;image=/img/test1.jpg&amp;file=/video/testVid.mp4"
    			>
    			<img
    				src="http://www...com/img/test1.jpg"
    				width="140" height="120"
    				alt="DESCRIBE THIS IMAGE!!!"
    			>
    		</object>
    	</video>
    </div>
    Code (markup):
    Is probably what you should be declaring... and remember if the OBJECT works, the IMG won't show! Anything inside object is a fallback for when the object fails -- it's not like HTML 5's POSTER attribute.

    That's why usually what would go there would NOT be an image tag, it would be a paragraph telling people to download and install flash, or use a HTML 5 capable browser.
     
    deathshadow, May 14, 2015 IP