Question

我是JQuery的新手，我正在尝试以缩略图显示YouTube播放列表，如果用户点击缩略图，则视频将以模式弹出式播放。我找到了一些基于播放列表ID检索youtube播放列表的代码，效果很好：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Vidz</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type='text/javascript'>//<![CDATA[
    $(window).load(function () {
        var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/8F9409C187634853?v=2&alt=json&callback=?';
        var videoURL = 'http://www.youtube.com/watch?v=';
        $.getJSON(playListURL, function (data) {
            var list_data = "";
            $.each(data.feed.entry, function (i, item) {
                var feedTitle = item.title.$t;
                var feedURL = item.link[1].href;
                var fragments = feedURL.split("/");
                var videoID = fragments[fragments.length - 2];
                var url = videoURL + videoID;
                var thumb = "http://img.youtube.com/vi/" + videoID + "/default.jpg";
                list_data += '<li><a href="' + url + '" title="' + feedTitle + '"><img alt="' + feedTitle + '" src="' + thumb + '"></a></li>';                
            });
            $(list_data).appendTo(".cont");
        });
    });//]]>  

</script>
</head>
<body>
    <ul class="cont"></ul>
</body>
</html>

我发现了无数的JQuery弹出式示例，但问题是它们都使用了不同版本的JQuery而不是这个示例使用，所以它们互相取消，模态弹出窗口不起作用。

有人能告诉我如何使用用户点击的视频制作模态弹出窗口吗？

更新：终于找到了解决JQuery冲突问题的东西。似乎需要首先加载jquery.min.js，然后再加载任何其他jquery脚本。这解决了大多数问题，但出现了一个新问题;链接会根据需要显示，但是当我点击它们时，没有任何反应。我决定在IE9中使用F12功能并查看正在生成的HTML ....所有看起来都不错，但这里有点奇怪.....如果我在我的页面上查看源代码，我得到相同的代码如上。如果我使用F12并查看它，我会看到所有的html标签。当我将F12的内容保存到新文件并在IE中打开时，它可以工作！那么，有什么区别？ IE不写出所需的html吗？现在完全迷失了.....

更新＃2：这是我的最新代码，其中包含jquery模式弹出窗口：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Vidz</title>
</head>
<body>
<a title="01212012 Country Ham House rally" class="youtube" href="#" rel="vLZ5pIfrhNI">ham</a><br />
<div class="cont"></div>
</body>
</html>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function () {
    var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/8F9409C187634853?v=2&alt=json&callback=?';
    var videoURL = 'http://www.youtube.com/watch?v=';
    $.getJSON(playListURL, function (data) {
        var list_data = "";
        $.each(data.feed.entry, function (i, item) {
            var feedTitle = item.title.$t;
            var feedURL = item.link[1].href;
            var fragments = feedURL.split("/");
            var videoID = fragments[fragments.length - 2];
            var url = videoURL + videoID;
            var thumb = "http://img.youtube.com/vi/" + videoID + "/default.jpg";
            //list_data += '<li><a href="' + url + '" title="' + feedTitle + '" rel="' + videoID + '"><img alt="' + feedTitle + '" src="' + thumb + '"</a></li>';                
            list_data += '<a class="youtube" href="#" rel="' + videoID + '" title="' + feedTitle + '"><img alt="' + feedTitle + '" src="' + thumb + '"></a><br>';
        });
        $(list_data).appendTo(".cont");
    });
});//]]>
</script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" rel="stylesheet" />     
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>     
<script type="text/javascript" src="http://wo.simcare.biz/jquery.youtubepopup.js"></script>     
<script type="text/javascript">
$(function () { $("a.youtube").YouTubePopup({ autoplay: 0 }); });     
</script>

正如你可以看到静态链接“ham”，vid显示在弹出窗口就好了。但是没有缩略图（由jquery函数创建）的视频都能正常工作。

思想???

Answer 1

调试工具实时读取浏览器上的内容。源代码是在它到达浏览器之前的代码。 JavaScript在浏览器中操纵您的内容，而不是源。

此外，您的链接似乎在IE9中正常工作 http://jsfiddle.net/MattLo/guMQa/2/

视频的JQuery弹出模式

1 个答案: