Материалы для WEB разработки на LAMP
Yandex Disk REST API jQuery Plugin

В статье представлен Yandex Disk REST API jQuery Plugin, который выполняет вставку и размещение на web странице файлов аудио, видео, фото или download ссылки с Яндекс Диска на основе публичной ссылки на этот файл. Плагин, будучи примененный к таким ссылкам, делает их замену на медийный контейнер тега audio, video или img с этим файлом. Для пользователя это выглядит как обычная загрузка, отображение и воспроизведение медиа файла с вашего WEB сервера. Для не медийных файлов плагин формирует ссылку на скачивание файла.

 

В данной статье представлено детальное описание устройства и принципа работы плагина с полным обзором его параметров и возможных вариантов подключения и использования. Краткая, практическая инструкция по применению плагина на сайте представлена в статье "Применение Yandex Disk REST API jQuery Plugin" и в дистрибутиве плагина.

 

Скачать Yandex Disk REST API jQuery Plugin 

 

Скринкаст: Yandex Disk REST API jQuery Plugin

Смотреть скринкаст Yandex Disk REST API jQuery Plugin 

В скринкасте представлен краткий обзор Yandex Disk REST API jQuery Plugin.

 

 

Общее описание Yandex Disk REST API jQuery плагина

Данный плагин целесообразно (но не обязательно) применять к тегам <a> или другим тегам, обязательно имеющим атрибут href, содержащий в URL путь к публичному файлу на Яндекс Диске. Плагин выполняет замену таких элементов (ссылок) на элементы/теги audio, video, image или download ссылку в соответствии с медиа типом файла на Яндекс Диске. Соответственно, это приводит к вставке и загрузке на странице этого медиа файла. Такой подход позволяет вставлять ваши публичные медиа файлы, находящиеся на Яндекс Диске и имеющие публичную ссылку, напрямую в WEB страницу, открытую в браузере пользователя. Вы можете использовать не только ваши публичные файлы с Яндекс Диска, но и файлы других пользователей и вставлять их напрямую в браузер клиента на вашей WEB странице, как это было бы, если бы эти файлы подгружались с вашего хостинга. Плагин позволяет задать, по какому событию выполнять такую замену, и возможны два варианта - первый по клику на элементе и второй по готовности WEB страницы. В любом случае, все, одновременно запущенные плагином, обработки и замены элементов будут поставлены в очередь, и каждая последующая будет выполняться после завершения предыдущей. Поэтому не возникнет большого количества одновременных запросов к Яндекс Диску, так как все они будут выполняться по очереди. Событие на элементе срабатывает только один раз, поэтому если замена не удалась (например, ошибочная ссылка на Яндекс Диск), то повторный клик по элементу уже выполниться как обычный переход по ссылке к Яндекс Диску. Иначе горя, плагин делает только одну попытку, и если она удачная, то элемент будет заменен на файл с Яндекс Диска. Если же попытка получить файл с Яндекс Диска будет для плагина не удачной, то просто выполниться переход по исходной ссылке на Яндекс Диск.

Механизм работы плагина основан на REST API Yandex Disk, а именно на его части по получению ссылки на скачивание для публичного файла. Этот механизм позволяет через размещение ссылок на публичные файлы с Яндекс Диска вставлять мультимедийные файлы (audio, video и img) на WEB страницу напрямую путем замены плагином таких ссылок на соответствующие теги (audio, video и img). При назначении плагина выбранным элементам (ссылкам) вы можете задать срабатывание плагина при клике по ссылке или при загрузке страницы. Также, плагин предоставляет два варианта задания callback функций, которые будут вызваны в случае удачной замены ссылки. Это позволяет вам добавить свои манипуляции над вставленным плагином элементом html, так как плагин передает в callback функции id и тип вставленного им html элемента.

В общем, логика работы плагина следующая: для выбранных элементов, которым назначен плагин, устанавливается обработчик события (по клику или по полной загрузке страницы), который при наступлении события сначала проверяет ссылку, что она имеет правильный вид для публичной ссылки на файл с Яндекс Диска. Если это так, то плагин вставляет в конец HTML кода текущего элемента HTML код переданный ему в параметре loader (позволяет передать иконку процесса загрузки файла), и далее, при помощи ajax запроса к REST API Yandex Disk на основе публичной ссылки получает "прямую" ссылку на скачивание файла. Если операция получения ссылки для скачивания прошла удачно, т.е. файл есть на Яндекс Диске по данной публичной ссылке, то плагин заменяет текущий HTML элемент, на котором произошло событие, новым элементом/тегом audio, video, image или download ссылкой с "прямой" ссылкой на файл. Соответственно, после этого, вставленный новый элемент отрисовывается браузером и файл загружается в медиа теге. Затем плагин взывает callback функцию переданную ему в параметре afterReplace (позволяет передать пользовательскую функцию, см. ниже), и после этого пытается вызвать еще одну пользовательскую функцию с именем равным значению id вставленного плагином элемента. Если начальный HTML элемент имел id, то замещающий его элемент будет иметь это же id. Если иначе, то у нового HTML элемента будет сгенерировано новое случайное id (см. ниже детали). На этом действия плагина заканчиваются. Если же ajax запрос к REST API Yandex Disk будет неудачен (такого файла нет на Яндекс Диске или другие причины), то плагин добавит в конец текущего элемента на котором произошло событие html код, переданный ему в параметре failed (позволяет передать иконку ошибки загрузки), и на этом работа плагина закончиться. Плагин срабатывает на выбранном элементе только один раз, и это касается, и успешного результата, и не успешного. Поэтому, в случае неудачи, повторное событие на элементе не приводит к повторному срабатыванию плагина.

Основные плюсы такого подхода по использованию REST API Yandex Disk и загрузки медийных файлов с Диска:

  • Файлы хранятся на Яндекс Диске и загружаются с него, что экономит место на вашем хостинге и ускоряет загрузку страниц, так как разгружается канал связи к вашему сайту и уменьшается количество запросов и трафик к серверу сайта, потому что основной HTML код страницы загружается с вашего хостинга, а медиа файлы, которые имеют большой размер, подгружаются уже с Яндекс Диска напрямую клиенту и только по запросу пользователя. Такой механизм является вариантом распределенной загрузки контента, что, на мой взгляд, является главным преимуществом такого подхода;
  • файлы размешаются на вашей странице изначально как публичные ссылки на Яндекс Диск файл, что способствует распространению файла т.к. Яндекс Диск предоставляет по этим ссылкам дополнительный функционал, как, например, просмотр, скачивание, возможность поделиться файлом в социальных сетях и на диске. Так же, если у клиента отключен js или он не исполняется (например роботами), то такие ссылки все равно, в конечном итоге, приведут к вашему файлу на Яндекс Диске;
  • плагин позволяет загружать и вставлять ваши медиа файлы на страницу или после полной загрузки и формировании страницы браузером или по клику пользователя на ссылке, что позволяет ускорить генерацию страницы в браузере и не подгружать лишнее в момент загрузки и отрисовки основной веб страницы в браузере, а делать это только по инициативе пользователя или по окончанию формирования основной страницы сайта. Этот подход так же отличается от встраивания на страницу видео с Youtube тем, что встроенный стандартный iframe Youtube загружается вместе со страницей полностью в любом случае, что не всегда удобно, потому что пользователь может так и не воспроизвести ролик на странице.

Возможные минусы такого подхода по хранению и вставки файлов на WEB страницу или сайт:

  • Необходимо заниматься размещением и управлением файлами на Яндекс Диске. Это нужно делать вручную или программно, при помощи Disk API;
  • Для не публичных файлов необходимо использовать механизмы авторизации и токенов (плагин работает только с публичными файлами);
  • Доступ к файлам может быть выполнен в обход посещения вашего сайта, напрямую с Яндекс Диска, соответственно ваши файлы может встроить любой к себе на свою WEB страницу. Однако для одних это может быть минусом, а для других это может быть плюсом. Так же, этот минус достаточно относительный, потому что, даже если вы будете отдавать публичный файл со своего хостинга, ни что не помешает его скачать и разместить на другом хостинге. Поэтому, лучше уж самому предоставить такую возможность и поместить файл на Яндекс Диск, избежав тем самым лишней нагрузки на сайт;
  • Возможные ограничения количества обращений и скачиваний файла со стороны Яндекс Диска. Вполне логично предположить, что такие ограничения должны быть, но какие они и при каких обстоятельствах срабатывают не понятно. У меня, при множественных обращениях к Яндекс Диску, не возникало проблем с этим;
  • Возможная блокировка ваших файлов Яндекс Диском по причине наличия вирусов, лицензионных нарушений, жалоб и т.п. С нарушением прав и т.п. все понятно, но как будут разрешаться споры в случае если вы не нарушили авторских прав и прочих требований, а ваши файлы (или весь диск) заблокировали по необоснованной жалобе. Пожалуй, это самый главный риск, который, на мой взгляд, может ограничивать использование этой технологии. Вебмастер, размещая на Яндекс Диске файлы для своего приложения, хочет получить в первую очередь гарантию, что при соблюдении им всех правил он не получит необоснованную блокировку всего диска.
  • Так же, на практике, пришлось столкнуться с такой ситуацией, когда Яндекс Диск отказывал в обслуживании и отдавал плагину ответ 429 "Большое количество запросов". Такая ситуация возникла в один из вечеров, но на следующий день уже все было нормально и те же самые веб страницы подгружали с Яндекс Диска файлы еже без проблем. Поэтому, могу предположить, что ситуация была обусловлена перегрузкой сервера Яндекс Диска, а не какими-то ограничения для сайта.

 

Параметры плагина и их значения по умолчанию

Здесь приведены параметры плагина по умолчанию. Если нужно будет какие либо из них изменить, то необходимо для переопределяемых параметров передать новые значения при применении плагина (см.ниже).

{   
onType        : 'click', //'click' or 'ready', default is click on element
url           : 'https://cloud-api.yandex.net:443/v1/disk/public/resources/download?public_key=',
matcher       : /(^.{0,15}yadi\.sk\/[\w]{1}\/[\w-]{13}$)/i,
timeout       : 5000,
async         : true,  //bool
afterReplace  : false, //function witch will be called after ajax success action is done
loader        : false, //HTML code of loader, wich be appendTo selector
failed        : false,  //HTML code of loader, wich be appendTo selector
replacer      : {
                    audio : '<audio id="{id}" class="ydisk-audio" controls src="{href}"{size}></audio>',
                    video : '<video id="{id}" class="ydisk-video" controls src="{href}"{size}></video>',
                    image : '<img id="{id}" class="ydisk-image" controls src="{href}"{size}>',
                    dload : '<a id="{id}" class="ydisk-dload" download href="{href}">Download {html}</a>'
                }
}

 

Описание параметров и их значений:

onType - задает событие при возникновении которого для выбранного элемента будет срабатывать плагин:

  • Возможные значения - string: 'click' or 'ready';
  • 'click' - срабатывание по клику на элементе, является значением по умолчанию;
  • 'ready' - срабатывание плагина на всех выбранных элементах по окончанию загрузки страницы.

url - часть URL запроса к REST API Yandex Disk для получения ссылки на скачивание. К этому значению будет состыкован кодированный URL к файлу на Yandex Disk текущего элемента выборки. Формат этотго параметра определен документацией Yandex Disk REST API

matcher - регулярное выражение по которому будет проверятся URL текущего элемента на соответствие формату URL к файлу на Яндекс Диске. Если URL текущего элемента не будет соответствовать этому регулярному выражению, то этот элемент не будет обрабатываться плагином. При необходимости, вы можете переопределить данный параметр, передав платину новое регулярное выражение для проверки URL ссылки.

timeout - максимальное время ajax ожидания ответа от REST API Yandex Disk в миллисекундах. По умолчанию равно 5000 миллисекундам, что соответствует 5 секундам.

async - стандартная опция, устанавливающая режим выполнения ajax запроса к REST API Yandex Disk. По умолчанию равно true, что значит асинхронное выполнение ajax запроса. В любом случае, все ajax запросы будут выполняться по очереди, плагин будет ждать завершение очередного запроса и только после этого запускать следующий. Поэтому срабатывание плагина на множестве элементов не вызовет сразу множество ajax запросов, даже при значении async = true. Использовать async = false не рекомендуется, т.к. это может 'подвесить' браузер, но, тем не менее, такая возможность имеется.

afterReplace - в этом параметре можно указать функцию, которая будет вызвана после того, как текущий элемент, на котором произошло срабатывание плагина, будет заменен новым элементом audio, video, img или download ссылкой. По умолчанию для параметра afterReplace ничего не задано. Если в этом параметре будет задана пользовательская функция, то в  эту функцию будет передано два параметра: первый string содержащая значение атрибута id нового элемента, второй параметр это медиа тип элемента как string, возможные значения для которого - 'audio', 'video', 'image', 'compressed'. На основе значения типа можно понять какой новый HTML элемент/тег будет вставлен плагином.

Для:

  • 'audio' - будет вставлен тег <audio>;
  • 'video' - будет вставлен тег <video>;
  • 'image' - будет вставлен тег <img>;
  • 'dload' - будет вставлен тег <a> с атрибутом download="download", получиться download ссылка на скачивание файла с Яндекс Диска.

Однако, если исходный HTML элемент будет содержать атрибут download="download", то плагин всегда будет вставлять тег <a> с атрибутом download="download", как download ссылку на скачивание файла с Яндекс Диска.

Пример пользовательской функции для параметра afterReplace:

afterReplace : function(id, type) {
                //в эту функцию передаются id заданное новому элементу и тип: audio,image,video
                //try to set handler to controls buttons to play media on start time
                if ( type === 'audio' || type === 'video' ) {
                    
                     $('.' + id).click(function(el) {
                        
                        el.preventDefault(); // <-- important!
                        var obj  = document.getElementById(id),
                            time = parseInt($(this).data('start-time'));

                        if ( $.type( obj ) === "object" && $.isNumeric(time) ) {
                            obj.currentTime = time;
                            obj.play();
                        };
                     }); //End media handler
                };
           };// ydiskPlay

Приведенная в примере пользовательская функция для параметра afterReplace плагина выполняет выборку элементов имеющих в атрибуте class имя класса с одноименным значением id замещающего нового элемента. Затем, для выбранных элементов назначается обработчик события click, который запускает воспроизведение вставленного audio или video файла со времени указанного в атрибуте data-start-time элемента, по которому кликнули. Тем самым реализуется простейший вариант оглавления для аудио или видео файла подгруженного с Яндекс Диска.

loader - позволяет передать html код, который будет вставлен в конец HTML кода текущего элемента и будет там пока идет загрузка файла и замещение плагином текущего элемента. Предполагается, что сюда вы будете передавать иконку загрузчика, например, если вы используете Font-Awesome icons, то пример может быть такой: '&nbsp;<i class="fa fa-spinner fa-spin fa-fw"></i>'. По умолчанию этот параметр пустой.

failed  - аналогичен параметру loader и позволяет передать html код в случае ошибки загрузки элемента. Например, в варианте с использованием Font-Awesome icons это может выглядеть так: '&nbsp;<i title="Loading Error!" class="fa fa-info-circle fa-fw sm-red-font"></i>'.

replacer - задает html код шаблона на который будет выполнена замена текущего элемента, на котором произошло срабатывание плагина.
Этот параметр имеет следующие значения по умолчанию:

replacer : {
            audio : '<audio id="{id}" class="ydisk-audio" controls src="{href}"{size}></audio>',
            video : '<video id="{id}" class="ydisk-video" controls src="{href}"{size}></video>',
            image : '<img id="{id}" class="ydisk-image" controls src="{href}"{size}>',
            dload : '<a id="{id}" class="ydisk-dload" download href="{href}">Download {html}</a>'
           }

все имеющиеся паттерны будут заменены по логике:

  • {id} - будет заменен на значение id, взятое от текущего элемента, если же id отсутствует у текущего элемента, то оно будет сгенерировано как строка: ydisk-replaced-' + new Date().getTime();
  • {href} - будет заменено на URL загрузки файла с Яндекс Диска, который будет получен через REST API Yandex Disk на основе публичного URL файла;
  • {size} - будет заменено на строку height="значение" width="значение" со значениями полученными из атрибутов data-width и data-height текущего элемента. Если эти атрибуты или одни из них отсутствуют или имеют не цифровые значения то {size} будет заменено пустой строкой;
  • {html} - текст первичной ссылки на файл с Яндекс Диска;

 

Формат HTML элемента к которому следует применять ydisk плагин:

Элемент должен иметь атрибут href с публичной ссылкой на файл расположенный на Яндекс Диске. Поэтому, удобнее всего применять плагин к тегам <a> с публичным URL на файл с Яндекс Диска. Плагин работает только с публичными URL Яндекс Диска вида: https://yadi.sk/i/file-id, что определяется в параметре matcher плагина регулярным выражением. URL, которые не проходят это регулярное выражение плагин игнорирует.

Пример ссылки:

в минимальном варианте

<a class="your-class-name" href="https://yadi.sk/i/file-id">Text</a>

или в более развернутом варианте

<a id="your-id-name" class="your-class-name" href="https://yadi.sk/i/file-id" data-width="100" data-height="100">Text</a>

где

  • class="your-class-name" - класс, который будет использован как селектор для выбора элементов при применении плагина. Значение класса может быть любое, определяется пользователем;
  • href="https://yadi.sk/i/file-id" - публичный URL файла на Яндекс Диске. Файл должен иметь media type как  audio, video и image.

Опциональные атрибуты элемента:

  • id - указанный атрибут id на выбранном элементе(ссылке) будет перенесен в замещающий плагином элемент audio, video или img. Если для ссылки атрибут id будет отсутствовать, то у замещающего плагином элемента id будет сгенерирован по схеме: ydisk-replaced-' + new Date().getTime(). Однако, целесообразно все же задавать ссылке свой, пользовательский id для того что бы иметь возможность по этому id обратиться к вставленному плагином элементу с целью манипуляции им при помощи js.
  • data-width и data-height - через эти data- атрибуты, заданные для элемента (ссылки), можно передать новому замещающему элементу атрибуты width и height, которые будут установлены если переданы только оба параметра data-width и data-height, и оба параметра являются числовыми.

 

Вызов плагином пользовательской функции:

После успешного выполнения замены элемента, плагин попытается вызвать функцию с таким же именем как значение id у замещающего элемента, сгенерированного плагином. Если такая функцию будет присутствовать (она может быть расположена где угодно на странице, но желательно размещать ее в конце страницы с контентом), то она будет вызвана и в нее, так же, как и в случае с вызовом callback функции в параметре afterReplace, будут переданы параметры id и type, смысл которых описан был ранее. Этот подход позволит вам разместить свою функцию в любом месте страницы прямо в статье(например вместе с контентом страницы, сразу после ссылки) для запуска необходимых манипуляций над вставленным элементом при помощи js. Это удобно, так как позволяет не вписывать такие функции в отдельный подключаемый js файл и все время его править, дописывая новые варианты обработки.

пример пользовательской функции:

function the_same_name_as_id_value(id, type) {

                //в эту функцию передаются id заданное новому элементу и тип: audio,image,video
                if ( type === 'audio' || type === 'video' ) {
                    
                     //ваш код...

                     });
                }
}

 

 

Применение плагина

Допустим, вы хотите применить плагин к ссылкам вида:

минимальный вариант ссылки:

<a class="ydisk-onclick" href="https://yadi.sk/i/file-id">myVideo1 Title</a>

расширенный вариант ссылки:

<a class="ydisk-onready" href="https://yadi.sk/i/file-id" id="myVideo" data-width="300" data-height="200">myVideo1 Title</a>

 

Пример базового применение плагина к ссылкам:

В этом варианте примера плагин будет срабатывать при клике на ссылках с классом ydisk-onclick

$(document).ready(function() {
    $("a.ydisk-onclick").attr('target', '_blank').ydisk(); // с параметрами по умолчанию
});

 

Пример расширенного применения:

Выполним применение плагина к ссылке вида:

<a class="ydisk-onready" href="https://yadi.sk/i/file-id" id="myVideo" data-width="200" data-height="100">myVideo1 Title</a>

И зададим дополнительно пользовательскую функцию myVideo(), которая будет вызвана после успешного срабатывания плагина и вставки нового элемента. Расположим эту функцию на веб странице.

<script>
//пользовательская функция по имени id="myVideo"
function myVideo(id, type) {

    //здесь можно манипулировать вставленным элементом: $('.' + id)...
    //alert("It was run! id is " + id + ", type is " + type + "." );
}
</script>

В этом варианте примера плагин будет срабатывать по окончанию загрузки страницы на ссылках с классом ydisk-onready. Плагину в параметрах будут переданы пользовательские иконки хода загрузки, ошибки и пользовательская функция, которая будет вызвана после удачной замены ссылки новым элементом. Эта пользовательская функция будет делать отбор элементов страницы с классом одноименным значению id замещающего элемента и будет назначать для этих элементов обработчик события клика, который будет запускать проигрывание медиа файла, начиная со времени указанном в атрибуте data-time этих элементов. Это простой пример реализации простого, интерактивного оглавления для медиа файла. После замещения элемента плагин вызовет функцию с именем myVideo() в этом примере.

$(document).ready(function() {

    $("a.ydisk-onready")
            .attr('target', '_blank')
            .ydisk({
                onType       : 'ready', //'click' or 'ready', default is click on element
                loader       : '&nbsp;<i class="fa fa-spinner fa-spin fa-fw"></i>', //as example
                failed       : '&nbsp;<i title="Loading Error!" class="fa fa-info-circle fa-fw sm-red-font"></i>', //as example
                afterReplace : function(id, type) {

                    //в эту функцию передаются id, заданное новому элементу и контент тайп audio,image,video
                    if ( type === 'audio' || type === 'video' ) {
                        
                         $('.' + id).click(function(el) {
                            
                            el.preventDefault(); // <-- important!
                            var obj = document.getElementById(id),
                                time = parseInt($(this).data('start-time'));

                            if ( $.type( obj ) === "object" && $.isNumeric(time) ) {
                                obj.currentTime = time;
                                obj.play();
                            }

                         });
                    }
                }
            });
});

 

Пример расширенного комбинированного применения:

Выполним одновременное применение плагина к ссылкам примера указанным выше. Для ссылок с классом ydisk-onclick установим срабатывание плагина по клику на ссылке, для ссылок с классом ydisk-onready установим срабатывание для них плагина по окончанию загрузки страницы браузером. Оба варианта срабатывания будут использовать одну callback, в примере с именем ydiskPlay(), которая будет активировать интерактивное оглавление для вставленных медиа файлов.

$(document).ready(function() {

    //callback функция реализации оглавления
    var ydiskPlay = function(id, type) {
                    if ( type === 'audio' || type === 'video' ) {
                        
                         $('.' + id).click(function(el) {
                            
                            el.preventDefault(); // <-- important!
                            var obj = document.getElementById(id),
                                time = parseInt($(this).data('start-time'));

                            if ( $.type( obj ) === "object" && $.isNumeric(time) ) {
                                obj.currentTime = time;
                                obj.play();
                            }

                         });
                    }
            }
            
            //применение плагина по клику на ссылках с классом ydisk-onclick
            //с вызовом callback функции ydiskPlay()
            $("a.ydisk-onclick")
            .attr('target', '_blank')
            .ydisk({
                //onType     : 'click', //'click' or 'ready', default is click on element
                //async      : false, //bool, default is true
                //HTML code of loader and failed, wich be appendTo selector //default is false
                loader       : '&nbsp;<i class="fa fa-spinner fa-spin fa-fw"></i>', //as example
                failed       : '&nbsp;<i title="Loading Error!" class="fa fa-info-circle fa-fw sm-red-font"></i>', //as example
                afterReplace : ydiskPlay
            });
            
            //применение плагина по окончанию загрузки страницы на ссылках с классом ydisk-onready
            //с вызовом callback функции ydiskPlay()
            $("a.ydisk-onready")
            .attr('target', '_blank')
            .ydisk({
                onType       : 'ready', //'click' or 'ready', default is click on element
                //async      : false, //bool, default is true
                //HTML code of loader and failed, wich be appendTo selector //default is false
                loader       : '&nbsp;<i class="fa fa-spinner fa-spin fa-fw"></i>', //as example
                failed       : '&nbsp;<i title="Loading Error!" class="fa fa-info-circle fa-fw sm-red-font"></i>', //as example
                afterReplace : ydiskPlay
            });

});

Если вы например будете использовать постоянно тот или иной вариант применения плагина глобально на всем сайте, то этот код применения к выбранным элементам вы можете поместить внутри самого плагина. Тогда все будет храниться в файле плагина - сам код плагина и его применение. Пример смотри в исходном коде плагина - файл "jquery.ydisk-1.0.0-source.js".

 

 

Подключение плагина к веб странице

Подключать же плагин к WEB странице можно стандартным способом разместив тег script после подключения файла jQuery в теге head вашей WEB страницы или выполнить динамическое подключение/загрузку плагина только на тех страницах, для которых он нужен, например, так:

$(document).ready(function() {
    if ($("a.ydisk-onclick, a.ydisk-onready").length > 0) {

              var fTag = document.createElement('script');
              fTag.async = true;
              fTag.type = 'text/javascript';
              fTag.src = "/path to jquery.ydisk-1.0.0.js";
              var firstScriptTag = document.getElementsByTagName('script')[0];
              firstScriptTag.parentNode.insertBefore(fTag, firstScriptTag);
    }
});

Разместите указанный js код динамической загрузки плагина в конце вашей web страницы или в вашем основном файле с js скриптами, который загружается и исполняется после библиотеки jQuery и находиться внутри функции $(document).ready(function() {...});, которая вызывается библиотекой когда WEB документ полностью сформирован. И тогда, если на WEB странице будут присутствовать ссылки с указанными селекторами, то выполниться динамическая загрузка плагина. В таком варианте, код применения плагина целесообразно размешать внутри самого файла плагина, после основного кода плагина. В любом случае, обратите внимание на то, что подключение плагина (как и любого другого js, использующего jQuery) должно выполняться только после того как загружена библиотека jQuery.

 

Расширенный пример работы плагина:

Пример работы плагина по клику на ссылке https://yadi.sk/i/FM8PMtzrpgYcp с id myVideo Title

Пример интерактивного оглавления:

 

Код примера:

<a class="ydisk-onclick" data-height="240" data-width="320" href="https://yadi.sk/i/FM8PMtzrpgYcp" id="myVideo">Пример работы плагина по клику на ссылке https://yadi.sk/i/FM8PMtzrpgYcp с id myVideo Title</a>

<p>Пример интерактивного оглавления:</p>

<ul>
    <li><a class="myVideo" data-start-time="0">перейти к сюжету видео 00:00</a></li>
    <li><a class="myVideo" data-start-time="60">перейти к сюжету видео 01:00</a></li>
    <li><a class="myVideo" data-start-time="120">перейти к сюжету видео 02:00</a></li>
    <li><a class="myVideo" data-start-time="180">перейти к сюжету видео 03:00</a></li>
    <li><a class="myVideo" data-start-time="240">перейти к сюжету видео 04:00</a> </li>
</ul>
<script>
    //пользовательская функция по имени id="myVideo"
    function myVideo(id, type) {
        //здесь можно манипулировать вставленным элементом: $('.' + id)...
        alert("Замена успешна! Вызвана пользовательская функция 'myVideo()' для вставленного элемента " + type + " с id='" + id + "'.");
    };
    //применение плагина выполнено как описано в статье в подключенном js файле,
    //здесь же только пользовательская callback функция
</script>

 

В примерах применения плагина использованы jQuery селекторы вида "a.ydisk-onclick, a.ydisk-onready", а это значит, что отбираться будут только теги <a> с указанными классами. Однако, если вы не хотите ограничиваться выборкой и использованием плагина только для тегов <a>, то селекторы нужно записать как: $(".ydisk-onclick, .ydisk-onready")... т.е. без 'a',  при этом не забывайте, что элемент должен иметь href атрибут с публичной ссылкой на Яндекс Диск.

 

Андрей Болдырев