说有一个div有内容和一个YouTube链接.我想抓住这个YouTube链接并嵌入它.
<div id="content"><p>Here is a cool video. Check it out: http://www.youtube.com/watch?v=oHg5SJYRHA0</p></div>
更新1：
这是我的js到目前为止
$("#content").each(function(){
var allContent = $(this).html();
//need regex to find all links with youtube in it,ovbIoUsly it can't == youtube.com,but basically the link has to have youtube.com in it.
if ($("a",allContent).attr("href") == "youtube.com" ) {
// grab youtube video id
/* replace link with <div id="yt-video">
<object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/429l13dS6kQ&hl=en&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/429l13dS6kQ&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>
</div>
*/
}
});
解决方法
我把内容从一个id改成了一个类,因为我猜你会有多个内容区域？
我相信有一个更有效的方式来做到这一点,但这是我的尝试.注意我在正则表达式中,所以我有一样接近我可以得到,我相信有人可以帮助改进它,所以它不必更换每个循环中的v =.
HTML
<div class="content"><p>Here is a cool video. Check it out: http://www.youtube.com/watch?v=oHg5SJYRHA0 and this one http://www.youtube.com/watch?v=fLBPsZVI8Gc&feature=player_embedded</p></div> <div class="content"><p>Here is a cool video. Check it out: http://www.youtube.com/watch?v=fLBPsZVI8Gc&feature=player_embedded</p></div>
脚本
$(document).ready(function(){
// I added the video size here in case you wanted to modify it more easily
var vidWidth = 425;
var vidHeight = 344;
$('.content:contains("youtube.com/watch")').each(function(){
var that = $(this);
var txt = $(this).html();
// Tthis could be done by creating an object,adding attributes & inserting parameters,but this is quicker
var e1 = '<obj'+'ect width="' + vidWidth + '" height="' + vidHeight + '"><param name="movie" value="http://www.youtube.com/v/';
var e2 = '&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" ' +
'value="always"></param><em'+'bed src="http://www.youtube.com/v/';
var e3 = '&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="' + vidWidth +
'" ' + 'height="' + vidHeight + '"></embed></object> ';
var vid = txt.match(/((\?v=)(\w[\w|-]*))/g); // end up with ?v=oHg5SJYRHA0
if (vid.length) {
$.each(vid,function(i){
var ytid = this.replace(/\?v=/,'') // end up with oHg5SJYRHA0
that.append( e1 + ytid + e2 + ytid + e3 )
})
}
})
})
我会第一个承认它不漂亮,但它的作品.我还在this pastebin中粘贴了这个代码的工作版本
$(document).ready(function(){
// I added the video size here in case you wanted to modify it more easily
var vidWidth = 425;
var vidHeight = 344;
var obj = '<object width="' + vidWidth + '" height="' + vidHeight + '">' +
'<param name="movie" value="http://www.youtube.com/v/[vid]&hl=en&fs=1">' +
'</param><param name="allowFullScreen" value="true"></param><param ' +
'name="allowscriptaccess" value="always"></param><em' +
'bed src="http://www.youtube.com/v/[vid]&hl=en&fs=1" ' +
'type="application/x-shockwave-flash" allowscriptaccess="always" ' +
'allowfullscreen="true" width="' + vidWidth + '" ' + 'height="' +
vidHeight + '"></embed></object> ';
$('.content:contains("youtube.com/watch")').each(function(){
var that = $(this);
var vid = that.html().match(/(?:v=)([\w\-]+)/g); // end up with v=oHg5SJYRHA0
if (vid.length) {
$.each(vid,function(){
that.append( obj.replace(/\[vid\]/g,this.replace('v=','')) );
});
}
});
});