Link to home
Start Free TrialLog in
Avatar of isaacr25
isaacr25

asked on

Flash video player

I'm looking for a good, easy to use flash player to embed in an html page. I would like to have an action like Lightbox2 (http://www.huddletogether.com/projects/lightbox2/), where the video is played over the rest of the content, and the page behind it is darkened a bit. I have a .flv file that is almost 30MB. Any suggestions on how I should proceed and what I should use? Thanks!
SOLUTION
Avatar of TheYan
TheYan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
This is a sample embed code:

  <object id="player1" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="250" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" name="player1">
<param name="flashvars" value="file=/media/videos/7f000001-0770-d6de.flv&image=media/videos/videothumbs/7f000001-7a9b-0625.jpg" />
<param name="movie" value="/smc/media/videos/player.swf" /> 
<embed type="application/x-shockwave-flash" width="250" height="100" src="/media/videos/player.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="file=/media/videos/7f000001-0770-d6de.flv&image=/media/videos/videothumbs/7f000001-7a9b-0625.jpg&amp;"></embed> <a href="http:get.adobe.com/flashplayer">Get Flash</a> to see this movie.
</object>

Open in new window

If you combine this code with highslide, it would be possible to pop up the player, and fade the background as you want.

Best wishes, Yan
Avatar of isaacr25
isaacr25

ASKER

I'm trying to use highslide and I can't seem to get it working. I've pasted the following code in my HEAD:

<!--
      1 ) Reference to the files containing the JavaScript and CSS.
      These files must be located on your server.
-->
<script type="text/javascript" src="../highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
<!--
    2) Optionally override the settings defined at the top
    of the highslide.js file. The parameter hs.graphicsDir is important!
-->
<script type="text/javascript">
    hs.graphicsDir = '../highslide/graphics/';
    hs.outlineType = 'rounded-white';
</script>


And I've added the following code to my html file as a test:

<a href="images/headofschool.jpg" class="highslide"
        onclick="return hs.expand(this)">
    <img style="float:left; margin-right:10px;" src="images/pic_frame.jpg" alt="Highslide JS"
        title="Click to enlarge"/></a>


I've copied the entire highslide folder to the root of my site on my local pc (not a webserver). When I click on the thumbnail image, the image opens up in a regular html page by itself.
Make sure that the location of all the highslide files matches the specified location in the code.
I believe that it does. I've pasted the highslide folder to my site's root. Should I try hardcoding the locations?

Also, how do I integrate this with the JW player, which I've gotten to work by itself?

Thanks.
Ok,
I've gotten the highslide piece to work. The video is also working. Now how do I connect the two? Thanks.
You have to download the JW player, then simply paste the players code inside of your highslide script.
Can you explain a little further please? I've downloaded the JW player and I've gotten it to work independently of Highslide.

Where in the code I pasted above do I need to paste the players code, and what do you mean by "players code?" Thanks for your patience and help.
Payers code is as in example before:

<object id="player1" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="250" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" name="player1">
<param name="flashvars" value="file=/media/videos/7f000001-0770-d6de.flv&image=media/videos/videothumbs/7f000001-7a9b-0625.jpg" />
<param name="movie" value="/smc/media/videos/player.swf" />
<embed type="application/x-shockwave-flash" width="250" height="100" src="/media/videos/player.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="file=/media/videos/7f000001-0770-d6de.flv&image=/media/videos/videothumbs/7f000001-7a9b-0625.jpg&amp;"></embed> <a href="http:get.adobe.com/flashplayer">Get Flash</a> to see this movie.
</object>

You just have to paste it instead of a content: like in the headline example.
<div class="highslide-maincontent">
 
<object id="player1" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="250" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" name="player1">
<param name="flashvars" value="file=/media/videos/7f000001-0770-d6de.flv&image=media/videos/videothumbs/7f000001-7a9b-0625.jpg" />
<param name="movie" value="/smc/media/videos/player.swf" /> 
<embed type="application/x-shockwave-flash" width="250" height="100" src="/media/videos/player.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="file=/media/videos/7f000001-0770-d6de.flv&image=/media/videos/videothumbs/7f000001-7a9b-0625.jpg&amp;"></embed> <a href="http:get.adobe.com/flashplayer">Get Flash</a> to see this movie.
</object>
 
</div>

Open in new window

Still a bit confused :-(

So here's my working highslide code:

<a href="images/headofschool.jpg" class="highslide"
        onclick="return hs.expand(this)">
    <img style="float:left; margin-right:10px;" src="images/pic_frame.jpg" alt="Highslide JS"
        title="Click to enlarge"/></a>

And here's the working JW player code that I have pasted after the highslide code:

<p id='preview'>The player will show in this paragraph</p>
<script type='text/javascript' src='woodfield_vid/swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('woodfield_vid/player.swf','player','400','300','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=http://xyz.org/woodfield_vid/Woodfield.flv');
s1.write('preview');
</script>

How/where do I paste the JW code into the highslide code? Thanks again for your patience and help.
The highslide code you show above is for the images, you have to use the code provided for html.

http://highslide.com/examples/headline.html
I see...
Now I'm using this code, as you recommended:

<a href="index.htm" onclick="return hs.htmlExpand(this, { headingText: 'Lorem ipsum' })">
      Open HTML-content
</a>
<div class="highslide-maincontent">
            <p id='preview'>The player will show in this paragraph</p>
<script type='text/javascript' src='woodfield_vid/swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('woodfield_vid/player.swf','player','400','300','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=http://xyz.org/woodfield_vid/Woodfield.flv');
s1.write('preview');
</script>
</div>

When I click on the link, I get the popup but it's just blank. Also, part of the popup is being hidden by some other flash swf content on the page. Can the popup be repositioned?
Without visual representation I can't tell of your problem. And yes you can reposition it look at the reference: http://highslide.com/ref/
No problem,
See the Open HTML-content link in the first paragraph here:

www.mwebdev.com

Thanks.
You need to replace the image tag with the video tag. Try this:
<a href="images/headofschool.jpg" class="highslide"
        onclick="return hs.expand(this)">
 
<script type='text/javascript' src='woodfield_vid/swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('woodfield_vid/player.swf','player','400','300','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=http://xyz.org/woodfield_vid/Woodfield.flv');
s1.write('preview');
</script>
 
</a>

Open in new window

And try this to embed the video without using java:
<a href="images/headofschool.jpg" class="highslide"
        onclick="return hs.expand(this)">
	<div class="highslide-maincontent">
		<object id="player1" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="250" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" name="player1">
		<param name="flashvars" value="file=http://xyz.org/woodfield_vid/Woodfield.flv&image=media/videos/videothumbs/7f000001-7a9b-0625.jpg" />
		<param name="movie" value="woodfield_vid/player.swf" /> 
		<embed type="application/x-shockwave-flash" width="250" height="100" src="/media/videos/player.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="file=http://xyz.org/woodfield_vid/Woodfield.flv"></embed>
		</object>
	</div>
</a>

Open in new window

profya,
I tried adding your first bit of code and I get javascript errors. Please see www.mwebdev.com.
Try using the last code I have submitted, it is javascript free to embed.
I read the HTML source of the page you gave me, I found:
1) Links to both js and css files are incorrect. You placed highslide folder on the root directory so links should be:
<script type="text/javascript" src="highslide/highslide-with-html.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
without ../
2) Place the embed on a DIV the id and class know to the highslide. Within the appeared link you can place a thumb image for the video you want to show.

I have tested the highslide locally and it worked. In the following is the code:
<HTML>
<HEAD>
<script type="text/javascript" src="highslide/highslide-with-html.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
</HEAD>
<BODY>
<a href="#" onclick="return hs.htmlExpand(this, { contentId: 'highslide-html' } )"
		class="highslide">
		<img src="/smc/media/images/7f000001-05d9-7000.jpg">
		<br>
	Play Video
<div class="highslide-html-content" id="highslide-html">
<object onclick="alert('hello');" id="d4d8a2ffe943eb6d279872f6d4569ee3" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="250" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" name="d4d8a2ffe943eb6d279872f6d4569ee3rs">
<param name="flashvars" value="file=/smc/media/videos/7f000001-5f78-483f.flv&image=/smc/media/videos/videothumbs/7f000001-7a9b-0625.jpg&" />
<param name="movie" value="/smc/media/videos/player.swf" />
<embed type="application/x-shockwave-flash" width="250" height="100" src="/smc/media/videos/player.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="file=/smc/media/videos/7f000001-5f78-483f.flv&mage=/smc/media/videos/videothumbs/7f000001-7a9b-0625.jpg">
</embed>
</object>
</div>
</a>
 
</BODY>
</HTML>

Open in new window

You can replace the A tag with DIV if you prefer. The following example uses DIV and adds a link to close the shown video, returning to the previous view:
<HTML>
<HEAD>
<script type="text/javascript" src="highslide/highslide-with-html.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
</HEAD>
<BODY>
<div class="highslide" onclick="return hs.htmlExpand(this, { contentId: 'highslide-html' } )">
<img  src="/smc/media/images/7f000001-05d9-7000.jpg" >
</div>
<div class="highslide-html-content" id="highslide-html">
<object id="d4d8a2ffe943eb6d279872f6d4569ee3" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="250" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" name="d4d8a2ffe943eb6d279872f6d4569ee3rs">
<param name="flashvars" value="file=/smc/media/videos/7f000001-5f78-483f.flv&image=/smc/media/videos/videothumbs/7f000001-7a9b-0625.jpg&" />
<param name="movie" value="/smc/media/videos/player.swf" />
<embed type="application/x-shockwave-flash" width="250" height="100" src="/smc/media/videos/player.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="file=/smc/media/videos/7f000001-5f78-483f.flv&mage=/smc/media/videos/videothumbs/7f000001-7a9b-0625.jpg">
</embed>
</object>
<br>
<a class="highslide-close" href="#" onclick="return hs.close(this);">Close</a>
</div>
</BODY>
</HTML>

Open in new window

profya,
Your last bit of code works great. I have a couple of questions:

1)The full screen button is not working. When I click on it, nothing happens.

2)If I play the video, then hit the Close link, the video doesn't stop playing. When I click on image to open the video again, it is still playing.

3)I'm getting 3 javascript errors on the page. See the attached errors.

Thanks very much for your help!
Webpage error details
 
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; WOW64; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; InfoPath.2; .NET CLR 3.5.30729; .NET CLR 3.0.30729)
Timestamp: Wed, 24 Jun 2009 00:35:08 UTC
 
 
Message: Invalid argument.
Line: 27
Char: 3
Code: 0
URI: http://sitehere.org/ie_png.js
 
 
Message: 'this.styleSheet' is null or not an object
Line: 71
Char: 4
Code: 0
URI: http://sitehere.org/ie_png.js
 
 
Message: Object expected
Line: 33
Char: 1
Code: 0
URI: http://sitehere.org/vidtest.html

Open in new window

Good news. Regarding your questions:
1) Full screen param is missing,
in the <object> add:
<param name="allowfullscreen" value="true" />
and in the <embed> add this attribute:
allowfullscreen="true"
2) The close button stops playing the video on FireFox for example, however, it fails on IE. This may need to modifiy the javascript file (highslide.js)
3) Unless you give me the entire code I can not figure out what's the problem. It is related to this file ie_png.js. I don't know what's its function and how it is referenced,

I found a good best way to stop playing the flash when close is clicked, it is attached. Replace "player1" with the name you are using in your code. I have tested it right now on IE, it worked fine.

<a class="highslide-close" href="#" onclick="document['player1'].sendEvent('STOP');return hs.close(this); ">Close</a>

Open in new window

Awesome!
A couple more small things then I think we're home free!

You can see the entire page here: www.mwebdev.com (it will re-direct you) to see the javascript errors.

Also, I've replaced "player1" with "movie" since this is the param name in my <object> code. This must not be correct because my Close link is not doing anything. Thanks again!
Something weird is also happening in FireFox. When I play the video, I get what looks like a video player embedded within another video player and the video never plays. In IE it works fine.
In this I stopped using double quotation around src, width, height and alt attribs. I hope this works:
<a href="javascript: discr=\"<h3><?php echo $row_VideoRecordset['Description']; ?></h3><p><br><?php echo $row_VideoRecordset['LongDescription']; ?><br> <br> <img src='members/<?php echo $row_VideoRecordset['Image']; ?>' width='127' height='85' alt='Sponsor Graphic'><br> </p>\";createPlayer('/members/<?php echo $row_VideoRecordset['FLink']; ?>', discr)">

Open in new window

Sorry, this is a wrong post, I am online with someone else.
There is a difference between the id of the div we use to show video in and the id of the object. You should use the id of the object. I have tested that on IE, it is working fine. Let us now concentrate on the close problem, then we can see other problems.
Try replacing the close link to:
<a class="highslide-close" href="#" onclick="document[d4d8a2ffe943eb6d279872f6d4569ee3'].sendEvent('STOP');return hs.close(this); ">Close</a>

Open in new window

I replaced the Close code and still nothing happpens with I click on the link.
www.mwebdev.com
For the close button to work you need to activate scriptaccess. In the object tag add:
<param name="allowscriptaccess" value="always" />
and in the embed tag:
allowscriptaccess="always"

the close link:
<a class="highslide-close" href="#" onclick="document.getElementById('d4d8a2ffe943eb6d279872f6d4569ee3').sendEvent('STOP');return hs.close(this); ">Close</a>

since not all browsers support document[id], the standard is: document.getElementById(id)
The object full tag is attached:
<object id="d4d8a2ffe943eb6d279872f6d4569ee3" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="250" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" name="d4d8a2ffe943eb6d279872f6d4569ee3rs">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
 
<param name="flashvars" value="file=http://www.woodfieldacademy.org/woodfield_vid/Woodfield_Academy.flv" />
<param name="movie" value="http://www.woodfieldacademy.org/woodfield_vid/player.swf" />
<embed type="application/x-shockwave-flash" width="400" height="250" allowscriptaccess="always" src="http://www.woodfieldacademy.org/woodfield_vid/player.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="file=http://www.woodfieldacademy.org/woodfield_vid/player.swf" allowfullscreen="true">
</embed>
</object>

Open in new window

Ok, try this new code and feed me back.
Now it works perfectly in IE, but not in FireFox. The video is not playing at all.
www.mwebdev.com
This fixes the close problem. It was related to cross-browser compatibility issues. I'll see the stoppage problem.
<a class="highslide-close" href="#" onclick="if (document.getElementById('d4d8a2ffe943eb6d279872f6d4569ee3').sendEvent && document.getElementById('d4d8a2ffe943eb6d279872f6d4569ee3').sendEvent!='undefined') document.getElementById('d4d8a2ffe943eb6d279872f6d4569ee3').sendEvent('STOP');return hs.close(this); ">Close</a>

Open in new window

The player appears inside the big player in FireFox because you are using an incorrect flashvars for embed tag. Change to:
flashvars="file=http://www.woodfieldacademy.org/woodfield_vid/Woodfield_Academy.flv"

Please apply the close button code and this one and let me see if there are still some problems.
Looks like we still have the problem in FireFox. The Close link works fine.
I'll see the page source and examine it.
You didn't replace the flashvars of the embed object. I am attaching the whole <object> tag, in advance I am saying: everything is working fine.
<object id="d4d8a2ffe943eb6d279872f6d4569ee3" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="250" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" name="d4d8a2ffe943eb6d279872f6d4569ee3rs">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars="file=http://www.woodfieldacademy.org/woodfield_vid/Woodfield_Academy.flv" />
<param name="movie" value="http://www.woodfieldacademy.org/woodfield_vid/player.swf" />
<embed type="application/x-shockwave-flash" width="400" height="250" allowscriptaccess="always" src="http://www.woodfieldacademy.org/woodfield_vid/player.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="file=http://www.woodfieldacademy.org/woodfield_vid/Woodfield_Academy.flv" allowfullscreen="true">
</embed>
</object>

Open in new window

I just replaced the code you posted, and I'm sorry! It works fine in FireFox but the video is not playing in IE now! Sorry!
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Awesome!

Now what about the javascript errors in IE?
Let me see.
Errors you are encountering are related to:
1) The VML.(ie_png.js). For more info http://www.google.com/search?q=styleSheet.addRule(this.ns+%2B+%27\\%3Ashape%27%2C+%27position%3Aabsolute%3B%27)%3B&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a
You can temporarily stop the error by commenting the line :
//styleSheet.addRule(this.ns + '\\:shape', 'position:absolute;');
in ie_png.js file.
2) The second error is related to a missing method . Please place the code snippet attached within <HEAD> </HEAD> page section.

What I suggest is to initiate a new question regarding ie_ping since I do not have enough information yet about.

I hope this helps :)
<script type="text/javascript"> 
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[ i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[ i];}}
}
</script>

Open in new window

Great!

Two questions out of curiosity. Why is the pointer a magnifying glass instead of the standard hand? And what causes the <a href> image to disappear from the background when it is clicked?
All this stuff is included within the highslide javascript file to provide you with the rich presentation.