使用jQuery附加YouTube视频嵌入?

时间:2010-11-16 22:42:38

标签: javascript jquery youtube append src

我需要添加“& rel = 0”添加到YouTube嵌入代码的结束SRC标记的末尾。正好放置“xCODE NEEDS TO HEREx”的地方是我需要放置& rel = 0的地方。有没有办法使用jQuery的Append函数执行此操作?

<embed src="http://www.youtube.com/v/S6I6Fc5mJeE&hl=en_US&fs=1xCODE NEEDS TO GO HEREx" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="284" height="171"></embed>

我需要这个功能,因为我们网站上有几个视频,要找到合适的数据库表并修改它以纠正这个问题是一件痛苦的事。

请帮忙!

亚当

3 个答案:

答案 0 :(得分:1)

试试这个:

 var __mainDiv;
 var __preLoaderHTML;
 var __opts;

 function __jQueryYouTubeChannelReceiveData(data) {

     var cnt = 0;

     $.each(data.feed.entry, function(i, e) {
         if (cnt < __opts.numberToDisplay) {
             var parts = e.id.$t.split('/');
             var videoId = parts[parts.length-1];
             var out = '<div class="video"><a href="' + 
                  e.link[0].href + '"><img src="http://i.ytimg.com/vi/' + 
                  videoId + '/2.jpg"/></a><br /><a href="' + 
                  e.link[0].href + '">' + e.title.$t + '</a><p>';
             if (!__opts.hideAuthor) {
                 out = out + 'Author: ' + e.author[0].name.$t + '';
             }
             out = out + '</p></div>';
             __mainDiv.append(out);
             cnt = cnt + 1;
         }
     });

    // Open in new tab?
    if (__opts.linksInNewWindow) {
        $(__mainDiv).find("li > a").attr("target", "_blank");
    }

    // Remove the preloader and show the content
    $(__preLoaderHTML).remove();
    __mainDiv.show();
}

(function($) {
    $.fn.youTubeChannel = function(options) {
        var videoDiv = $(this);

        $.fn.youTubeChannel.defaults = {
            userName: null,
            channel: "favorites", //options are favorites or uploads
            loadingText: "Loading...",
            numberToDisplay: 3,
            linksInNewWindow: true,
            hideAuthor: false
        }

        __opts = $.extend({}, $.fn.youTubeChannel.defaults, options);

        return this.each(function() {
            if (__opts.userName != null) {
                videoDiv.append("<div id=\"channel_div\"></div>");
                __mainDiv = $("#channel_div");
                __mainDiv.hide();

                __preLoaderHTML = $("<p class=\"loader\">" + 
                    __opts.loadingText + "</p>");
                videoDiv.append(__preLoaderHTML);

                // TODO: Error handling!
                $.ajax({
                    url: "http://gdata.youtube.com/feeds/base/users/" + 
                        __opts.userName + "/" + __opts.channel + "?alt=json",
                    cache: true,
                    dataType: 'jsonp',                    
                    success: __jQueryYouTubeChannelReceiveData
                });
            }
        });
    };
})(jQuery);

要使用YouTube插件,您只需要添加对jQuery库和jquery.youtube.channel.js文件的脚本引用。然后添加一个容器来保存呈现的HTML,一行JavaScript来连接所有内容,还有一些CSS来格式化输出:

<script type=”text/javascript” src=”jquery.youtube.channel.js”></script>

<div id="youtubevideos"></div>

<script type="text/javascript">
$(document).ready(function() {
$('#youtubevideos').youTubeChannel({
userName: 'diggerdanh',
channel: "favorites",
hideAuthor: false,
numberToDisplay: 6,
linksInNewWindow: true
//other options
//loadingText: "Loading...",
});
});
</script>

答案 1 :(得分:1)

你有什么理由不能用常规的'jQuery吗?

$('embed[src^=http://www.youtube.com/]').attr('src', function (i, v)
{
    return v + '&rel=0';
});

似乎适合我。 http://jsfiddle.net/mattball/tt3AG/

答案 2 :(得分:0)

我会做类似这个未经测试的jQuery语句:

$("embed[src]").attr("src", this.attr("src") + "&rel=0");