CONGRATULATIONS! Video embedding has now evolved [quote][b]updates:[/b] * I've switched it from using object to embed. * The loadipod and additional function have been adjusted. * All functions should work great in IE now * It works in my IE 7.0, but let me know if somethings wrong in other versions [b]-additional customization variables-[/b] [b]&overstretch[/b] - stretches the videos to fit the display area. not included in the code. [b]&image[/b] - adds a preview image to your video. also not included. images can be added to the tracks in your playlist like this: [quote]<image>URL_TO PREVIEW IMAGE</image>[/quote] [/quote] this tutorial will show you how to implement the playlist version in your friendster profile -screenshot- [img]http://h1.ripway.com/shakiro/playlists/flvp.JPG[/img] [b]Preview:[/b] [url=http://profiles.friendster.com/babababooya][sub]shakiro's lab[/sub][/url] [b]True Full Screen Feature [/b] Videos always look better in true full screen. Just click on the fullscreen button, next to the volume in your player. [b]Use your own logo:[/b] notice the duck in the corner? You can also change the color for your player [sup]*see CUSTOMIZATIONS below[/sup] [b]The Player:[/b] This code uses the famous [b]JW FLV Player[/b]. Many famous video host sites have based their video players on it. The code will also play your playlists at random and display the titles of the playlists you play as well as track titles, but if you only want one playlist then that's okay too. If you already know how to rip the urls of online videos, this is a great feature to use. [b]Requirement:[/b] To use the code [b]AS IS[/b] you need to sacrifice a mainbox. Mediabox is the default here, but if you are using CSS to hide a mainbox like blogs or whatever, then you should unhide it & use that one. Also, if you do not want to sacrifice any mainboxes, [b]you can use addbox[/b](an example for this is given) [b]Step 1:[/b] Download this [url=http://www.jeroenwijering.com/upload/mediaplayer-3-15.zip]zip file[/url] * extract [b]mediaplayer.swf[/b] * upload it. [b]Step 2:[/b] Compile a playlist, or just start off by using a copy of 1 of mine. [b]XML playlists:[/b] These are easy to make once you've seen how they look. Here are some examples of XML playlists: [b]Important[/b] - pls open these links in notepad to view how these examples were encoded [url]http://h1.ripway.com/shakiro/playlists/Music.xml[/url] [url]http://h1.ripway.com/shakiro/playlists/Claymore.xml[/url] [url]http://h1.ripway.com/shakiro/playlists/Clannad.xml[/url] [url]http://h1.ripway.com/shakiro/playlists/Naruto.xml[/url] or you can just copy this code & edit it in notepad, save as xml file: <">* follow the format for the tracks * then upload your xml playlist Also a great tool to use in finding src urls to video files is the [url=http://www.flashvideodownloader.org/]Flash Video Downloader[/url] add-on. This add-on is now available for FF, IE, & Opera. It helps in retrieving video links from sites like crunchy roll.com, mega video.com, tudou.com(China's #1 version of youtube), etc., but [b]IT WILL NOT[/b] work on youtube or google. Still don't know how to use it to get the src url? I don't want to use screenshots, so I'll just briefly explain: [b]a.[/b] Using the add-on, initiate a download of the video, but when it starts downloading quickly cancel the download. [b]b.[/b] A bar will appear at the bottom of your firefox window. [b]c.[/b] right-click the title of the video you canceled & click [b]copy src url[/b], but if you don't see the bar go to your downloads window and right-click the title & click on [b]properties[/b], then it should show you the link [b]d.[/b] now you have your video link [b]Need music videos?[/b] Use google to search mysp@cetv like this: [img]http://h1.ripway.com/shakiro/2008/mstv.JPG[/img] Then when you find the video, use the add-on I mentioned above to rip the link [b]Step 3:[/b] Copy this code <">[b]THE TWEAKING:[/b] [b]now:[/b] find the 1 instance of [b]LOCATION_TO_MEDIAPLAYER.SWF[/b] and replace them with the direct link to your [b]mediaplayer.swf[/b] [b]Using with addBox[/b]: You will need to adjust the addipod function a little. This part depends on the kind of addBox function you have, but if you have a tracker, then this is how your function addipod should look: <">[b]also:[/b] if you plan on having only 1 playlist, you can remove the [b]CHANGE PLAYLIST[/b] link, which is used to shuffle playlists, not the tracks in your playlists. It looks like this: [quote]"<a href='javascript:void(0);' onclick='loadipod(); return false;'>CHANGE PLAYLIST</a> "+[/quote] it's near the bottom of the code. [b]Optional:[/b] Add more playlists. This is your playlist: [quote]mtv = new Array(); mtv[0]="http://h1.ripway.com/shakiro/playlists/Music.xml"; //your playlist tvled = new Array(); tvled[0]="My Favorite Music"; //title of your playlist[/quote] the [b]mtv[/b] array is a list of playlists. the [b]tvled[/b] array is the corresponding titles of those playlists. to add more simply follow the following format: [quote]mtv = new Array(); mtv[0]="url to playlist 1"; mtv[1]="url to playlist 2"; mtv[2]="url to playlist 3"; mtv[3]="url to playlist 4"; and so on... tvled = new Array(); tvled[0]="Title of playlist 1"; tvled[1]="Title of playlist 2"; tvled[2]="Title of playlist 3"; tvled[3]="Title of playlist 4"; and so on...[/quote] these playlists will load randomly during each view of your profile. [b]CUSTOMIZATION!!:[/b] you can go [url=http://www.jeroenwijering.com/?item=Supported_Flashvars][b]here[/b][/url] for a complete list of variables that you can use to customize the player. They go in the [b]embed src[/b] right after the question mark [b]?[/b] -examples-of-variables- [b]&logo=url_to_your_logo[/b] - I use this to place the duck logo in the corner. use png or gif images...not included. [b]&shuffle=false[/b] - plays the playlists tracks from start to finish. also not included. [b]&frontcolor=0x33ccff[/b] [b]&backcolor=0x000000[/b] [b]&lightcolor=0x777777[/b] - edit these to change the color of the controls. already included [b]&overstretch[/b] - stretches the videos to fit the display area [b]&image[/b] - adds a preview image to your video images can be added to the tracks in your playlist like this: [quote]<image>URL_TO PREVIEW IMAGE</image>[/quote] [b]Additional function:[/b] You can use this function to create links to other video playlists other than the one's found in your loadipod function. I can use this specifically to load xml playlists such as a compiled list to a series. Simply add it to your js. <">You will also need to replace the [b]LOCATION_TO_MEDIAPLAYER.SWF[/b] in this code [b]How to use it:[/b] mediaplayer([b]fplyr,tittle[/b]); There are 2 variables you need to input for this: [b]fplyr:[/b] the url of your playlist file [b]tittle:[/b] the title of your playlist [b]Example:[/b] These are currently the 3 image links below my player. -screenshot- [img]http://h1.ripway.com/shakiro/playlists/imagelinks.JPG[/img] Anyway, here are the codes for my links. There are alot of backslashes here since I used javascript to insert the links into my profile: [quote]<a href='javascript:void(0);' onClick='mediaplayer(\"http://h1.ripway.com/shakiro/playlists/Claymore.xml\",\"Claymore Series\"); return false;'><img src='http://cdimg2.crunchyroll.com/i/thumbs3/04042007/4/b/5/f/4b5f999d223700_thumb.jpg' width='160px'/><br/>Claymore<br/>-This Series is Complete-</a> <a href='javascript:void(0);' onClick='mediaplayer(\"http://h1.ripway.com/shakiro/playlists/Clannad.xml\",\"Clannad Series\"); return false;'><img src='http://cdimg1.crunchyroll.com/i/spire3-tmb/03222008/3/2/4/5/324506fd489b90_thumb.jpg' width='160px'/><br/>Clannad<br/>-This Series is Complete-</a> <a href='javascript:void(0);' onClick='mediaplayer(\"http://h1.ripway.com/shakiro/playlists/Naruto.xml\",\"Naruto Shippuuden - recent episodes -\"); return false;'><img src='http://cdimg1.crunchyroll.com/i/spire3-tmb/11102007/2/2/3/9/2239e8858680b0_thumb.jpg' width='160px'/><br/>Naruto Shippuuden<br/>-recent episodes-</a>[/quote] [b]Important![/b] If you want to have your videos play from 1st to last, then add this customization variable to your function mediaplayer's embeds src's flashvars(right after the question mark) [b]&shuffle=false[/b] [b]Credits:[/b] http://www.jeroenwijering.com/?item=JW_FLV_Player

Last edited by shakiro214 (2008-05-13 05:38:29)