javascript - double js not working -
can please tell me how 2 times #videocontainer on same page:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <title>my videos</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script src="http://connect.facebook.net/en_us/all.js#xfbml=1"></script> <script type="text/javascript"> function loadvideo(playerurl, autoplay) { swfobject.embedswf( playerurl + '&rel=1&border=0&fs=1&autoplay=' + (autoplay?1:0)+'&version=3', 'player', '585', '355', '9.0.0', false, false, {allowfullscreen: 'true'}); /*parse facebook button*/ $('#like').html('<fb:like href="'+playerurl+'" layout="button_count" show_faces="false" width="65" action="like" font="segoe ui" colorscheme="light" />') if (typeof fb != "undefined"){ fb.xfbml.parse(document.getelementbyid('like')) } } function showmyvideos(data) { var feed = data.feed; var entries = feed.entry || []; var html = ['<ul class="videos">']; (var = 0; < entries.length; i++) { var entry = entries[i]; var title = entry.title.$t.substr(0, 20); var thumbnailurl = entries[i].media$group.media$thumbnail[0].url; var playerurl = entries[i].media$group.media$content[0].url; var videoid = playerurl.substr(playerurl.indexof('v/')+2, 11); playerurl = "http://www.youtube.com/v/" + videoid; html.push('<li onclick="loadvideo(\'', playerurl, '\', true)">', '<img src="', thumbnailurl, '" width="94" height="58"/>', '</span></li>'); } html.push('</ul>'); document.getelementbyid('videos').innerhtml = html.join(''); if (entries.length > 0) { loadvideo(entries[0].media$group.media$content[0].url, false); } } $(function(){ $.ajax({ type: "get", url: "http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?time=today&alt=json-in-script&max-results=5&format=5", cache: false, datatype:'jsonp', success: function(data){ showmyvideos(data); }, error: function(xmlhttprequest, textstatus, errorthrown, data){ alert("not able fetch data due feed unavailability!!!"); } }); }) </script> <style> body{ background:#fff; color:#c0c0c0; font-family:arial, helvetica, sans-serif; font-size:100%; line-height:1.125em; } #videocontainer { font-size:.75em; overflow:hidden; position:absolute; left:0px; top:0px; margin-left:40px; margin-top:5px; } #playercontainer { } #like { height: 15px; margin-top: 10px; text-align: right; } object { -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; box-shadow: 5px 5px 5px #ccc; } ul.videos { list-style: none; margin-bottom: 1em; margin-left: 0em; padding-left : 0em; } ul.videos li { cursor: pointer; display: inline; margin-bottom: 1em; padding-right: 28px; } img { -moz-box-shadow: 0px 0px 0px #ccc; -webkit-box-shadow: 0px 0px 0px#ccc; box-shadow: 0px 0px 0px #ccc; } img:hover { -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; box-shadow: 5px 5px 5px #ccc; } </style> </head> <body> <div id="videocontainer"> <div id="playercontainer"> <div id="player"></div> <div id="like"></div> <div id="videos"></div> </div> </div> </body> </html> i tried myself , worked exept large video player displayed 1 time.
first, add container:
<div id="player"></div> <div id="player2"></div> and load flash proper container according function argument:
function loadvideo(playerurl, autoplay, containerid) { if (typeof containerid == "undefined") containerid = "player"; swfobject.embedswf( playerurl + '&rel=1&border=0&fs=1&autoplay=' + (autoplay?1:0)+'&version=3', containerid, '585', '355', '9.0.0', false, false, {allowfullscreen: 'true'}); ... } now call function load video in second container:
onclick="loadvideo(\'', playerurl, '\', true, 'player2')"
Comments
Post a Comment