javascript - How to display youtube video data after pasting url, exactly like Facebook's Wall form does? -
how can display youtube video data bellow form, after pasting url, facebook wall form does? bellow: 
how can done? there jquery plugin able this? appreciate same thing image urls.
thanks.
this jsfiddle - uses youtube api - provide basic example started:
here example in it's entirety (since have include code well)
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> </style> <script type="text/javascript"> function parse_str (str, array) { var strarr = string(str).replace(/^&/, '').replace(/&$/, '').split('&'), sal = strarr.length, fixstr = function (str) { return decodeuricomponent(str.replace(/\+/g, '%20')); }, i, j, ct, p, lastobj, obj, lastiter, undef, chr, tmp, key, value, postleftbracketpos, keys, keyslen; if (!array) array = this.window; (i = 0; < sal; i++) { tmp = strarr[i].split('='); key = fixstr(tmp[0]); value = (tmp.length < 2) ? '' : fixstr(tmp[1]); while (key.charat(0) === ' ') key = key.slice(1); if (key.indexof('\x00') > -1) key = key.slice(0, key.indexof('\x00')); if (key && key.charat(0) !== '[') { keys = []; postleftbracketpos = 0; (j = 0; j < key.length; j++) { if (key.charat(j) === '[' && !postleftbracketpos) { postleftbracketpos = j + 1; } else if (key.charat(j) === ']') { if (postleftbracketpos) { if (!keys.length) keys.push(key.slice(0, postleftbracketpos - 1)); keys.push(key.substr(postleftbracketpos, j - postleftbracketpos)); postleftbracketpos = 0; if (key.charat(j + 1) !== '[') break; } } } if (!keys.length) keys = [key]; (j = 0; j < keys[0].length; j++) { chr = keys[0].charat(j); if (chr === ' ' || chr === '.' || chr === '[') keys[0] = keys[0].substr(0, j) + '_' + keys[0].substr(j + 1); if (chr === '[') break; } obj = array; (j = 0, keyslen = keys.length; j < keyslen; j++) { key = keys[j].replace(/^['"]/, '').replace(/['"]$/, ''); lastiter = j !== keys.length - 1; lastobj = obj; if ((key !== '' && key !== ' ') || j === 0) { if (obj[key] === undef) obj[key] = {}; obj = obj[key]; } else { ct = -1; (p in obj) { if (obj.hasownproperty(p)) { if (+p > ct && p.match(/^\d+$/g)) ct = +p; } } key = ct + 1; } } lastobj[key] = value; } } } function search(url) { if (url.indexof("?") === -1 || url.indexof("v=") === -1) return; var query_string = url.substr(url.indexof("?")+1), arr = []; parse_str(query_string, arr); var xhr = new xmlhttprequest(); xhr.onload = function(oevent) { if (xhr.status == 200 && xhr.responsetext) { var obj = json.parse(xhr.responsetext); var content = []; content.push( '<img src="//img.youtube.com/vi/' + arr['v'] + '/0.jpg" style="width:80px; height:80px;" />', obj.entry.title['$t'], url, obj.entry['media$group']['media$description']['$t'], obj.entry.author[0].name['$t'] ); document.getelementbyid('data').innerhtml = content.join('<br /><br />'); } } xhr.open("get", "https://gdata.youtube.com/feeds/api/videos/" + arr['v'] + "?v=2&alt=json", false) xhr.send(null); } </script> </head> <body> input youtube video url:<br /> <input type="text" id="url" oninput="search(this.value)" /><br /> <br /> <div class="data" id="data"> </div> </body> </html> note - parse_str function courtesy of php.js
Comments
Post a Comment