Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts

    mvplayer a url-list player widget Part 1/3

    (1 of 3)
    Complete source for mvplayer is in Part 3

    Before any thing else - this widget wil not validate, so if you only want validating widgets(code) on your page, this may not be for you.

    I never really knew what to call this widget, so I went with mvplayer, Any-Site PlayLists. Mvplayer is a
    simple url list player. You provide a list of urls along with how long to keep the url open, and mvplayer
    plays through the list. I use it to allow music selections to play in the background while working, and also to allow various web video
    series to be viewed serially.

    mvplayer works in modern major browsers, IE, FF, Chrome, Safari,.. and can co-exist with js libraries (jquery etc).

    The idea is to allow the full web page to be displayed, avoiding most if not all current licensing issues as you are opening the site itself. No scraping, xhr, or api required.

    To use the widget as is, all you need to do is provide a list of vide/music/point-of-interest page urls described later.
    You do need my argreader.js script you can find on this site.

    1 - Load the argreader script before loading the widget.
    2 - Load the widget (mvplayer.js script)
    when you load the script, you need to provide a couple of arguments.
    a) you need to let the script know what element to load the widget into: el=elementId
    b) you need to also let the script know what file the initial url list is in: urls=urlfilename
    c) optionally you can select a color for the player (blue, teal, tin, or orange). If no color is provided orange is the default.

    Here's a bare example index page where the url list is in a file named 'rsmvallvids.js' and the widget will be placed in the 'holder' element.
    10-27-10 corrected filename. originally enterad (truncated) as mvp.js, changed to the correct filename mvplayer.js
    Code:
    <!doctype html>
    <html>
    <head>
    <title>
    Any-Site PlayLists
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type='text/css'> 
            body{margin:0px;padding:0px;}
    </style>
    <script type="text/javascript" src="argreader.js"></script>
    <script type="text/javascript" src="mvplayer.js?urls=rsmvallvids&el=holder1&color=orange"></script>
    </head>
    <body>
    <div id="holder1"></div>
    </body>
    </html>
    You can load the mvplayer widget into any appropriate element.

    The url-list file (rsmvallvids.js in the example) requires a specific format shown here:
    Code:
    rsmv.allvids=[
    	{
    		name:"Lady Gaga",
    		vids:[
    			["Bad Romance","http://www.youtube.com/watch?v=qrO4YZeyl0I",Time(0,5,08)],
    			["Poker Face","http://www.youtube.com/watch?v=bESGLojNYSo",Time(0,3,35)],
    			["Beautiful Dirty Rich","http://www.youtube.com/watch?v=7Nr33m1zXVE&feature=channel",Time(0,2,47)],
    			["Love Game","http://www.youtube.com/watch?v=1mB0tP1I-14",Time(0,3,37)]
    		]
    	},
    	{
    		name:"Fergi & Stefani",
    		vids:[
    			["Fergilicious","http://www.youtube.com/watch?v=5T0utQ-XWGY",Time(0,3,46)],
    			["London Bridge","http://www.youtube.com/watch?v=pu7VaGRjH9w",Time(0,3,29)],
    			["My Humps","http://www.youtube.com/watch?v=iEe_eraFWWs",Time(0,3,54)],
    			["What You Waintin For","http://www.youtube.com/watch?v=uTfbCOPApsQ",Time(0,3,27)],
    			["Rich Girl","http://www.youtube.com/watch?v=OvjVKNSpssw&feature=related",Time(0,3,57)]
    		]
    	},
    ]
    (You can add as many url play list objects as you want)

    The rsmv.allvids array is not optional. It holds a series of url-list objects, each of which has a name and a vids list.

    The vids list is an array that holds page-arrays containing 1:the page description, 2:the page url, and 3:the time to display the page.

    When playing a list, each page-url will be opened, allowed to stay open for the allotted time, and then automatically closed so the
    next page can be opened. The pages open in a new tab.

    If you open a browser instance and start the play list, you can then open a second browser instance to do your work in and allow the mvplayer to do its thing in the background - good for music.

    You can have multiple lists in separate files, and call the one you want to use through the calling scripts "urls" argument like above. The only requirement is the url-list file has the proper rsmv.allvids array structure shown above, and the "urls" script argument matches the filename.

    Once mvplayer is on the page, you can add new play lists by clicking the "MyLists" link at the bottom of the mvplayer widget.

    When you do, you see a small panel popup that allows you to either enter urls individually, or in bulk.

    To add one or several lists (bulk), all you need to do is paste the url-lists into the textarea and click "add list".

    A typical url-list looks like this:
    Code:
    CSN
    ["Teach Your Children","http://www.youtube.com/watch?v=p6pphVs8bF0&feature=related",Time(0,2,26)]
    ["Southern Cross","http://www.youtube.com/watch?v=HlVNod_krsM&feature=related",Time(0,4,40)]
    ["Wasted On The Way","http://www.youtube.com/watch?v=x_kL1RlqwY8&feature=related",Time(0,3,18)]
    
    Jane's Addiction
    ["Stop","http://www.youtube.com/watch?v=ZwI02OHtZTg",Time(0,4,36)]
    ["Been Caught Stealing","http://www.youtube.com/watch?v=jrwjiO1MCVs&feature=channel",Time(0,3,37)]
    ["Jane Says","http://www.youtube.com/watch?v=xh-5FI21s6M",Time(0,4,47)]
    You can see the format is similar to the rsmv.allvids array, but there are no curly braces, nor commas seperating the page-url arrays.
    Basically, the format is: List name, followed by a list of any number of page-url arrays for the named list.

    If you forget the format, you can click the 'Dump' link on the widget and the current play lists will show in the textarea.

    After you've added a new list or set of lists you can close the panel by clicking the "close" link.

    A couple of notes:
    1) When you add MyList, if you enter junk text instead of the proper format, the player may list the gibberish, but it should not blow up on you (it's unlikely singles will be added).
    2) URL's come and go. Some urls may stop delivering the content you want to display, just change, remove, or replace the url to resolve the issue. At worst, you leave it up to the viewer to click the 'Skip' link to go to the next url in the list.

    Personally, I still use youtube a lot, but that's obviously not a requirement. You can show any site you want to include in your own presentations. You can even offer a few sets of copy & paste url lists on the page for the viewer to add to mvplayer if they desire.

    Give mvplayer a try, you may like it.

    Here is the code:

    A sample index page was given earlier at the top of the page.

    A sample rsmv.allvids array file named "rsmvallvids.js" for the example above (any name will work as long as it matches the urls argument in the script call).
    note - I don't censor sites, there may be (read will be) R rated material in the links.
    Code:
    /* save as rsmvallvids.js */
    rsmv.allvids=[
    	{
    		name:"Lady Gaga",
    		vids:[
    			["Bad Romance","http://www.youtube.com/watch?v=qrO4YZeyl0I",Time(0,5,08)],
    			["Poker Face","http://www.youtube.com/watch?v=bESGLojNYSo",Time(0,3,35)],
    			["Beautiful Dirty Rich","http://www.youtube.com/watch?v=7Nr33m1zXVE&feature=channel",Time(0,2,47)],
    			["Love Game","http://www.youtube.com/watch?v=1mB0tP1I-14",Time(0,3,37)]
    		]
    	},
    	{
    		name:"Fergi & Stefani",
    		vids:[
    			["Fergilicious","http://www.youtube.com/watch?v=5T0utQ-XWGY",Time(0,3,46)],
    			["London Bridge","http://www.youtube.com/watch?v=pu7VaGRjH9w",Time(0,3,29)],
    			["My Humps","http://www.youtube.com/watch?v=iEe_eraFWWs",Time(0,3,54)],
    			["What You Waintin For","http://www.youtube.com/watch?v=uTfbCOPApsQ",Time(0,3,27)],
    			["Rich Girl","http://www.youtube.com/watch?v=OvjVKNSpssw&feature=related",Time(0,3,57)]
    		]
    	},
    	{
    		name:"Alanis Morissette",
    		vids:[
    			["Ironic","http://www.youtube.com/watch?v=Jne9t8sHpUc",Time(0,4,06)],
    			["You Oughta Know","http://www.youtube.com/watch?v=NPcyTyilmYY&feature=fvw",Time(0,5,15)],
    			["perfect","http://www.youtube.com/watch?v=ymG3eQempnI",Time(0,3,33)],
    			["hand in my pocket","http://www.youtube.com/watch?v=hGjaaQAvSTA",Time(0,4,03)],
    			["All I Really Want (Live)","http://www.youtube.com/watch?v=8qQ34hq66dY&feature=related",Time(0,5,45)]
    		]
    	},
    	{
    		name:"Hole",
    		vids:[
    			["Celebrity Skin","http://www.youtube.com/watch?v=O3dWBLoU--E",Time(0,2,43)],
    			["Doll Parts","http://www.youtube.com/watch?v=d2cWaegnrTE&feature=PlayList&p=8E0AE68601F20C00&playnext=1&playnext_from=PL&index=52",Time(0,3,31)],
    			["Violet","http://www.youtube.com/watch?v=Y-T2Pw3hixc",Time(0,3,30)],
    			["gold dust woman","http://www.youtube.com/watch?v=w76dv8k-ZT4&feature=related",Time(0,4,13)],
    			["I'll do Anything [PV/MV]","http://www.youtube.com/watch?v=Kky-53Es--U&feature=related",Time(0,2,57)]
    		]
    	},
    	{
    		name:"Johny Cash",
    		vids:[
    			["Hurt","http://www.youtube.com/watch?v=o22eIJDtKho",Time(0,3,52)],
    			["when the man comes around","http://www.youtube.com/watch?v=FtK-QCiD-FE&feature=related",Time(0,4,26)],
    			["God's Gonna Cut You Down","http://www.youtube.com/watch?v=eJlN9jdQFSc",Time(0,2,49)],
    			["Goin' By The Book","http://www.youtube.com/watch?v=VEyujOSEexM&feature=channel",Time(0,3,25)]
    		]
    	},
    	{
    		name:"Marilyn Manson",
    		vids:[
    			["The New ****","http://www.youtube.com/watch?v=4kQMDSw3Aqo",Time(0,4,21)],
    			["Sweet Dreams","http://www.youtube.com/watch?v=m6VojYGrnpg",Time(0,4,39)],
    			["The Beautiful People","http://www.youtube.com/watch?v=Ypkv0HeUvTc",Time(0,3,46)],
    			["The Nobodies","http://www.youtube.com/watch?v=qi5nTb-NRFU",Time(0,3,36)]
    		]
    	},
    	{
    		name:"White Zombie",
    		vids:[
    			["Thunder Kiss 65","http://www.youtube.com/watch?v=yPNFVj-pISU",Time(0,3,57)],
    			["Dragula","http://www.youtube.com/watch?v=EqQuihD0hoI&feature=related",Time(0,3,49)],
    			["Never Gonna Stop","http://www.youtube.com/watch?v=0698sTH7mUk&feature=related",Time(0,3,12)],
    			["More Human Than Human","http://www.youtube.com/watch?v=E0E0ynyIUsg",Time(0,4,16)],
    			["Living Dead Girl","http://www.youtube.com/watch?v=BvsMPOfblfg&feature=related",Time(0,3,24)]
    		]
    	},
    	{
    		name:"The Beatles",
    		vids:[
    			["Get Back","http://www.youtube.com/watch?v=YqiAl84ipIk",Time(0,3,14)],
    			["Lucy In The Sky","http://www.youtube.com/watch?v=A7F2X3rSSCU",Time(0,3,27)],
    			["I Am The Walrus","http://www.youtube.com/watch?v=Nnpil_pRUiw",Time(0,4,42)],
    			["Hello Goodbye","http://www.youtube.com/watch?v=Qf2S7kKLtEQ",Time(0,3,33)]
    		]
    	},
    	{
    		name:"Benny Benassi",
    		vids:[
    			["Push Me","http://www.youtube.com/watch?v=jIHNkPyPxVM",Time(0,2,29)],
    			["Who's Your Daddy","http://www.youtube.com/watch?v=CEJmNqmJGmA&feature=related",Time(0,3,33)],
    			["No matter what you do","http://www.youtube.com/watch?v=tvKH3Nbmkp8&feature=related",Time(0,3,26)],
    			["Destination Unknown - Crystal Waters","http://www.youtube.com/watch?v=qkCeMg1E4lA&feature=related",Time(0,3,02)],
    			["da Corr vs Fedde Le Grand Let Me Think About It ","http://www.youtube.com/watch?v=19WUwZYM7bM&feature=related",Time(0,4,46)]
    		]
    	},
    	{
    		name:"Favorites",
    		vids:[
    			["Edie Brickell & New Bohemians - What I Am","http://www.youtube.com/watch?v=tDl3bdE3YQA",Time(0,4,01)],
    			["The Cranberries - Zombie","http://www.youtube.com/watch?v=6Ejga4kJUts",Time(0,5,15)],
    			["Sinead O'Connor - Nothing Compares 2 U","http://www.youtube.com/watch?v=iUiTQvT0W_0",Time(0,5,15)],
    			["Nirvana-In Bloom","http://www.youtube.com/watch?v=wY3oEvaq71A&feature=related",Time(0,4,11)],
    			["Radiohead - Creep","http://www.youtube.com/watch?v=XFkzRNyygfk",Time(0,3,56)],
    			["Violent Femmes | Blister in the Sun","http://www.youtube.com/watch?v=2aljlKYesT4&feature=related",Time(0,3,25)],
    			["The White Stripes","http://www.youtube.com/watch?v=6j7huh5Egew",Time(0,3,58)],
    			["Trio - Da, Da, Da","http://www.youtube.com/watch?v=hSwJ2rjUSdc&feature=channel",Time(0,3,27)]
    		]
    	},
    	{
    		name:"Misc",
    		vids:[
    			["Fiona Apple - Criminal","http://www.youtube.com/watch?v=FFOzayDpWoI",Time(0,4,23)],
    			["Fiona Apple - Fast As You Can","http://www.youtube.com/watch?v=NbxqtbqyoRk&feature=channel",Time(0,3,55)],
    			["The Toadies - Possum Kingdom","http://www.youtube.com/watch?v=EkwD5rQ-_d4",Time(0,5,15)],
    			["Everclear - I Will Buy You A New Life","http://www.youtube.com/watch?v=wERdV8wRB6Q&feature=related",Time(0,3,59)],
    			["Everclear - Santa Monica","http://www.youtube.com/watch?v=ryYVzcLoe6A",Time(0,3,20)],
    			["Everlast - What It's Like","http://www.youtube.com/watch?v=gliNv1eFF3w",Time(0,4,46)],
    			["RATM -Killing in the name","http://www.youtube.com/watch?v=fkuOAY-S6OY",Time(0,5,13)],
    			["RATM -Bulls On Parade","http://www.youtube.com/watch?v=-58-36lSqG4&feature=related",Time(0,3,53)],
    			["Monster Magnet - Space Lord","http://www.youtube.com/watch?v=dscfeQOMuGw",Time(0,4,30)]
    		]
    	}
    ];
    The four css files - save each with the indicated name:
    These files are used to provide the style for the mvplayer based on the color argument in the initial script call.
    Code:
    /* save as mvplayerBlue.css */
    #xp_d1{width:150px;height:155px;padding-left:3px;background:#000080;}
    .rsmvbuttoni {display:inline;cursor:pointer;color:#fff;text-decoration:none;}
    .rsmvi,.rsmvbuttoni:link,.rsmvbuttoni:visited,.rsmvbuttoni:active {color:#6666ff;}
    .rsmvbutton {display:block;cursor:pointer;color:#6666ff;text-decoration:none;}
    .rsmvbuttoni:hover,.rsmvbutton:hover {color:#fff;}
    #xp_d1 ul {list-style:none;margin:0px;padding:0px;border:0px;}
    .headeron {display:inline;font-size:10px;cursor:pointer;padding-left:10px;padding-right:10px;text-decoration:none;color:#6666ff;}
    .headeron:hover {font-size:10px;cursor:pointer;padding-left:10px;padding-right:10px;text-decoration:none;color:#6666ff;cursor:default;}
    .headeroff {display:inline;font-size:10px;cursor:pointer;padding-left:10px;padding-right:10px;text-decoration:none;color:#656565;}
    .headeroff:hover {font-size:10px;cursor:pointer;padding-left:10px;padding-right:10px;text-decoration:none;color:#fff;}
    .showlist {display:block;}
    .hidelist {display:none;}
    .footer {font-size:10px;color:#6666ff;}
    #sel0 {position:relative;width:99%;height:98px;overflow-x:hidden;overflow-y:scroll;border-top:solid 1px #6666ff;border-bottom:solid 1px #6666ff;}
    #sel1 {position:relative;width:99%;height:114px;overflow-x:hidden;overflow-y:scroll;border-top:solid 1px #6666ff;border-bottom:solid 1px #6666ff;}
    #customMVList {position:relative;display:none;}
    #customMVList table {position:absolute;z-index:99;background:#000080;}
    
    /* save as mvplayerOrange.css */
    #xp_d1{width:150px;height:155px;padding-left:3px;background:#ff6600;}
    .rsmvbuttoni {display:inline;cursor:pointer;color:#fff;text-decoration:none;}
    .rsmvi,.rsmvbuttoni:link,.rsmvbuttoni:visited,.rsmvbuttoni:active {color:#ffdd00;}
    .rsmvbutton {display:block;cursor:pointer;color:#ffdd00;text-decoration:none;}
    .rsmvbuttoni:hover,.rsmvbutton:hover {color:#fff;}
    #xp_d1 ul {list-style:none;margin:0px;padding:0px;border:0px;}
    .headeron {display:inline;font-size:10px;cursor:pointer;padding-left:10px;padding-right:10px;text-decoration:none;color:#ffdd00;}
    .headeron:hover {font-size:10px;cursor:pointer;padding-left:10px;padding-right:10px;text-decoration:none;color:#ffdd00;cursor:default;}
    .headeroff {display:inline;font-size:10px;cursor:pointer;padding-left:10px;padding-right:10px;text-decoration:none;color:#353535;}
    .headeroff:hover {font-size:10px;cursor:pointer;padding-left:10px;padding-right:10px;text-decoration:none;color:#fff;}
    .showlist {display:block;}
    .hidelist {display:none;}
    .footer {font-size:10px;color:#ffdd00;}
    #sel0 {position:relative;width:99%;height:98px;overflow-x:hidden;overflow-y:scroll;border-top:solid 1px #ffdd00;border-bottom:solid 1px #ffdd00;}
    #sel1 {position:relative;width:99%;height:114px;overflow-x:hidden;overflow-y:scroll;border-top:solid 1px #ffdd00;border-bottom:solid 1px #ffdd00;}
    #customMVList {position:relative;display:none;}
    #customMVList table {position:absolute;z-index:99;background:#ff6600;}
    
    /* save as mvplayerTeal.css */
    #xp_d1{width:150px;height:155px;padding-left:3px;background:#008080;}
    .rsmvbuttoni {display:inline;cursor:pointer;color:#fff;text-decoration:none;}
    .rsmvi,.rsmvbuttoni:link,.rsmvbuttoni:visited,.rsmvbuttoni:active {color:#66ffff;}
    .rsmvbutton {display:block;cursor:pointer;color:#66ffff;text-decoration:none;}
    .rsmvbuttoni:hover,.rsmvbutton:hover {color:#fff;}
    #xp_d1 ul {list-style:none;margin:0px;padding:0px;border:0px;}
    .headeron {display:inline;font-size:10px;cursor:pointer;padding-left:10px;padding-right:10px;text-decoration:none;color:#66ffff;}
    .headeron:hover {font-size:10px;cursor:pointer;padding-left:10px;padding-right:10px;text-decoration:none;color:#66ffff;cursor:default;}
    .headeroff {display:inline;font-size:10px;cursor:pointer;padding-left:10px;padding-right:10px;text-decoration:none;color:#353535;}
    .headeroff:hover {font-size:10px;cursor:pointer;padding-left:10px;padding-right:10px;text-decoration:none;color:#fff;}
    .showlist {display:block;}
    .hidelist {display:none;}
    .footer {font-size:10px;color:#66ffff;}
    #sel0 {position:relative;width:99%;height:98px;overflow-x:hidden;overflow-y:scroll;border-top:solid 1px #66ffff;border-bottom:solid 1px #66ffff;}
    #sel1 {position:relative;width:99%;height:114px;overflow-x:hidden;overflow-y:scroll;border-top:solid 1px #66ffff;border-bottom:solid 1px #66ffff;}
    #customMVList {position:relative;display:none;}
    #customMVList table {position:absolute;z-index:99;background:#008080;}
    
    /* save as mvplayerTin.css */
    #xp_d1{width:150px;height:155px;padding-left:3px;background:#191919;}
    .rsmvbuttoni {display:inline;cursor:pointer;color:#fff;text-decoration:none;}
    .rsmvi,.rsmvbuttoni:link,.rsmvbuttoni:visited,.rsmvbuttoni:active {color:#7f7f7f;}
    .rsmvbutton {display:block;cursor:pointer;color:#7f7f7f;text-decoration:none;}
    .rsmvbuttoni:hover,.rsmvbutton:hover {color:#fff;}
    #xp_d1 ul {list-style:none;margin:0px;padding:0px;border:0px;}
    .headeron {display:inline;font-size:10px;cursor:pointer;padding-left:10px;padding-right:10px;text-decoration:none;color:#7f7f7f;}
    .headeron:hover {font-size:10px;cursor:pointer;padding-left:10px;padding-right:10px;text-decoration:none;color:#7f7f7f;cursor:default;}
    .headeroff {display:inline;font-size:10px;cursor:pointer;padding-left:10px;padding-right:10px;text-decoration:none;color:#353535;}
    .headeroff:hover {font-size:10px;cursor:pointer;padding-left:10px;padding-right:10px;text-decoration:none;color:#fff;}
    .showlist {display:block;}
    .hidelist {display:none;}
    .footer {font-size:10px;color:#7f7f7f;}
    #sel0 {position:relative;width:99%;height:98px;overflow-x:hidden;overflow-y:scroll;border-top:solid 1px #7f7f7f;border-bottom:solid 1px #7f7f7f;}
    #sel1 {position:relative;width:99%;height:114px;overflow-x:hidden;overflow-y:scroll;border-top:solid 1px #7f7f7f;border-bottom:solid 1px #7f7f7f;}
    #customMVList {position:relative;display:none;}
    #customMVList table {position:absolute;z-index:99;background:#191919;}
    Last edited by rdspoons; 09-27-2010 at 08:44 PM. Reason: fat fingered filename. file should be mvplayer.js not mvp.js. Change made.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •