найдите все ссылки YouTube с js (jQuery)
Можно также проверить makedepend:
3 ответа
Я изменил содержимое с идентификатора на класс, потому что я предполагал, что у вас будет более одной области содержимого?
Я уверен, что существует гораздо более эффективный способ сделать это, но это моя попытка. Примечание Я не умею использовать регулярные выражения, поэтому то, что у меня есть, настолько близко, насколько я могу, я уверен, что кто-то может помочь улучшить его, поэтому ему не нужно заменять ? 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>
Script
$(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 )
})
}
})
})
Я первым признаю, что это не красиво, но работает. Я также вставил рабочую версию этого кода в это обновление 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=','')) );
});
}
});
});
Я был почти на том же треке, что и fudgey, но я сосал регулярные выражения даже больше, чем он, так что до этого момента я «позаимствовал» его код. Одно изменение, которое я сделал, - это использование swfobject для встраивания видео вместо обработки кода встраивания. Это просто означает, что вам нужно добавить библиотеку swfobject на страницу
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
HTML такой же, как у fudgey's
<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>
Небольшое изменение в javascript
$(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(i){
var that = $(this);
var txt = $(this).html();
var vid = txt.match(/((\?v=)(\w[\w|-]*))/g); // end up with ?v=oHg5SJYRHA0
if (vid.length) {
$.each(vid, function(x){
var ytid = this.replace(/\?v=/,'') // end up with oHg5SJYRHA0
var playerid = 'videoplayer_' + i + "_" + x;
that.append("<div id='" + playerid + "'></div>");
swfobject.embedSWF("http://www.youtube.com/v/" + ytid, playerid, vidWidth, vidHeight, "8");
})
}
})
})
Престижность ответу Фаджи tho
Вам нужно будет получить содержимое div примерно так:
var text = $("div#content p").html(); // or .text()
С этим текстом вы можете использовать строковые манипуляции или регулярные выражения, чтобы найти URL. Затем вы можете создать содержимое jquery для добавления с помощью:
var content = $('<a href="...">...</a>');
и добавить его к чему-либо с помощью методов управления jquery, например
var destination = $("body");
destination.append(content);
Чтобы получить более подробную информацию, ваш вопрос потребует более подробной информации.