Thumbnail или автоскриншот для Youtube


Это старая тема. Что-то похожее используется в шаблонах Blogger, предназначенных для создания видеоблога.
Скрипт js называется jYoutube. Его задача - идти по ссылке пользователя на всем известный видеосервер и "забирать" снимок начального кадра указанного пользователем.
Кстати, таким же образом на самом сервисе организованы картинки роликов↓


Попробуйте в качестве демонстрации возможности плагина ввести ютубовскую ссылку. Обязательное условие - ссылка должна содержать id видеролика.


Вставить ссылку Youtube




Автоскриншоты:


Автоскриншоты будут располагаться последовательно сверху вниз, пока вы не перезагрузите страницу.
С помощью этого замечательного плагина можно организовать в блоге ссылки наподобие ютубовским.

Установка.
В блоге должна быть записана библиотека jQuery (см. поиск по моему сайту).
Сам скрипт доступен для загрузки отсюда.
Просто пропишите его ссылку (скрипт должен быть на хостинге - актуально для Blogger) на странице (вида <script src="хостинг-трррололо/jyoutube.js"></script>), где должна располагаться сама форма:
</script>
<div class="left">
<h1>Вставить ссылку Youtube</h1>
<form>
  <input type="text" name="url" id="url"/>
  <input type='button' value="Получить снимок ролика" id="submit"/>
</form>

<p>Автоскриншоты:</p>
<div id="thumbs"> </div></div>
Ну и куда же без инициализируещего скрипта:
<script type="text/javascript">
$(document).ready(function(){
    // Get youtube video thumbnail on user click
    var url = '';
    $('#submit').click(function(){
        // Check for empty input field
        if($('#url').val() != ''){
            // Get youtube video's thumbnail url
            // using jYoutube jQuery plugin
            url = $.jYoutube($('#url').val());
            
            // Now append this image to <div id="thumbs">
            $('#thumbs').append($('<img src="'+url+'" />'));
        }
    });
});
</script>

Источник.

Что почитать?
Как отобразить надпись только на главной странице в Blogger.

Комментариев нет:

Отправить комментарий