Hi Thenyl,
I'm new to this forum, just like you. This is actually the first post for both of us.
As a general notice, I must say that posts are rarely answered and this is not very encouraging. Flowplayer is not very easy to set up, especially by simple users like us. I saw your post and was interested to find out how these guys made the player to pop up when a link is clicked. I spent hours searching their source code and finally got it! I wish to share it with you and anyone else who might be interested.
First, you need three images: the pop up horizontal bar on top, the red close button above the player and (optionally) the small video camera next to the text link. Here's where to find them:
http://www.vhikits.com/functional_assessment/images/titlebar.png http://www.vhikits.com/functional_assessment/images/close_button.jpg http://www.vhikits.com/products/software/images/exported/video.jpg
Next step: create a file with the following javascript code and save it as video.js or whatever.js you like. I have it saved as test.js at the moment and this is how you will see it in the HTML code later on. The contents of my test.js file:
var movieplayer = null;
function play_movie()
{
document.getElementById("video").style.display ="inline";
var scrollTop = document.body.scrollTop;
if (scrollTop == 0)
{
if (window.pageYOffset)
scrollTop = window.pageYOffset;
else
scrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
}
document.getElementById("video").style.top = scrollTop+ 200;
if(movieplayer != null)
{
movieplayer.load();
movieplayer.play();
}
}
function close_movie()
{
if(movieplayer != null)
{
movieplayer.unload();
}
document.getElementById("video").style.display="none";
}
function on_load()
{
if(flashembed.isSupported([9, 0]))
{
movieplayer = $f("player", "/videos/flowplayer-3.2.5.swf", {
clip: {
// when this is false playback does not start until play button is pressed
autoPlay: false
}
});
}
else
{
document.getElementById("video_window").style.textAlign = "center";
var player = document.getElementById("player");
player.href = "http://www.adobe.com/go/getflashplayer";
player.innerHTML = "Download Adobe® Flash™ Player.";
player.style.display="inline";
player.style.position = "relative";
player.style.top = "130px";
}
}
Make sure that you edit the line
movieplayer = $f("player", "/videos/flowplayer-3.2.5.swf", {
to reflect the correct path to your flowplayer-3.2.5.swf file.
Next comes the HTML code to implement everything. I will give you the code to a test page I created and the pop up works perfectly. Just make sure that paths to images, files etc are properly edited to your needs. Another remark: You may prefer to create an external style sheet with the contents between the <style> and </style> tags and enhance it to your likings. That's what I will do but I'm still in the test phase.
<head>
<script src="/videos/flowplayer-3.2.4.min.js"></script>
<script src="/videos/test.js"></script>
<style>
#video
{
position:absolute;
width:425px;
height:320px;
top:200px;
left:232px;
border-color:black;
border-style:solid;
border-width:1px;
background-color:white;
display:none;
}
#dialog_bar
{
background-image:url(/images/design/video_titlebar.png);
height:20px;
width:425px;
}
#dialog_bar img
{
position:relative;
left:405px;
}
#player
{
display:block;
width:425px;
height:300px;
text-decoration:underline;
color:Blue;
}
</style>
</head>
<body>
<div id="watchdemo">
<img src="/products/software/images/exported/video.jpg" onclick="play_movie();">
<a href="javascript:play_movie();">View a video that describes<br>the software features</a>
</div>
<div id="video">
<div id="dialog_bar">
<img src="/images/design/video_close.jpg" onclick="javascript:close_movie();" border="0">
</div>
<div id="video_window">
<a id="player" href="/videos/durham.flv"></a>
</div>
</div>
<script language="JavaScript">
flowplayer("player", "/videos/flowplayer-3.2.5.swf");
</script>
</body>
I hope that I have covered everything and apologise to the owners of the "vhikits" site for using their code and giving the source of their images. I hope they don't mind.
Good luck and please post back if you were successful.
