Нажмите Загружать несколько видео с помощью YOUTUBE Iframe

Question

У меня есть несколько миниатюр под основным контейнером видео. Мне понравится, когда вы нажимаете на каждую миниатюру - загружается соответствующее видео и начинается воспроизведение Используя подход NEW YOUTUBE API IFRAME здесь

Ваша помощь или направление будут оценены

ОБЗОР JSFIDDLE ЗДЕСЬ

ОБЗОР ОБРАТНОЙ СВЯЗИ ***

Answer 1

Просмотреть эту скрипту: http://jsfiddle.net/Y9j7R/5/

Запустить этот код при загрузке:

var a = document.getElementsByTagName("a");            //1
for(var i=0; i<a.length; i++){                         //2
    if(!/#ytplayer/.test(a[i].href)) continue;         //3
    var link = a[i].innerHTML.match(/\/vi\/([^\/]+)/); //4
    if(link) (function(vidId){                         //5
        a[i].onclick = function(){                     //6
            player.loadVideoById(vidId);               //7
        }                                              //8
    })(link[1]);                                       //9
}      

Подробное описание кода

1. Выбрать все <a>(якорные) элементы в документе
2. Пролистайте эти якоря, используя for.Во время каждой итерации «текущая» привязка передается через a[i].
3. . Проверьте, содержит ли атрибут href не (!) «#ytplayer», используяtest метод регулярного выражения .Если это условие истинно (т. Е. Атрибут href не содержит "#ytplayer"), оператор continue завершает текущую итерацию и переходит к следующейanchor.
4. Запрашивается свойство innerHTML текущего якоря.Для получения идентификатора видео используется метод match.Регулярное выражение /\/vi\/([^\/]+)/ означает: соответствует подстроке, равной /vi/<any consecutive non-slash chars>, и группе <any consecutive non-slash chars>.Когда такая подстрока найдена, переменная link имеет свойство 1 (one), которое содержит значение этой группы.В противном случае link равно null.
5. Если переменная link не равна null, создается анонимный function (строки 5-9) и исполнено (строка 9).Первый аргумент функции будет ссылаться через vidId (переменная).
6. Назначает вновь созданный functiononclick свойство текущего якоря.Присвоение функции свойству onclick приведет к определению обработчика события onclick.
7. Вызывает loadVideoById метод объекта player (согласно определению API JavaScript YouTube ).
9. Вызывает функцию (создается в строках 5-9), передавая link[1] в качестве первого параметра.

Ссылки

• for петли и continue оператор
• Создание и вызов functions в JavaScript
• Регулярные выражения (RegExp).
• test метод объекта RegExp
• match в сочетании с регулярным выражением
• Свойство innerHTML элемента
• onclick обработчик событий
• loadVideoById метод YouTube JavaScript API

Еще один интересный ответ

• YouTube iframe API: как управлять iframeплеер который уже в HTML?