JavaScript - Problem Playing Youtube Video Using Javascript(jquery)
hi I am trying to play a video from youtube. What I have done so far is getting videos from my database and displaying all those videos thumbnails. So now what i want is to when i click any thumbnail it should play that video in my website. How can I do this?
Here is my code Code: function showResult(result) { $('#videosLoader').css('display','none'); var videoId = result.split(" "); for(i = 0; i < videoId.length - 1; i++) { var vidId = $.trim(videoId[i]); vidLink = getScreen(vidId,"small"); $('#videosList').append("<div class='playVid'>" + "<img width=80 height=80 src=" + vidLink + " alt='' /> " + "<input type='hidden' name='vidId' value='" + vidId + "' />" + "</div>").addClass("playVid"); } $('.playVid').click(function() { var val = $("input[name='vidId']").val(); alert("val"); $("#haveYourDefinition").append("<embed src='http://www.youtube.com/v/" + val + "&rel=1' pluginspage='http://adobe.com/go/getflashplayer' type='application/x-shockwave-flash' quality='high' width='450' height='376' bgcolor='#ffffff' loop='false'></embed>"); }); When I click any thumbnail it does nothing. Why and please tell me how to do this? Help Similar TutorialsHello I am in need of help desperatley. I am trying to get a video to launch from my homepage. see test homepage here http://www.nuviewinc.com/index3.html the video should pop up and play. Like it does here- http://www.nuviewinc.com/testv.html But it doesnt... can anyone help this poor marketing manager with coding? I simply followed the directions here http://www.vmatrixonline.com/vplayer...structions.pdf. all the code appears correct. Hi, I started with the template on this site: http://www.pupinc.com/videobox/ However, I have about a dozen videos with more to come so I added a vertical scrollbar to navigate through the thumbnails. My problem is I don't know how to separate the main video player so that it doesn't scroll with the thumbnails. HTML: Code: <div id="middle4"> <div class="videobox" style="height: 360px; overflow-y: scroll;"> <ul> <li><a href="http://www.youtube.com/watch?v=iFGEHtqNZis">TRS 50X35</a></li> <li><a href="http://www.youtube.com/watch?v=9CaN2KBYpo8">98X104 Automobile Shredder</a></li> <li><a href="http://www.youtube.com/watch?v=BWHXX6u3tVk">60x60 Aluminum</a></li> <li><a href="http://www.youtube.com/watch?v=ZiWDKtdfqWQ">60X60 System</a></li> <li><a href="http://www.youtube.com/watch?v=VMbbXcFju9E">Portable Shredding System</a></li> <li><a href="http://www.youtube.com/watch?v=WEn5xtJwtu4">60X85 System</a></li> <li><a href="http://www.youtube.com/watch?v=1cOxYQB5icg">60X60 White Goods</a></li> </ul> </div> </div> JS: Code: // Videobox object VideoBox = Class.create(); VideoBox.prototype = { // Initialize object. initialize: function(index, item) { this.index = index; this.item = item; this.item.addClassName('videoboxjs'); this.list = this.item.getElementsBySelector('ul')[0]; // Create div.bigvideo and add it just before the ul. this.bigvideo = document.createElement('div'); Element.addClassName(this.bigvideo, 'bigvideo'); this.item.insertBefore(this.bigvideo, this.list); // Create array of videothumbs. this.thumbs = new Array; // Opera 9 doesn't like 'li a' in getElementsBySelector, so you // have to break it apart. var links = this.item.getElementsBySelector('li'); for (var i=0; i < links.length; i++) { this.thumbs[i] = new VideoThumb(index, i, links[i].getElementsBySelector('a')[0]); } // Load up the first video. this.swap(0); }, // Replace existing video with new one. swap: function(index) { // IE 6 won't show the video unless something else is in the box. // I chose to add a <br /> which I hide via CSS. this.bigvideo.innerHTML = '<br /><object width="425" height="350"><param name="movie" value="' + this.thumbs[index].video + '"></param><param name="wmode" value="transparent"></param><embed src="' + this.thumbs[index].video + '" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>'; // Deselect all the thumbnails. this.thumbs.invoke('deselect'); // Select the current thumbnail. this.thumbs[index].select(); } }; // Videothumb object VideoThumb = Class.create(); VideoThumb.prototype = { // Initialize object. initialize: function(boxindex, index, link) { this.boxindex = boxindex; this.index = index; this.item = link; this.href = this.item.getAttribute('href'); // Extract the v querystring value from the href. Youtube uses this // value for everything. this.videocode = this.href.toQueryParams().v; // Direct link to the video for use in the object/embed this.video = 'http://www.youtube.com/v/' + this.videocode; // Create thumbnail image and append it inside the list item var img = document.createElement('img'); img.src = 'http://img.youtube.com/vi/' + this.videocode + '/default.jpg'; img.alt = this.item.innerHTML; img.title = this.item.innerHTML; this.item.innerHTML = ""; this.item.appendChild(img); // Observe the click event. Event.observe(this.item, 'click', this.swap.bindAsEventListener(this)); }, swap: function(evt) { // Call the swap method of the parent videobox with the thumbnail // thumbnail index as a parameter. aVB[this.boxindex].swap(this.index); // Stop the event so the browser doesn't follow the link. if (evt) { Event.stop(evt); } }, select: function() { this.item.addClassName('current'); }, deselect: function() { this.item.removeClassName('current'); } }; // Don't do anything if we're using Opera 8 or earlier. if (!Prototype.Browser.Opera || (Prototype.Browser.Opera && navigator.userAgent.toLowerCase().charAt(navigator.userAgent.toLowerCase().indexOf('opera') + 6) > 8)) { // Create array of videoboxes so you can have more than one on a page. var aVB = new Array; $$('div.videobox').each ( function(videobox, index) { aVB[index] = new VideoBox(index, videobox); }); } I'm using Fiddler (web debugging tool) and the below code is JScript .NET, which is basically a .NET version of Javascript. Code: if (oSession.HostnameIs("www.youtube.com") && oSession.oResponse.headers.ExistsAndContains("Content-Type","text/html")) // oSession is a Fiddler object session { oSession.utilDecodeResponse(); // Remove any compression or chunking oSession.utilReplaceInResponse('<b>','<u>'); // Search and replace in HTML } How do I replace youtube video player with this message? Code: <div id="player-unavailable" class=" player-width player-height player-unavailable "> <div class="icon meh"></div> <div class="content"> <h1 id="unavailable-message" class="message"> This video is no longer available because of inappropriate content. </h1> <div id="unavailable-submessage" class="submessage"> Sorry about that. </div> </div> </div> Thank you see below
I have a website where I am using a numbers counter and on the same page I have a video, I can't get both of them to work on the same page, Only one will work which is the numbers ticker. I have setup an example of it on a page, you can see he http://www.wordpressconnect.net/testing.php you can see the numbers ticker but at the bottom you can't see the video load. I have tested it with just the video and it works by itself. Is anyone able to help out pleaseeeeee, I've never coded javascript before so Im not sure how to fix this. thank youu I am being told that a snippet of JQuery code in a website that I have inherited is having problems with a $() JQuery Library Implementation. It seems to keep throwing a "tagName" error. An offered solution was to recode the JQuery into traditional JavaScript using getElementById(). I'm new to JavaScript and clueless to JQuery. I'm not exactly sure how to start. How would something like this be changeable to Javascript? Code: <script type="text/javascript"> $(document).ready(function() { $(".signin").click(function(e) { e.preventDefault(); $("fieldset#signin_menu").toggle(); $(".signin").toggleClass("menu-open"); document.forms["loginForm"].elements.loginUser.focus(); }); $("fieldset#signin_menu").mouseup(function() { return false }); $(document).mouseup(function(e) { if($(e.target).parent("a.signin").length==0) { $(".signin").removeClass("menu-open"); $("fieldset#signin_menu").hide(); } }); }); </script> Hey, I'm working on a script that uses a function (called on click) to change the content of a div (called description) within the page. It contains an unordered list and list items. The first one has the class "show" and the ID "1", the second with just the ID "2", and so forth. (see code below). I am using jQuery to control the onclick function. the jQuery gets the current object with the "show" class. If there is no show class, it takes the first. It then puts a variable string together that represents the UL LI that is needed to be shown. Code: var descurrent = ($('div#description ul li.show')? $('div#description ul li.show') : $('div#description ul li:first')); var desclass = '#description li#'+x; Note: x is a variable transfered from the function change(x); where x is the ID that is to be shown HTML CODE: Code: <div id="description"> <ul> <li class="show" id="1">blahblah </li> <li id="2"> etc </li> </ul> The jQuery i'm trying to get to work is: Code: //Hide the current image descurrent.animate({opacity: 0.0}, 1000) .removeClass('show'); //Show new image $(desclass).addClass('show') .animate({opacity: 1.0}, 1000); Note: the class "show" has a higer z-index Thanks in advance, Hope this can be resolved soon, been giving me headaches! Cheers, John I'm having a slight problem with php pagination and jquery/js. On the following page http://dev2.bluemuledesign.com/athletes.php you'll see an "athlete profile" area. Whenever an athlete photo is selected, javascript/php are used to switch out the athlete info. This works perfectly fine. The problem occurs if I use the left or right arrows to view more athletes (the left and right arrows are set with php pagination to switch to the next four records in the database). Whenever I do this, the athlete info defaults back to the first person from the initial load. Also, the javascript/jquery quits working and won't let me view the info for one of the newly displayed athletes. So I have two questions: 1) Can anyone tell me why it defaults back to the original athlete info? I'm assuming it has something to do with me not setting a cookie to remember the currently selected athlete. 2) Why does the javascript quit working when I view the next set of athletes? Also, the jquery slideshow that I am implementing is an alteration of this: http://designm.ag/tutorials/image-rotator-css-jquery/ Any help would be greatly appreciated. is there a way to stop a flash video with jQuery?? I'm using a html5 video with flash fallback.. i'm using the video on a modal pop up.. when i try to hide the video, the flash video doesn't stop... so before i hide the mask, i must stop or pause the video, then hide.. i tried various ways, but i can't seem to make them work.. Code: <video id="480p" width="848" height="480" controls="controls" poster="New_Test_Encodes_7-31-11/Test_Encode_Desktop_7-31-11/poster.jpg"> <source src="New_Test_Encodes_7-31-11/Test_Encode_Desktop_7-31-11/Marie_Mcray_Test-H264_480p.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="New_Test_Encodes_7-31-11/Test_Encode_Desktop_7-31-11/Marie_Mcray_Test.ogg" type='video/ogg; codecs="theora, vorbis"' /> <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. --> <object id="480pfallback" class="480p" width="848" height="480" type="application/x-shockwave-flash" data="flowplayer/flowplayer-3.2.7.swf"> <param name="movie" value="flowplayer/flowplayer-3.2.7.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value='config={"playlist":["New_Test_Encodes_7-31-11/Test_Encode_Desktop_7-31-11/poster.jpg", {"url": "New_Test_Encodes_7-31-11/Test_Encode_Desktop_7-31-11/Marie_Mcray_Test-H264_480p.mp4","autoPlay":false,"autoBuffering":false}]}' /> <!-- Image Fallback. Typically the same as the poster image. --> <img src="New_Test_Encodes_7-31-11/Test_Encode_Desktop_7-31-11/Marie_McCray_A_O_poster.jpg" width="848" height="480" alt="Poster Image" title="No video playback capabilities." /> </object> </video><!--480p--> Hi, I need some help with playing sounds with javascript. What I need: When the user clicks the button it will run the function and play a sound either from the source or embedded into the website(which ever way works). Thanks alot! First of all I really appreciate you reading this. Im going to try to be detailed so I can get help... I have wasted over 8 hours on this already and I'm going to (scuse my french) f'ing lose my mind. I'm about ready to pay someone... if youre intersted PM me. So, I have a wordpress blog that came with several javascript includes already in the header related to the features of the blog. These features include a gallery which has little popups over the images on mouseover. the includes were 'jquery.min.js', and 'script.js' (in that order) followed by a few other includes for other features. That works fine, but then I wanted to replace the menu with a different menu which uses lavalamp jquery (he http://www.gmarwaha.com/blog/2007/08...jquery-lovers/ ) For the new menu, it requires jquery.min.js and 'custom.js'. I took out jquery.min because it was redundant and put custom underneath 'script.js' in the header. I got the menu working, except then I noticed the gallery rollovers stopped working. I moved around the order of the different includes in the header, then neither worked. after I fiddled with it more, the menu stopped working but the gallery would work. After Screwing with this for an awful long time, and a process of elimination, i found that wp_head was causing problems (where it hooks in the headers for all my wordpress plugins). I then realized 'cforms' was using jquery, as well as contact form 7, and I figured they must be conflicting somehow. So I temporarily commented out wp_head so I could focus on the other elements first, and getting them working. At this point (5 hours or so) I decided it must be something in script.js as well as custom.js which are conflicting. I have NO idea of anything about javascript so I started by going through script.js (for the gallery) and through a process of elimination i deleted all the functions that would stop it from working. my thought process was i could then do the same to custom.js (for the menu) and then hopefully with both of them trimmed everything would not conflict. So.. i opened the js file, literally removed ONE function (completely unrelated) to the gallery.. it was something about validating a contact form, and was only like 5 lines of code, and suddenly the gallery doesnt work ... GRRRRRRRRRRRRRRRR I am now at a complete loss of what to do.. i really need this working and I must not be doing something right. I dont understand how one function COMPLETELY unrelated to another will ruin everything. Please PM me if interested, i'm willing to pay someone to fix this here are the files in case you need them heres my header first. I have tried every possible combination of wher to put the different files by the way, no dice Code: <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /> <link href="<?php bloginfo('template_directory'); ?>/menu.css" rel="stylesheet" type="text/css" /> <link href="<?php bloginfo('template_directory'); ?>/style1.css" rel="stylesheet" type="text/css" /> <!-- commented out while I try to figure this out <script type='text/javascript' src='<?php bloginfo('template_directory'); ?>/custom.js'></script> --> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/jquery.min.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/script.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/superfish.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/fader.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/jquery.prettyPhoto.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/cufon-yui.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/Andika_Basic_400.font.js"></script> How could I make it so that instead of seeing a embed object you would just see a input button that says play. I do not need my users to be able to pause them. I really didn't know where to start with the javascript but i do have the html5 Code: <audio controls="controls"> <source src="BlackHawkDown-MusicVideo-Frontline.wav" type="audio/wav" /> <source src="BlackHawkDown-MusicVideo-Frontline.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> THANKS!!!! I can play a sound on my local machine using the following code, but when I upload to a server the same code it does not play. I cannot work out why, the link below gives the code. The multi channel code is he http://www.storiesinflight.com/html5/audio.html I installed Firebug and insepcted the Net components and can see that the .wav files are being sought out but returning a 404 error. This would be fine, however the path being sought is correct. Clicking link does'nt play the sound, but removing the file and paring back to the directory brings you to the directory on the server and clicking the file does play the sound. The code works locally, and I simply cannot see what could be causing the issue in the server versions on both Firefox and Chrome. I am trying to write a game in javascript that will play a tune when a certain score is reached. I can get music to play if i put the code behind a button but I would prefer to use an if statement in the header section. Any suggestions please???? Many thanks
Hi there, Not sure what sub category this falls under sorry, but I have an issue changing a table based menu to a css based menu. This has been done however the javascript code no only partly works, I would like for it to completely work and am not sure whether I should use aspanel or <div> tags to get it to work as I have tried both and neather seem to work so there is something i am obviously missing! here is the javascript: Code: $(function() { $('#mainCategories a').live('click', function() { $.ajax({ type: "GET", contentType: "text/html; charset=utf-8", dataType: "html", url: "/ajax/menu.aspx?CategoryId=" + this.name, cache: false, success: function(newMenu) { $("#left-menu-control").replaceWith(newMenu); $('html, body').animate({ scrollTop: 0 }, 'slow'); } }); return false; }); $('#left-menu-collapse-category').live('click', function() { $.ajax({ type: "GET", contentType: "text/html; charset=utf-8", dataType: "html", url: "/ajax/menu.aspx", cache: false, success: function(newMenu) { $("#left-menu-control").replaceWith(newMenu); } }); return false; }); }); and here is the page code: Code: <div id="menu-left"> <asp:Panel ID="pnlLeftMenuControl" runat="server"> <asp:Panel ID="pnlCategories" runat="server"> <asp:Panel ID="pnlCurrentlyViewing1" runat="server" Visible="false"> <div id="menu-left-main-categories"> <div id="menu-left-currently-viewing-title">Currently Viewing...</div> <div id="menu-left-currently-viewing-close"><a href="javascript:void(0);" title="Collapse category" id="left-menu-collapse-category"><img src="~/images/button-menu-left-currently-viewing-close.jpg" runat="server" border="0" /></a></div> </div> </asp:Panel> <asp:Panel ID="pnlCurrentlyViewing2" runat="server" Visible="false"> <div id="menu-left-currently-viewing"> <div id="menu-left-currently-viewing-text"><asp:Hyperlink ID="hlCategory" runat="server" CssClass="left-menu-viewing"></asp:Hyperlink></div> </div> </asp:Panel> <asp:Panel ID="pnlSubCategories1" runat="server" Visible="false"> <asp:Repeater ID="rptSubCategories" runat="Server"> <ItemTemplate> <div id="menu-left-currently-viewing"> <div id="menu-left-currently-viewing-text">- <asp:HyperLink ID="hlSubCategory" runat="server" CssClass="left-menu-viewing"></asp:HyperLink></div> </div> </ItemTemplate> </asp:Repeater> </asp:Panel> <asp:Panel ID="pnlMainCategories" runat="server"> <asp:Repeater ID="rptMainCategories" runat="server"> <ItemTemplate> <div id="menu-left-main-categories"><div id="menu-left-main-categories-text"><asp:HyperLink ID="hlCategory" runat="server" CssClass="left-menu"></asp:HyperLink></div></div> </ItemTemplate> </asp:Repeater> </asp:Panel> </asp:Panel> <asp:Panel ID="pnlBrands" runat="server" Visible="false"> <asp:Panel ID="pnlBCurrentlyViewing1" runat="server" Visible="false"> Currently viewing... </asp:Panel> <asp:Panel ID="pnlBCurrentlyViewing2" runat="server" Visible="false"> <asp:Label ID="lblBCurrentlyViewing" runat="server" CssClass="left-menu-viewing"></asp:Label> </asp:Panel> <asp:Repeater ID="rptBrands" runat="server"> <ItemTemplate> <asp:HyperLink ID="hlBrand" runat="server" CssClass="left-menu"></asp:HyperLink> </ItemTemplate> </asp:Repeater> </asp:Panel> </asp:Panel> </div> any help would be greatly appreciated I want to use HTML5's audio coding similar to the one below: Code: var audioElement = document.createElement('audio'); audioElement.setAttribute('src', 'horse.ogg'); audioElement.play(); In order to play sound files depending on the input. What I'm working on is a text-to-speech webapplication. What I'd need to happen is for there to be an input and then allow the user to type anything into the input, so if they type in: Hello, how are you doing? Javascript or PHP will recognize each character and translate it into an audio sequence. In example: It'd detect the "H" in hello and play sound file "H.ogg" It'd then detect the "E" in hello and play sound file "E.ogg" I know there must be an easy way to do this. Alright, I am going to post the sections that matter, and then post the full JS at the bottom. Alright, so youtube allows you to pull videos using javascript. here is the what I am using Code: function insertVideos(div,typ,q,results,overlay){ inlineVideo = overlay; youtubediv[q.toLowerCase()] = div; var script = document.createElement('script'); if(typ == "favs") script.setAttribute('src', 'http://gdata.youtube.com/feeds/users/'+q+'/favorites?max-results='+results+'&alt=json-in-script&callback=youtubeInit'); if(typ == "user") script.setAttribute('src', 'http://gdata.youtube.com/feeds/users/'+q+'/uploads?max-results='+results+'&alt=json-in-script&callback=youtubeInit'); script.setAttribute('id', 'jsonScript'); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); } alright, and here is the HTML code. Code: <div id="youtubeDivFavs" align="center"> </div> <script> insertVideos('youtubeDivFavs','favs','lancxeon','5',0); </script> <div id="youtubeDivUser" align="center"> </div> <script> insertVideos('youtubeDivUser','user','lancxeon','5',0); </script> Now as you can see there are two here. the second one "user" pulls from the url http://gdata.youtube.com/feeds/users/lancxeon/uploads It works fine on my website. the second one pulls from http://gdata.youtube.com/feeds/users/lancxeon/favorites It does not work. It makes no sense as you can see both of the urls work fine. I have already tried only using the favorites one and getting rid of the user one.. to see if it was interfering. And it still would not work. It truly makes no sense to me why it does not work, if one works why will the other not work? Here is the full JS file Code: <!-- var cleanReturn = 1; //do you want a full youtube return, or just an image list var inlineVideo = 1; //do you want to redirect to youtube, or play inlinevideo var timer; var i =0; var youtubediv = new Array(); function clearList(ul){ var list = document.getElementById(ul); while (list.firstChild) { list.removeChild(list.firstChild); } } function hideOverlay(){ var overlay = document.getElementById('youtubeoverlay'); overlay.style.display = 'none'; overlay.innerHTML = ""; } function videoOverlay(id){ var objBody = document.getElementsByTagName("body").item(0); if(objBody){ var video = document.createElement('div'); video.setAttribute('id', 'youtubeoverlay'); video.innerHTML = '<div id="youtubecontent"><a href="javascript:hideOverlay()" id="close">Close</a><br /><object width="510" height="420"><param name="movie" value="http://www.youtube.com/v/'+id+'"></param><param name="autoplay" value="1"><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/'+id+'&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" width="510" height="420"></embed></object></div>'; objBody.insertBefore(video, objBody.firstChild); }else{ alert('no body element. please add'); } } function mousOverImage(name,id,nr){ if(name) imname = name; //make border orange imname.style.border = '4px solid orange'; imname.src = "http://img.youtube.com/vi/"+id+"/"+nr+".jpg"; nr++; if(nr > 3) nr = 1; timer = setTimeout("mousOverImage(false,'"+id+"',"+nr+");",1000); } function mouseOutImage(name){ if(name) imname = name; //make border back to greyish imname.style.border = '4px solid #333333'; if(timer) clearTimeout(timer) } function getVideoId(url){ var match = url.lastIndexOf('='); if (match) { id = url.substring(match+1); return id; } } function getId(string){ var match = string.lastIndexOf("'s Videos"); if (match != -1) { id = string.substring(0,match); return id.toLowerCase(); } var match = string.lastIndexOf("query"); if (match != -1) { id = string.substring(match+7); return id.toLowerCase(); } } function listVideos(json,divid) { divid.innerHTML = ''; var ul = document.createElement('span'); ul.setAttribute('id', 'youtubelist'); if(json.feed.entry){ for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { url = entry.link[k].href; break; } } var thumb = entry['media$group']['media$thumbnail'][1].url; var li = document.createElement('span'); li.setAttribute('id', 'youtubebox'); if(cleanReturn == 1){ if(inlineVideo == 1){ li.innerHTML = '<a href="javascript:videoOverlay(\''+getVideoId(url)+'\');"><img src="'+thumb+'" id="youtubethumb" alt="'+entry.title.$t+'" onmouseout="mouseOutImage(this)" onmouseover="mousOverImage(this,\''+getVideoId(url)+'\',2)"></a>'; }else{ li.innerHTML = '<tr><a href="'+url+'" target="_new"><img src="'+thumb+'" border="0" id="youtubethumb" alt="'+entry.title.$t+'" title="'+entry.title.$t+'" onmouseout="mouseOutImage(this)" onmouseover="mousOverImage(this,\''+getVideoId(url)+'\',2)"></a>'; } }else{ li.innerHTML = entry.content.$t; } ul.appendChild(li); } }else{ divid.innerHTML = 'No Results Found'; } document.getElementById(divid).appendChild(ul); } function youtubeInit(root) { //this hacks the layer for mutiple json queries id = getId(root.feed.title.$t); listVideos(root, youtubediv[id]); } function insertVideos(div,typ,q,results,overlay){ inlineVideo = overlay; youtubediv[q.toLowerCase()] = div; var script = document.createElement('script'); if(typ == "favs") script.setAttribute('src', 'http://gdata.youtube.com/feeds/users/'+q+'/favorites?max-results='+results+'&alt=json-in-script&callback=youtubeInit'); if(typ == "user") script.setAttribute('src', 'http://gdata.youtube.com/feeds/users/'+q+'/uploads?max-results='+results+'&alt=json-in-script&callback=youtubeInit'); script.setAttribute('id', 'jsonScript'); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); } //--> Ok, I have a problem with iframe code my function looks like this: Code: createPlayer: function (cfg) { var div = document.getElementById(cfg.block2); var hold = document.createElement('div'); hold.className = 'ytPlayer'; var iframe = document.createElement('iframe'); iframe.setAttribute('id', cfg.block + 'Player'); iframe.setAttribute('width', '70%'); iframe.setAttribute('height', cfg.height); iframe.setAttribute('frameBorder', '0'); iframe.setAttribute('src', 'http://www.youtube.com/embed/' + ytPlayerParams.videoId + '?enablejsapi=1&autoplay=' + ytPlayerParams.autoplay + '&modestbranding=1');//controlbar set iframe.setAttribute('allowfullscreen', ''); hold.appendChild(iframe); div.insertBefore(hold, div.firstChild); //return iframe; }, and i was trying to add something that will call a function when the video in iframe will end.. i tryed setting evets for onStateChange but didnt work (probably did something wrong).. i tryed alot of things but it just didnt work when i paused the vid or when vid ended.. can anyone somehow help me?? Thanks in advance. Hello. I have a youtube video that autoplays everytime one opens the webpage containing the video. The only extra parameter that causes the video to autoplay is having the following added at the end of the embed src link: "&autoplay=1" If that is not present or if a zero is present in place of the 1, the video does not autoplay. I would like the video to play only once per session. If one is visiting the webpage a second time, the parameter above should not be present or the 1 should be a zero. I am modifying attempting to modify this code: http://www.javascriptkit.com/script/...2/postit.shtml and I am able to get differnt urls to print on screen depending if it's a first visit or not. Problem 1: I cannot however get this to work in Google Chrome. Problem 2: When I attempt to get the url to be printed inside the embed src [/B]link, which is inside the object tag, the javascript either gets printed or that portion is ignored. I don't know if this is because of the quotations and the way I am handling them or if because javascript cannot be inserted inside an object tag. Here is the code: Code: <html> <body> <br><br> <script type="text/javascript"> //Post-it only once per browser session? (0=no, 1=yes) //Specifying 0 will cause postit to display every time page is loaded var once_per_browser=1 ///No need to edit beyond here/// /* var ns4=document.layers var ie4=document.all var ns6=document.getElementById&&!document.all if (ns4) crossobj=document.layers.postit else if (ie4||ns6) crossobj=ns6? document.getElementById("postit") : document.all.postit function closeit(){ if (ie4||ns6) crossobj.style.visibility="hidden" else if (ns4) crossobj.visibility="hide" } */ var url = "\"http://www.youtube.com/blah/version=3&hl=en_US&fs=1\""; function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { // if cookie exists offset += search.length // set index of beginning of value end = document.cookie.indexOf(";", offset); // set index of end of cookie value if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function showornot(){ if (get_cookie('postdisplay')==''){ showit() document.cookie="postdisplay=yes" } } function showit(){ url = "\"http://www.youtube.com/blah/version=3&hl=en_US&fs=1&autoplay=1\""; /*if (ie4||ns6) crossobj.style.visibility="visible" else if (ns4) crossobj.visibility="show" */ } if (once_per_browser) showornot() else showit() </script> <b>Outside the Object Tag:</b> <br> <script type="text/javascript">document.write(url);</script> <br><br> <b>In the Object Tag</b> <br><br> <object width="570" height="250"><param name="movie" value="http://www.youtube.com/blah?version=3&hl=en_US&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src=<script type="text/javascript">document.write(url);</script> type="application/x-shockwave-flash" width="570" height="250" allowscriptaccess="always" allowfullscreen="true"></embed></object> </body> </html> |