JavaScript - Replace Youtube Video Player With A Different Div

Hi all, I need Media player to stream and play video in javascript...any help or working link will work.

My requirement is I have .wmv files but when i embed them in html pages first it gets downloaded and then it gets played.

I need them playing while they are getting downloaded.

please help, i have tried lots of codes but got no success

Hi,

I currently created a video uploader, but when the video is too big in size, the page seems to be not doing any until the video is completely uploaded. I want to put somewhat like "loading.. please wait" script until the video is not completely uploaded.

Thanks.

//Ana

i am trying to make an online graphing calculator with javascript. dont ask how because i dont know. but there is an annoying error in a do...while loop. although it should break out of the loop when the |'s (absolute value signs) are replaced with Math.abs( and ). here is the code.

Code:

var initec = function(){
    var rg = {
    }
    ;
    rg.matc = false;
    rg.i = 0;
    rg.change = function(equ){
        if (typeof(equ) != "string"){
            alert('Equation must be a string');
            return;
        }
         alert("starting equation: "+ equ);
        rg.i = 0;
        do{
            rg.matc = equ.match(/\|/);
            if(rg.i === 0){
                equ.replace(/\|/, " Math.abs(");
                rg.i = 1;
                alert("1 "+equ);
            }
            else {
                equ.replace(/\|/, " ) ");
                rg.i = 0;
                alert("0 "+equ);
            }
        }while(rg.matc) 
        alert("finished equation: " + equ);
    }
return rg;
}

rg=initec();
rg.change("|8/x+7|-2");

the last 2 lines and the alerts are for debugging. as you can see, it is not finished. but still, it should work.

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?

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.

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 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!

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?

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> ");

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

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 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?

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);
}

//-->

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?