Применение Yandex Disk REST API jQuery Plugin [УСТАРЕЛ]

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

 

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

 

Yandex Disk REST API jQuery плагин

Детальное описание устройства и принципа работы плагина с полным обзором его параметров и возможных вариантов подключения и использования представлено в статье Yandex Disk REST API jQuery Plugin. Здесь же содержится краткий мануал по практическому базовому применю плагина с готовыми блоками кода для вставки на сайт. Если вы не знакомы еще с плагином и технологией Yandex Disk REST API, то рекомендуется сначала ознакомиться с указанной выше статьей, что бы лучше понимать представленные в этом посте инструкции.

 

 

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

Подключение Yandex Disk REST API jQuery Plugin выполняется стандартно для всех jQuery плагинов.

Для подключения плагина к web странице разместите, указанный ниже тег script, в теге head или перед закрывающим тегом </body> web страницы или выполнить динамическое подключение/загрузку плагина только на тех страницах, для которых он нужен (смотри примеры ).

    <!-- Yandex Disk REST API jQuery Plugin -->
    <script type="text/javascript" src="js/jquery.ydisk.js"></script>

Библиотека jQuery должна быть подключена на web странице перед плагином.

 

 

Базовое применение плагина

Применение плагина с параметрами по умолчанию является самым простым вариантом его использования с минимум js кода.

Шаг 1 ссылка на файл с Яндекс Диска

Разместите на вашей web странице публичную ссылку(и) в теге <a> на файла с Яндекс Диска и добавьте к этой ссылке атрибут class со значением селектора, по которому вы будет применять плагин к этой ссылке.

Пример кода ссылки:

<a class="ydisk-example-1" href="https://yadi.sk/i/FM8PMtzrpgYcp" target="_blank">Публичная ссылка на файла с Яндекс Диска</a>

Пример кода ссылки с размерами:

<a class="ydisk-example-1" href="https://yadi.sk/i/FM8PMtzrpgYcp" target="_blank" data-width="100" data-height="100">Публичная ссылка на файла с Яндекс Диска</a>

Если вам необходимо явно задать размер контейнера для вставленного плагином аудио, видео или img объекта, то укажите эти размеры в атрибутах data-width и data-height. Если эти атрибут не указаны, то размер контейнера будет равен размерам фото или разрешению видео файла.

 

Шаг 2 применение плагина к ссылке

Разместите нижеследующий js код в вашем кастомном js файле (или в конце страницы перед </body>), который подключается к web странице после Yandex Disk REST API jQuery Plugin.

$(document).ready(function() {
    $("a.ydisk-example-1").ydisk(); // Применение плагина к ссылке с классом ydisk-example-1
});

При таком применении плагина ваша ссылка (или несколько ссылок), при клике по ней, будет заменена файлом с Яндекс Диска. Если такого файла нет на Яндекс Диске, то при клике по ссылке откроется страница Яндекс Диска с сообщением об ошибке.

 

Demo пример базового применение плагина

Для демонстрации примера кликните по приведенной ниже ссылке:

Публичная ссылка1 на файла с Яндекс Диска

Публичная ссылка2 на файла с Яндекс Диска

Все ссылки с указанным при применении плагина селектором будут обработаны.

 

 

Download ссылка

Плагин предоставляет возможность из публичной ссылки на файл с Яндекс Диска сформировать и вставить на web страницу прямую download ссылку на загрузку файла с Яндекс Диска в браузере. При клике по такой download ссылке начнется скачивание файла с Яндекс Диска через стандартный диалог загрузки браузера.

Для файлов, не являющихся audio, image и video файлами, плагин самостоятельно и автоматически вставляет download ссылку на скачивание этих файлов.

Если вам нужно, что бы плагин формировал download ссылку на скачивание и для файлов audio, image и video, то добавьте в исходную публичную ссылку на файл с Яндекс Диска атрибут download="download". Примечание: атрибут должен иметь строго такой вид как представлено здесь.

Для всех ссылок с этим атрибутом download="download" плагин будет выполнять замену исходной ссылки на download ссылку для скачивания, вне зависимости от типа файла. Что бы начать скачивание файла необходимо кликнуть по такой ссылке, т.к. загрузка не начинается самостоятельно.

 

Пример кода ссылки с атрибутом download="download":

<a download="download" class="ydisk-onclick" href="https://yadi.sk/i/FM8PMtzrpgYcp" target="_blank">Публичная ссылка на файла с Яндекс Диска</a>

 

Demo download

Для демонстрации download примера кликните по приведенной ниже ссылке:

Публичная ссылка1 на файла с Яндекс Диска

Публичная ссылка2 на файла с Яндекс Диска

 

 

Расширенное применение плагина

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

 

On ready применение

Применение плагина по окончании загрузки страницы на ссылках с классом ydisk-onready-example

Код ссылки на файл:

<a class="ydisk-onready-example" href="https://yadi.sk/i/FM8PMtzrpgYcp" target="_blank">Публичная ссылка на файла с Яндекс Диска</a>

Js код применения плагина по загрузке страницы:

Разместите данный js код в вашем кастомном js файле или в конце страницы

$(document).ready(function() {
    // Применение плагина к ссылке с классом ydisk-onready-example
    $("a.ydisk-onready-example")
    .ydisk({
        onType:'ready', //default is click on element
    });
});

On ready Demo

Публичная ссылка1 на файла с Яндекс Диска

Данный файл вставлен плагином с Яндекс Диска автоматически по окончании загрузки страницы.

 

 

Максимальное использование плагина

Ниже продемонстрировано использование всех возможностей плагина при расширенном комбинированном его применении.

Данный пример демонстрирует:

• передачу плагину кастомных параметров;
• передачу плагину в параметре afterReplace пользовательской callback функции, которая будет устанавливать обработчик click для интерактивного содержания видео;
• вызов плагином дополнительной пользовательской функции с именем id ссылки.

Подробное описание всех возможностей плагина смотри на странице Yandex Disk REST API jQuery Plugin

 

Шаг 1 ссылка на файл с Яндекс Диска

Разместите на вашей web странице публичную ссылку(и) в теге <a> на файла с Яндекс Диска и добавьте к этой ссылке атрибут class со значением селектора, по которому вы будет применять плагин к этой ссылке. Добавьте к ссылке атрибут id. Плагин будет вызвать js функцию с тем же именем, что и значение атрибута id ссылки.

Пример кода ссылки:

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

 

Шаг 2 оглавление видео

Добавьте под ссылкой HTML код для организации интерактивного оглавления видео. Оглавление видео будет обрабатываться пользовательской callback функцией, которая будет передана плагину в параметре afterReplace.

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

<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>

 

Шаг 3 callback функция по значению id ссылки

Если вы указали для ссылки атрибут id и хотите, что бы плагин вызвал одноименную значению id публичную js функцию, то задайте js код этой функции. Разместите код этой функции на web странице в теге script или в подключаемом js файле так, что бы он находился в браузере перед загрузкой или применением плагина к ссылке и был доступен в js страницы глобально.

Пример callback функции по значению id ссылки:

<script>
    //пользовательская функция по имени id="myVideo"
    function myVideo(id, type) {
        //здесь можно манипулировать вставленным элементом: $('.' + id)...
        alert("Замена успешна! Вызвана пользовательская функция 'myVideo()' для вставленного элемента " + type + " с id='" + id + "'.");
    };
</script>

 

Шаг 4 callback функция обработки оглавления

Задайте пользовательскую callback функцию для передачи ее плагину в параметре afterReplace. Эта функция будет вызвана после успешной вставки плагином медиа объекта вместо ссылки на файл с Яндекс Диска. Для данного примера будет использована пользовательская функция с именем ydiskPlay, которая будет при вызове получать в качестве аргументов строковые значения:

• 1) значение id вставленного медиа элемента;
• 2) тип медиа элемента.

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

Код функции ydiskPlay представлен ниже вместе с кодом применения плагина. Размешать данную функцию целесообразно в кастомном js файле.

 

Шаг 5 применение плагина к ссылкам

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

Разместите код применения плагина в вашем пользовательском js файле, подключенном к странице после плагина.

$(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-source.js".

 

 

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