Video Tag - What am I doing wrong?

[katiebugla]

Thanks, John.

I keep forgetting about that backslash (/) - I will try that, but also will really start to investigate the jplayer. Also, I completely forgot about the poster issue. My apologies...

Ultimately I am looking to have the functionality you see... something with a still image and when clicked it launches the video, or something kind of like this http://www.apple.com/ipad/.

Thank you for your patience and support. If I were to contact you for help with jPlayer, would I do that on this forum?

[jscheuer1]

OK, on that Apple page there's a large image of an iPad that does nothing and also does nothing if clicked. Below that are small images that look like videos. If I click on one of those I'm taken to another page where the video loads and plays in QuickTime. That's in Opera and Firefox. In IE 9 the page wants to install software but doesn't say what software - never a good sign. But even without installing, it runs a video via the video tag instead of just showing that large image of the iPad. If I click on one of the smaller video images below that, the page changes and wants to install software again. At least now it's specific, it wants QuickTime, but that's installed, so I take that as another bad sign and give up.

So I don't think you really want that. What does it do in your browser? Perhaps that's what you want.

I think you want an image that if clicked starts a video that occupies the same spot in the layout where the image you just clicked on was.

That should be doable using jPlayer.


Oh, and if you need to contact me more about this or anything else, right here in the forum is best.

[katiebugla]

Ok. Duly noted. You are correct in the assumption that I want an image that when hovered over or clicked instigates a video to play... I will attempt to work through a jplayer tutorial and see if I understand how to modify it to our needs (any suggestions for the web developer newbie?)... That said, I was using this kind of coding in my employers site to do somewhat of the same thing (which I should state that I appropriated this from the previous site):

<div id="pic-grid">
    <div id="player" style="display: none;" align="left">
        <script language="JavaScript" type="text/javascript">
        <!-- Hide script from sad old browsers
        QT_WriteOBJECT_XHTML('http://riverroadcreative.co/qtms/rrc_ebrcorp.mov', 
        '480', '285', '');
        // -->
        </script>
        <script type="text/javascript">
AC_AX_RunContent( 'classid','clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B','width','480','height','285','codebase','http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0','src','http://riverroadcreative.co/qtms/rrc_ebrcorp.mov','pluginspage','http://www.apple.com/quicktime/download/' ); //end AC code
</script><noscript><object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="480" height="285" codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0"><param name="src" value="http://riverroadcreative.co/qtms/rrc_ebrcorp.mov">
            <embed src="http://riverroadcreative.co/qtms/rrc_ebrcorp.mov" width="480" height="285" pluginspage="http://www.apple.com/quicktime/download/">
        </object></noscript>
    </div>
            
    <div id="trigger" style="display: block;" align="left">
        <a target="_blank" onclick="javascript:document.getElementById('player').style.display='block';document.getElementById('trigger').style.display='none';return
        false">
            <img src="images/rrc_EBR_lg_pstr.jpg" alt="Click to Play" border="0" width="480" height="285">
        </a>
    </div>
    <div class="pic2">
        <img src="images/rrc_EBR_sm_02.png">
    </div>
</div>

You can also see on the site at: http://riverroadcreative.co/ebr.html

Thank you, again.

[katiebugla]

I am positive there is a better way to write this but I am not well at all well versed with javascript... but perhaps, I can just clean up what I already have?

[katiebugla]

<div id="pic-grid">
    <div id="player" style="display: none;" align="left">
        <script type="text/javascript">
AC_AX_RunContent( 'classid','clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B','width','480','height','285','codebase','http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0','src','http://riverroadcreative.co/qtms/rrc_ebrcorp.mov','pluginspage','http://www.apple.com/quicktime/download/' ); //end AC code
</script><noscript><object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="480" height="285" codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0"><param name="src" value="http://riverroadcreative.co/qtms/rrc_ebrcorp.mov">
            <embed src="http://riverroadcreative.co/qtms/rrc_ebrcorp.mov" width="480" height="285" pluginspage="http://www.apple.com/quicktime/download/">
        </object></noscript>
    </div>
            
    <div id="trigger" style="display: block;" align="left">
    <script>
		$("#trigger").click(function() {
		$("#player").css('display', 'block');
		$("#trigger").css('display', 'none');
		});
		
	</script>
        <a target="_blank" onclick="javascript:document.getElementById('player').style.display='block';document.getElementById('trigger').style.display='none';return
        false">
            <img src="images/rrc_EBR_lg_pstr.jpg" alt="Click to Play" border="0" width="480" height="286">
        </a>
    </div>

Would that be the right way to do that?

[katiebugla]

But, that's still quicktime-related... sooooo.