movie clip (played as loop) as song cover
Feb. 20, 2008dino
Hi
I have this wonderful player used in my music web site. Since we do not have a videoclip, but would still like to see some action while playing a song, I'd like to play a short looped flash movie (or a animated gif would do the job as well) as long as a song is played.
Do I have to put my songs as flash movies and play those or is there a more elegant way? I tried to put to loop as image and it worked! Unfortunately it is running always and not only when the player plays some sound. Is it possible to synchronize the "background image" (a movie in this case) with the mp3? It should just do the same as the fake eq.
Thank you for your help.
dino
Feb. 20, 2008andersen
please see the [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/overlayandlogo.htm]overlayandlogo[/url] demo (on the [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/]demopage[/url])
above code with only the overlay and no logo change: <html>
<head>
<style type=text/css>
#placeholder { position:absolute; left:100px; top:100px; z-index:1; }
#overlay { position:absolute; left:100px; top:100px; width:300px; height:220px; z-index:2; }
</style>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var currentState;
var currentItem;
function getUpdate(typ,pr1,pr2,swf) {
if(typ == "state") { currentState = pr1; showOverlay(100); }
else if(typ == "item") { currentItem = pr1; setTimeout("getItemData(currentItem)",100); }
};
function getItemData(idx) {
var obj = thisMovie("playerID").itemData(idx);
if ((obj["description"] != "#")&&(currentState != 0)) {
setOverlay(obj["description"]);
} else {
setOverlay("blank.png");
}
};
function thisMovie(movieName) {
if(navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
};
function setOverlay(theOverlay) {
var tmp = document.getElementById("theOverlayImg");
if (tmp) {
if (tmp.src != theOverlay) {
tmp.src = theOverlay;
}
}
}
function showOverlay(ovlTop) {
var tmp = document.getElementById("overlay");
if (tmp) {
if (currentState != 2) { //hide overlay outside screen
tmp.style.top = -999+"px";
} else {
tmp.style.top = ovlTop+"px";
}
}
}
function createPlayer(theFile) {
var s1 = new SWFObject("mediaplayer.swf","playerID","300","320","7");
s1.addParam("allowfullscreen","false");
s1.addParam("allowscriptaccess","always");
s1.addParam("wmode","opaque");
s1.addVariable("usefullscreen", "false");
s1.addVariable("file", theFile);
s1.addVariable("width", "300");
s1.addVariable("height", "320");
s1.addVariable("displayheight", "220");
s1.addVariable("overstretch", "fit");
s1.addVariable("shuffle", "false");
s1.addVariable("showicons", "false");
s1.addVariable("enablejs","true");
s1.addVariable("javascriptid","playerID");
s1.write("placeholder");
}
</script>
</head>
<body onLoad="createPlayer('playlist.xml');">
<div id="placeholder"><a href="http://www.macromedia.com/go/getflashplayer">Get flash</a> to see this player.</div>
<div id="overlay">
<table width="300" height="220" border="0">
<tr><td align="center" valign="bottom"><img id="theOverlayImg" src="blank.png"></td></tr>
</table>
</div>
</body>
</html>
Feb. 21, 2008dino
Hi
Thanks for your help. The demo shows essentially what I need. The instructions however, are a bit tricky for a newbie like me. What is the blank.png in the posted code? What do I have to put in the playlist? And is it a problem to test it locally (from a file and not form a server) or is it a problem to have a relative path to a file like "pictures/dancingdino.swf"?
After hours of try and error I almost got it. But almost only ;-(
And: Do I actually need the overlay? Are this fancy hamsters in your demo overlayed as well when the player state is not 2? They do exactly what I need...
Thanks!
dino
Feb. 21, 2008andersen
[url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/blank.png]blank.png[/url] is just an empty transparent .png picture used as placeholder - could also be a transparent .gif image
on the [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/overlayandlogo.htm]overlayandlogo[/url] page theres link to the example [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/playlist_overlay.xml]playlist[/url]
the <info> tag is for the download button, the <image> for the preview/cover image and the <annotation> tag holds the overlay
the javascript api will only work online - full paths are easiest while experimenting, then change later when working
the overlay is only needed in order to be able to sync the display with the playing, as the (preview/cover)image keeps showing when paused/finished playing
(note that animated .gif only work in the overlay, they will not play in the player, as flash only show the first frame)
Feb. 21, 2008dino
Hi
Thanks again. I tried to do as you describe it. However, I never see the overlay image (d.png) when the player is stopped. Often it is not possible to stop it at al (appearently there is the blank.png in front of the pause button..). I used the code as you posted it and have now everything in the same folder on a server.
If you have the time to check my playlist for errors it might help. dino2.swf is the movieclip I'd like to see while playing mysong.mp3. d.png i a cover image I'd like to see when paused/stopped.
thanks
dino
<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>
<track>
<title>our first song</title>
<creator>me</creator>
<location>mysong.mp3</location>
<image>dino2.swf</image>
<annotation>d.png</annotation>
</track>
</trackList>
</playlist>
Feb. 21, 2008andersen
if you want to show a different image while pausing, you will have to use that instead of the "blank.png"
note that the content of <image> will not be synced, only the <annotation> content will show and hide with play/pause
make sure the image is not too big and the overlay is sized and placed right - or it might cover the buttons and prevent control
Feb. 23, 2008dino
It is working now. Finally. Thank you very much for your help!! It's cool!
dino
May. 10, 2008miley
<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/XAbcgmwq3EU&hl=en"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/XAbcgmwq3EU&hl=en" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>
Search the Forums
Forum Categories
Support
Here are some helpful links to learn more about the JW Player™:
- Setup Wizard writes player code for you.
- Embedding Flash Tutorial shows how to embed the JW Player™ in your site.
- Forum provides access to over two million JW Player™ users.
- Developers Center (Wiki) explains everything from flashvars to skinning.
- Do you need custom Flash work? Email us.
Monetize Your Video
Earn money with ads from LongTail's AdSolution. Watch our demos and sign up now!
Why Buy a License?
If you don’t buy a commercial license, you cannot use a JW Player™ on (i) a site that has ads; (ii) a corporate site; or a (iii) CMS. Our licenses are very inexpensive, so what are you waiting for? Buy a license today.
