Jump to content

Help Needed - How to Display video in web page and not separate!


Recommended Posts

I know it can be done. I have not found a tutorial nor a page I could copy as a template. Daughter's web site has a demo reel link. She wants to be able to click on the link and go to a demo page where she displays the demo reel (currently http://www.jenraygenre.com/Comp%201_3.avi) on the page. Using my Mac and Firefox that is what it does. Windows is a different story. Also the Mac uses a plain background and I believe she wants a solid colored brown background to match what is there. We are also looking at putting a high resolution and a low resolution video there.Can you point me to instructions or ideas of how to make it look good and work that way? I don't know if the final demo will be avi or mov or if it makes any difference.

Link to post
Share on other sites

So in this case I would insert this code after I verify the width and height?

<object id="qtplayer"classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"codebase="http://www.apple.com/qtactivex/qtplugin.cab">width="320" height="26"><param name="controller" value="TRUE"><param name="autoplay" value="FALSE"><param name="src" value="Comp&201_3.avi"><embed src="Comp%201_3.avi" width="320"height="200" autoplay="FALSE"controller="TRUE"pluginspage="http://www.apple.com/quicktime/download/" /> </object>

Where does the classid come from or is that always the same for quicktime?

Link to post
Share on other sites

I am getting a big variation between browsers and operating systems. It just does not look professional yet. Here's the page. That really looks bad in Mac but looks ok in IE7Beta whatever. Firefox is not the best either. Here is the coding for the whole page:

<html><head><title>Demo Reel</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><!-- ImageReady Preload Script (blank.psd) --><script type="text/javascript"><!--function newImage(arg) {	if (document.images) {		rslt = new Image();		rslt.src = arg;		return rslt;	}}function changeImages() {	if (document.images && (preloadFlag == true)) {		for (var i=0; i<changeImages.arguments.length; i+=2) {			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];		}	}}var preloadFlag = false;function preloadImages() {	if (document.images) {		home_over = newImage("images/home-over.gif");		demo_over = newImage("images/demo-over.gif");		resume_over = newImage("images/resume-over.gif");		flatbook_over = newImage("images/flatbook-over.gif");		contact_over = newImage("images/contact-over.gif");		preloadFlag = true;	}}// --></script><!-- End Preload Script --></head><body bgcolor="#492d0a" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();"></object><!-- ImageReady Slices (blank.psd) --><table id="Table_01" width="900"  border="0" cellpadding="0" cellspacing="0">	<tr>		<td colspan="7">			<img src="images/demo_01.gif" width="900" height="15" alt=""></td>	</tr>	<tr>		<td colspan="2" rowspan="2" valign="baseline">			<img src="images/demo_02.gif" width="186" height="471" alt=""></td>		<td height="261" colspan="3">	[color="#990000"]  [color="#000000"]<object id="qtplayer"classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"codebase="http://www.apple.com/qtactivex/qtplugin.cab">		  <width="320" height="26">		  <param name="controller" value="TRUE">[/color][/color][color="#000000"]		  <param name="autoplay" value="FALSE">		  <param name="src" value="Comp&201_3.avi">		  <embed src="Comp1_3.avi" width="320"height="240" autoplay="FALSE"controller="TRUE"pluginspage="http://www.apple.com/quicktime/download/" />		</object></td>		<td colspan="2" rowspan="2">			<img src="images/demo_04.gif" width="205" height="471" alt=""></td>	</tr>	<tr>		<td colspan="3" valign="bottom"ro><img src="images/demo_05.gif" width="509" height="64" alt=""></td>[/color][color="#000000"]	</tr>[/color]	<tr>		<td>			<a href="index.html"				onmouseover="changeImages('home', 'images/home-over.gif'); return true;"				onmouseout="changeImages('home', 'images/home.gif'); return true;"				onmousedown="changeImages('home', 'images/home-over.gif'); return true;"				onmouseup="changeImages('home', 'images/home-over.gif'); return true;">				<img name="home" src="images/home.gif" width="140" height="52" border="0" alt="Home"></a></td>		<td colspan="2">			<a href="demo2.htm"				onmouseover="changeImages('demo', 'images/demo-over.gif'); return true;"				onmouseout="changeImages('demo', 'images/demo.gif'); return true;"				onmousedown="changeImages('demo', 'images/demo-over.gif'); return true;"				onmouseup="changeImages('demo', 'images/demo-over.gif'); return true;">				<img name="demo" src="images/demo.gif" width="168" height="52" border="0" alt="Demo Reel"></a></td>		<td>			<a href="resume.html"				onmouseover="changeImages('resume', 'images/resume-over.gif'); return true;"				onmouseout="changeImages('resume', 'images/resume.gif'); return true;"				onmousedown="changeImages('resume', 'images/resume-over.gif'); return true;"				onmouseup="changeImages('resume', 'images/resume-over.gif'); return true;">				<img name="resume" src="images/resume.gif" width="148" height="52" border="0" alt="Resume"></a></td>		<td colspan="2">			<a href="book_0.html"				onmouseover="changeImages('flatbook', 'images/flatbook-over.gif'); return true;"				onmouseout="changeImages('flatbook', 'images/flatbook.gif'); return true;"				onmousedown="changeImages('flatbook', 'images/flatbook-over.gif'); return true;"				onmouseup="changeImages('flatbook', 'images/flatbook-over.gif'); return true;">				<img name="flatbook" src="images/flatbook.gif" width="270" height="52" border="0" alt="Digital Flatbook"></a></td>		<td>			<a href="#mailto:jenray@jenraygenre.com"				onmouseover="changeImages('contact', 'images/contact-over.gif'); return true;"				onmouseout="changeImages('contact', 'images/contact.gif'); return true;"				onmousedown="changeImages('contact', 'images/contact-over.gif'); return true;"				onmouseup="changeImages('contact', 'images/contact-over.gif'); return true;">				<img name="contact" src="images/contact.gif" width="174" height="52" border="0" alt="Contact"></a></td>	</tr>	<tr>		<td colspan="7">			<img src="images/demo_11.gif" width="900" height="35" alt=""></td>	</tr>	<tr>		<td>			<img src="images/spacer.gif" width="140" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="46" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="122" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="148" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="239" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="31" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="174" height="1" alt=""></td>	</tr></table><!-- End ImageReady Slices --></body>

</html>Can you see what I am doing wrong? Is it because I am trying to put it into a table? Is there a better way to do this?

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...