JQuery всплывающая модель для видео - PullRequest
Новая
       2

JQuery всплывающая модель для видео

0 голосов
/ 22 января 2012

Я новичок в JQuery и пытаюсь отобразить список воспроизведения YouTube в виде миниатюр, и если пользователь щелкнет миниатюру, видео будет воспроизведено в модальном всплывающем окне.Я нашел некоторый код, который извлекает плейлист 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.Это решило большинство проблем, но возникла новая проблема;Ссылки отображаются по мере необходимости и тому подобное, но когда я нажимаю на них, ничего не происходит.Я решил использовать функцию F12 в IE9 и посмотреть на генерируемый HTML .... все выглядит хорошо, но вот где это становится странным ..... если я смотрю Source на своей странице, я получаю тот же кодкак указано выше.Если я использую 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) не работает.

Мысли ???

1 Ответ

0 голосов
/ 22 января 2012

Инструменты отладки читают что в браузере в режиме реального времени. Источником является код, прежде чем он попадает в браузер. JavaScript манипулирует вашим контентом в браузере, а не в источнике.

Также ваши ссылки работают нормально в IE9 http://jsfiddle.net/MattLo/guMQa/2/

...