|
JavaScript - Youtube
Is there a way to use google anayltics to track how many people clicked onto my video from my site to watch it? how long they stayed on the video, where they came from, ect?
Similar TutorialsCan anyone help me modify this script to be able to view feeds of type media rather apps? I want it to work as it does for a channel rather than all of youtube. I've tried changing the settings at the top and a lot of other stuff but no luck so far... getting desperate here. I'm willing to pay at this point but I don't have much. I neeeeeed this script. It could be in PHP even. However it must be completely dynamic and allow me to make searches against the channel. Code: var quvic = {};
quvic.MAX_RESULTS_LIST = 50;
quvic.THUMBNAIL_WIDTH = 124;
quvic.THUMBNAIL_HEIGHT = 93;
quvic.PLAYER_WIDESCREEN_WIDTH = 720;
quvic.PLAYER_STANDARD_WIDTH = 540;
quvic.PLAYER_HEIGHT = 405;
quvic.VIDEO_LIST_CSS_CLASS = 'videolist';
quvic.PREVIOUS_PAGE_BUTTON = 'previousPageButton';
quvic.NEXT_PAGE_BUTTON = 'nextPageButton';
quvic.STANDARD_FEED_URL_TOP_RATED =
'http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?';
quvic.STANDARD_FEED_URL_MOST_VIEWED =
'http://gdata.youtube.com/feeds/api/standardfeeds/most_viewed?';
quvic.STANDARD_FEED_URL_MOST_POPULAR =
'http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?';
quvic.STANDARD_FEED_URL_RECENTLY_FEATURED =
'http://gdata.youtube.com/feeds/api/standardfeeds/recently_featured?';
quvic.VIDEO_FEED_URL =
'http://gdata.youtube.com/feeds/api/videos?';
quvic.QUERY_URL_MAP = {
'top_rated' : quvic.STANDARD_FEED_URL_TOP_RATED,
'most_viewed' : quvic.STANDARD_FEED_URL_MOST_VIEWED,
'most_popular' : quvic.STANDARD_FEED_URL_MOST_POPULAR,
'recently_featured' : quvic.STANDARD_FEED_URL_RECENTLY_FEATURED,
'search' : quvic.VIDEO_FEED_URL
};
quvic.nextPage = 2;
quvic.previousPage = 0;
quvic.previousSearchTerm = '';
quvic.previousQueryType = 'search';
quvic.jsonFeed_ = '';
quvic.appendScriptTag = function(scriptSrc, scriptId, scriptCallback) {
var oldScriptTag = document.getElementById(scriptId);
if (oldScriptTag) {
oldScriptTag.parentNode.removeChild(oldScriptTag);
}
var script = document.createElement('script');
script.setAttribute('src',
scriptSrc + '&v=2&alt=jsonc&callback=' + scriptCallback);
script.setAttribute('id', scriptId);
script.setAttribute('type', 'text/javascript');
document.getElementsByTagName('head')[0].appendChild(script);
};
quvic.listVideos = function(queryType, searchTerm, page) {
quvic.previousSearchTerm = searchTerm;
quvic.previousQueryType = queryType;
var queryUrl = quvic.QUERY_URL_MAP[queryType];
if (queryUrl) {
queryUrl += 'max-results=' + quvic.MAX_RESULTS_LIST +
'&format=5&start-index=' + (((page - 1) * quvic.MAX_RESULTS_LIST) + 1);
if (searchTerm != '') {
queryUrl += '&q=' + encodeURI(searchTerm);
}
quvic.appendScriptTag(queryUrl,
'searchResultsVideoListScript',
'quvic.listVideosCallback');
quvic.updateNavigation(page);
} else {
alert('Unknown feed type specified');
}
};
quvic.PresentVideos = function(queryType, searchTerm, page) {
quvic.previousSearchTerm = searchTerm;
quvic.previousQueryType = queryType;
var queryUrl = quvic.QUERY_URL_MAP[queryType];
if (queryUrl) {
queryUrl += 'max-results=' + quvic.MAX_RESULTS_LIST +
'&format=5&start-index=' + (((page - 1) * quvic.MAX_RESULTS_LIST) + 1);
if (searchTerm != '') {
queryUrl += '&q=' + encodeURI(searchTerm);
}
quvic.appendScriptTag(queryUrl,
'searchResultsVideoListScript',
'quvic.listVideosCall');
quvic.updateNavigation(page);
}
};
quvic.listVideosCall = function(json) {
quvic.jsonFeed_ = json.data;
var div = document.getElementById(quvic.VIDEO_LIST_CSS_CLASS);
var items = json.data.items || [];
var html = ['<dl class="videos">'];
for (var i = 0; i < items.length; i++) {
var title = json.data.items[i].title;
var thumbnailUrl = json.data.items[i].thumbnail.sqDefault;
var videoID = json.data.items[i].id;
var duration = json.data.items[i].duration;
html.push('<dt><span class="video_thumb thumbbox"><a href="javascript:playVideo(\''+videoID+'\',\''+addslashes(title)+'\')">');
html.push('<img src="',thumbnailUrl,'" width="',quvic.THUMBNAIL_WIDTH,'" height="',quvic.THUMBNAIL_HEIGHT,'" onmouseout="mouseOutImage(this)" onmouseover="mousOverImage(this,\'',videoID,'\',1)"></a>');
html.push('<span class="duration">',getDurationTime(duration),'</span>');
html.push('</span>');
html.push('<br/>', title.substr(0,37), '</dt>');}
html.push('</dl><br style="clear: left;"/>');
jQuery(div).fadeTo(500, 1.0);
document.getElementById(quvic.VIDEO_LIST_CSS_CLASS).innerHTML = html.join('');
if (items.length > 0) {
loadVideo(json.data.items[0].id);
}
};
function loadVideo(videoID) {
swfobject.embedSWF("http://www.youtube.com/v/" + videoID + "?version=3&enablejsapi=1&playerapiid=ytplayer&fs=1&autohide=1",
'player', quvic.PLAYER_WIDESCREEN_WIDTH, quvic.PLAYER_HEIGHT, '9.0.0', false, false, {allowScriptAccess: 'always',allowfullscreen: 'true'});
}
quvic.listVideosCallback = function(json) {
quvic.jsonFeed_ = json.data;
var div = document.getElementById(quvic.VIDEO_LIST_CSS_CLASS);
while (div.childNodes.length >= 1) {
div.removeChild(div.firstChild);
jQuery(div).fadeTo(0, '.01');
}
var items = json.data.items || [];
var html = ['<dl class="videos">'];
for (var i = 0; i < items.length; i++) {
var title = json.data.items[i].title;
var thumbnailUrl = json.data.items[i].thumbnail.sqDefault;
var videoID = json.data.items[i].id;
var duration = json.data.items[i].duration;
html.push('<dt><span class="video_thumb thumbbox"><a href="javascript:playVideo(\''+videoID+'\',\''+addslashes(title)+'\')">');
html.push('<img src="',thumbnailUrl,'" width="',quvic.THUMBNAIL_WIDTH,'" height="',quvic.THUMBNAIL_HEIGHT,'" onmouseout="mouseOutImage(this)" onmouseover="mousOverImage(this,\'',videoID,'\',1)"></a>');
html.push('<span class="duration">',getDurationTime(duration),'</span>');
html.push('</span>');
html.push('<br/>', title.substr(0,37), '</dt>');}
html.push('</dl><br style="clear: left;"/>');
jQuery(div).fadeTo(500, 1.0);
document.getElementById(quvic.VIDEO_LIST_CSS_CLASS).innerHTML = html.join('');
};
quvic.updateNavigation = function(page) {
quvic.nextPage = page + 1;
quvic.previousPage = page - 1;
document.getElementById(quvic.NEXT_PAGE_BUTTON).style.display = 'inline';
document.getElementById(quvic.PREVIOUS_PAGE_BUTTON).style.display = 'inline';
if (quvic.previousPage < 1) {
document.getElementById(quvic.PREVIOUS_PAGE_BUTTON).disabled = true;
} else {
document.getElementById(quvic.PREVIOUS_PAGE_BUTTON).disabled = false;
}
document.getElementById(quvic.NEXT_PAGE_BUTTON).disabled = false;
};
function onPlayerError(errorCode) {
alert("An error occured of type:" + errorCode);
}
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("player");
ytplayer.addEventListener("onError", "onPlayerError");
}
function playVideo(videoID,title){
if(document.title)
document.title = title;
ytplayer.loadVideoById(videoID);
}
function HDPlayer() {
resizePlayer(quvic.PLAYER_WIDESCREEN_WIDTH, quvic.PLAYER_HEIGHT);
}
function HQPlayer() {
resizePlayer(quvic.PLAYER_STANDARD_WIDTH, quvic.PLAYER_HEIGHT);
}
function resizePlayer(width, height) {
var playerObj = document.getElementById("player");
playerObj.height = height;
playerObj.width = width;
}
function addslashes(str) {
str=str.replace(/\'/g,'\\\'');
str=str.replace(/\"/g,'');
return str;
}
function stripslashes(str) {
str=str.replace(/\\'/g,'\'');
return str;
}
var imname;
var timer;
function mousOverImage(name,id,nr){
if(name)
imname = name;
imname.src = "http://img.youtube.com/vi/"+id+"/"+nr+".jpg";
imname.style.border = '3px solid silver';
nr++;
if(nr > 3)
nr = 1;
timer = setTimeout("mousOverImage(false,'"+id+"',"+nr+");",1000);
}
function mouseOutImage(name){
if(name)
imname = name;
imname.style.border = '3px solid #fff';
if(timer)
clearTimeout(timer);
}
function getDurationTime(sec)
{
var sec_div = ''+((sec%60) | 0);
if(sec_div.length == 1)
sec_div = '0'+sec_div;
return ((sec/60) | 0)+':'+sec_div;
}
This draws on jQuery JavaScript Library v1.4.2 and swfObject; A similar script providing this functionality would also be acceptable. Hi all. I'm new comer here and i have no idea to find the way how to create youtube like content locker. Is possible to lock / hide content for visitor until they liked video on youtube ? I'm very basic using javascript and i don't know how to start coding. I would to thanks to all who answering my questions. Regards I am using a javascript replace code to embed youtube videos in my forum. It works fine except users on iPhone or iPad can't see the videos. I would like to added the url to the video under the embed code - so these users can just click the link and see the vid on youtube. Here is the script in question: Code: z[x].innerHTML = z[x].innerHTML.split("[YOUTUBE]").join("<iframe width=560 height=410 src='").split("/watch?v=").join("/v/").split("[/YOUTUBE]").join("' frameborder=0 allowfullscreen></iframe>");
I am not very good with the split & join functions. Can someone help me out.. I would like the code to place the you tube video link like so: Code: z[x].innerHTML = z[x].innerHTML.split("[YOUTUBE]").join("<iframe width=560 height=410 src='").split("/watch?v=").join("/v/").split("[/YOUTUBE]").join("' frameborder=0 allowfullscreen></iframe>< br><a href="youtube video link">View on YouTube</a> ");
I have used this tool in order to display all my youtube videos. http://www.php-help.ro/mootools-12-j...ched-playlist/ When you go over the thumbnail of one of the videos, you can see the title of each video (the title of the specific video in youtube). I want this title to be displayed before the thumbnail (above it). Can someone tell me please how can I do it? There are 4 JS files, 1 CSS and a small html code (all on the link provided). Thanks! 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);
});
}
Just to let you know if you don't know how to do this is the code I use: It will solve the problem of the clip scrolling over text etc. <embed wmode="transparent" src="youtube URL" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="280" height="240"></embed> (mods, do with this as you please). I am looking to create a Stylesheet for YouTube, to make it look nicer and customise it completely I wanted to change the logo, but its a graphic. I was wondering if it would be possible to do this by linking to one hosted on Flickr? Or is there another trick? Hi, I'm new at this stuff, like, super new. Basically, I want to call Fancybox to open a youtube video in a scrolling gallery. I think it's pretty simple to do but so far I can only get it to open when it is specifically clicked on and not part of the scrolling gallery. I think I need a different thing besides "click" to call the function but I have no idea what. For you pros, this should be easy (I hope). Please help! Code: $(document).ready(function() {
$("a[rel=example_group]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'swf' : {'mode':'transparent'}
});
$("a#p20").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 680,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {'allowfullscreen':'true'}
});
return false;
});
});
This is my HTML Code: <a rel="example_group" href="images/portfolio/crapbooking.jpg"><img alt="" src="images/portfolio/crapbooking_thumb.jpg" /></a>
<a rel="example_group" href="images/portfolio/acuppakoko.jpg"><img alt="" src="images/portfolio/acuppakoko_thumb.jpg" /></a>
<a id="p20" rel="example_group" href="http://www.youtube.com/watch?v=GaidsWnSOz0"><img alt="" src="images/portfolio/hongkong_thumb.jpg" /></a>
Thoughts? hello Devs, i have a website that has lots of videos on it, the other day i saw a mouse over that showed a snippet of the youtube video, it had microsoft across the front it's since been deleted so i cannot show you an example, does anyone know where i can obtain this script please?
see below
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 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. 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);
}
//-->
Hey, I was talking to a coding friend about some work I have and he thought some JavaScript or JQeury would be able to help me out. However I really have no idea where to begin. In it's simplest form, I want to have a button on a page that can pause and play an embedded YouTube video. I believe YouTube has customizable API's but this button needs to be separate from the video itself. Why does it need to be separate? Because I want the button to exist by itself on one webpage, and the YouTube video to exist by itself on a second webpage. So the idea is that I can be looking at my computer in one corner of the room and my friend can be looking at his, and I can pause the video he's watching from where I'm sitting. ...any ideas? 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 Hello, My goal is to show a series of embedded youtube videos on one page but allowing the user to hide or show any youtube video by clicking a button associated with a specific youtube video on the page. I made a form that submits the youtube embed code to a mysql database and I created a php file to retrieve every embed code using a for loop. For each iteration of the for loop, a youtube video will pop up with a corresponding button which will allow the user to hide or show the youtube video. It works when there is only one entry in the mysql table but does not work when more youtube embed codes are uploaded. For example, when there are two youtube embed codes uploaded, two buttons are created, but when I click either of the two buttons, it will only show or hide the first youtube embed. None of the buttons will show the second youtube video. Here is my code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>hide/show iframe</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <style type="text/css"> <!-- #frDocViewer { width:70%; height:50%; display:none; } --> </style> <script type="text/javascript"> <!-- function HideFrame() { var fr = document.getElementById ("frDocViewer"); if(fr.style.display=="block") { fr.style.display="none"; } else { fr.style.display="block"; } } //--> </script> </head> <body> <?php mysql_connect ("","","") or die(mysql_error()); mysql_select_db ("") or die(mysql_error()); $lastid = mysql_query ("SELECT * FROM embed ORDER BY id DESC LIMIT 1"); $lastid = mysql_fetch_assoc($lastid); $lastid = $lastid['id']; for ($count=1; $count<= $lastid ; $count++) { $iframe = mysql_query ("SELECT * FROM embed WHERE id=$count "); $iframe = mysql_fetch_assoc($iframe); $iframe = $iframe['url']; echo " <img src='utube.gif' onclick='HideFrame()' /> <div id='frDocViewer'> $iframe </div> "; } ?> </body> </html> thanks in advance Hi guys.. I am just starting to learn JavaScript. I wanted to know how to have multiple hyperlinks (Containing links to Youtube Videos) that when clicked, cause the corresponding videos to play on the Youtube Player Embedded on the site. I hope my question is not too confusing. Thank you in advance! P.S. I saw some Source Code relating to this on StackOverflow and copied it and couldn't get it to work.. Here's my source code. Code: <html>
<head>
<title> Sample Page </title>
<script>
// Get element holding the video (embed or object)
var player = document.getElementById("MOVIE");
//Create a simple function and check if player exists
function play() {
if(player) {
player.playVideo();
}
}
</script>
</head>
<body>
<object width="420" height="315"><param name="MOVIE" value="http://www.youtube.com/v/HsQIoPyfQzM?version=3&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/HsQIoPyfQzM?version=3&hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</br></br>
<a href="http://youtu.be/sPvqNMb4StI" onclick="play()"> THIS IS FIRST Video Link </a></br></br>
<a href="http://youtu.be/w7_Ccu21QVs" onclick="play()"> THIS IS SECOND Video Link </a>
</body>
</html>
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>
|
|||||||