|
JavaScript - I'm Looking For A Script To Open Youtube Videos
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?
Similar TutorialsHi 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>
Hey All, I replied in another thread asking about this, but I figured it would be best to have a separate thread for it. I'm trying to use lightbox (Video Lightbox) to not just open a video when clicking on a thumbnail image, but a mock "page" of several videos, where the main video plays, but there are surrounding thumbnail images that can then also be selected to play in the main player. Has anyone ever done anything like this? I've seen it done elsewhere, but wasn't sure how to actually implement it. Any suggestions would be appreciated. Thanks. Can 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. I have a script that works in seamonkey(my html editor) but when I use it in IE8 it says errors happen. Here's the code (the first line is on line 7 of the html file): Code: <script type="text/javascript">
function enlarge(imageNum)
{
var numToString = "";
if(parseInt(imageNum) < 10){
numToString = "0" + imageNum;
}
else
{
numToString = imageNum + "";
}
window.open("images/LgScreenshot"+numToString+".jpg","Screenshot "+imageNum,"status=0,height=675,width=900,resizable=0");
}
</script>
And the errors: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB0.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; InfoPath.3; .NET CLR 3.0.30729) Timestamp: Wed, 10 Feb 2010 14:58:16 UTC Message: Object expected Line: 150 Char: 1 Code: 0 URI: http://samssc2site.co.cc/Features.html Message: Invalid argument. Line: 18 Char: 1 Code: 0 URI: http://samssc2site.co.cc/Features.html Hi! everyone. I've run into a problem with a piece of script and being code illiterate I could use some help. I'm making a page with a few thumbnails that I want to use as links to open a larger image in a pop-up window. I found this piece of code ( call it a senior moment ~ but I didn't make a note of where it was ) that works fine in Firefox and Safari, but IE8 is telling me that there is an error in the highlighted line: Code: <script language="JavaScript">
function openW(mypage,myname,w,h,features) {
if(screen.width){
var winl = (screen.width-w)/2;
var wint = (screen.height-h)/2;
}else{winl = 0;wint =0;}
if (winl < 0) winl = 0;
if (wint < 0) wint = 0;
var settings = 'height=' + h + ',';
settings += 'width=' + w + ',';
settings += 'top=' + wint + ',';
settings += 'left=' + winl + ',';
settings += features;
win = window.open(mypage,myname,settings);
win.window.focus();
}
</script>
Code: <a href="JavaScript:openW('URL','TITLE',WIDTH,HEIGHT,'')">LINK</a>
Anyone got an idea if it can be tweaked to make IE recognize it? Or a simple alternative script that works cross browser? Any help would be greatly appreciated. Thanks I have a mobile website that I am building. The test site is at www.schenkhampton.com/airtex2. The page is built using drop downs. I have anchor tags that I would like to be able to open up the content associated with that image map. The page that I am referring to is www.schenkhampton.com/airtex2/fueldelivery.html If you click on the numbers for the car it takes you down to the right headline. However, I want to be able to place my anchor tag inside of that associated content so it opens up to the content and not involve an extra click from the user. Any ideas would be appreciated. Matt How can i run a script after the window.open loads completely?
Hi guys i want to make my javascript open the link in the same window instead of opening up i new tab, i know this should be basic but for some reason i can't figure it out, ill post the code below, thanks Code: for (var i=0; i <UN.length; i ++) {
if (( UN[i].toLowerCase() == uname.toLowerCase() ) && (PW[i] == pword)) {
alert ("User name and password matched!");
valid = true;
window.open('http://www.google.com');
Hello all,I have a website and I would like a pop-up window to promote a new website venture I have. I would like for the new website to open in a completely new window/browser when my members simply click on the index page (No link or Buttons).The code below does most of what I ask lol,but it.. 1.Only opens in a new tab (in same browser) while I would like for it to open in a completely new browser "full page" menu bar scroll tab and all. plus 2.It seems to open each and every time the page is clicked,which will be annoying to my members.I would only like for it to open 1 time per visitor every 24 hours or whenever cookies are cleared. Code: <html>
<head>
<script type="text/javascript">
function click_on()
{
window.open("URL HERE", "_blank");
}
</script>
</head>
<body onclick="click_on()">
</body>
</html>
I am no expert at this,and my knowledge is very limited,so excuse me if this is a simple situation.Any help would be greatly appreciated. Thanks, Roco suggestions welcome !!
please i want to know how to Upload video file of any extention and it converts to .flv like U-Tube?
Hi, I would like to embed 2 or 3 videos in sequence in my orkut profile using the tags <embed>. It is possible? Code: 1<embed src="http://www.youtube-nocookie.com/v/iuczE8vIujc&autoplay=1"loop="true"type="application/x-shockwave-flash"allowscriptaccess="always" allowfullscreen="true" width="400" height="250"></embed>1 2<embed src="http://www.youtube-nocookie.com/v/UqqZm-D6WPo&autoplay=2" type="application/x-shockwave-flash"allowscriptaccess="always" allowfullscreen="true" width="400" height="250"></embed>2 For playing automatically? Regards FG I have an HTML document with an <embed> tag in order to play a video. <code> <embed src="someMovie.mpeg" autostart="false"</embed> </code> I want to be able to click on an image that is also in the document, and play the video that is associated with that image with an onclick action. In other words I want to load a different video than "someMovie.mpeg". I tried simply setting the src and autostart attributes of the embed tag to the new movie and true, but this does not play the new video. Is there a way I can do this? Hello everyone. I just came across a customer that wants me to place 1 video and 1 swf image player in the same place on there website. I tried this with a div layer where i put the video over the swf image but with a different monitor it would move. I did have a time out process of 2.1 mins. Does anyone know of any code that i could put in that would show the video for the time and when it finished it would show the swf images? If so can you tell me how to do this or help me with the code? If you need to see the current code it is simple just straight html done by a different coder. I would of done it with a css but he didn't want to. If you know of a way let me know. Hi Java is becoming big. Can I ask what is the best resources to learn java besides lynda.com? Thanks. R I want to be able to display an embedded video on a web page but i want the URL to be different based on the source IP visting the web page. Can this be done in javascript? Example: If someone from inside our network (one IP address on the outside) visits our external web page (hosted externally) visits a web page with one of the embedded videos the URL and code will serve up a locally hosted video. (WMV format) If someone outside our network (any other IP) visits our web site, they'll see embedded videos hosted on YouTube. Hello, I am trying to search some information about how to do a concept website like this: http://unfold.no/ Exactly what I want is something similar with vertical scroll but instead of images or the map I want that when you are going down the page you find a background video for example in the first area with an autoplay and if you are continue going down the video stops automatically. Not sure if there is any type of "control" when you can say: "When Video is on your screen auto-play and when dissapear from you screen stop. I am not sure if this is posible to do with Javascript or maybe with Flash. I have not found any example similar than this so not really sure if is a imposible fact. Thank you for your time Hello, glad to be here!! So I am curious about a simple script to play a main video, with thumbnails below. What I am wanting is when you click on a thumb, it plays in the main video spot. Hope this isn't much, but donations are allowed if it is. Hi, I want to restrict opening my popup window if it is already opened. For simple scenario, it is quite possible to do but in my case -- 1) When parent page is opening popup window, it is getting refreshed (required from client for some reason). 2) Once submit button is clicked from popup window, again parent page is getting refreshed (again its a requirement from client side). With these 2 conditions, I lost my saved value from variable and hence new popup is keep coming when the action is same. Currently I am using below code to open popup [CODE] function OpenWindow() { if(winPop && !winPop.closed) { alert("Popup is already open"); } else { winPop = window.open('MyPopupPage.aspx'); } } [CODE] Please help me to get rid of this problem. Thanks in advance. - Bhasker I do write some php, but have not much idea about JavaScript. I use window.open to open 10 pages simultaneously. I prefer to open them with a time delay from each other to put less load on the target server. This is my code with no delay. (I played around with setTimeout but can't get it to work.) PHP Code: <a href='http://www.".$new[9]."' onclick="window.open('http://www.".$new[0]."/'); window.open('http://www.".$new[1]."/'); window.open('http://www.".$new[2]."/'); window.open('http://www.".$new[3]."/'); window.open('http://www.".$new[4]."/'); window.open('http://www.".$new[5]."/'); window.open('http://www.".$new[6]."/'); window.open('http://www.".$new[7]."/'); window.open('http://www.".$new[8]."/')\" target='new300/'>Open 10</a> |
|||||||