Видео-подсказки или Всплывающий плеер Youtube


Ещё одна необычная задача для qTip - встроенный плеер youtube (со всеми причиндалами проигрывателя), который появляется при наведении мыши (или нажатии) на ссылку видеоролика.
Когда это можно использовать?
Если вы часто постите видео руководства, то для крутизны можете прокачать все ссылки предпросмотрами на qTip.

Демо (навести мышь):
RuThau-Luna


Реализация:
В готовом виде видеоподсказки (помимо библиотеки jQuery) представляют собой два скрипта, положенные на хостинг (внешний хостинг, если вы используете Blogger):
swfobject.js
qtip-video.js
+ скрипт ядро: jquery.qtip-1.0.0-rc3.min.js
Все скрипты достаточно скопировать в шаблон перед тегом /head, чтобы все ссылки на ютуб обрабатывались автоматически. Имейте ввиду, что ссылки скриптов на всякий случай лучше помещать под ссылкой jQuery.
В "готовом" виде, включая jQuery, это будет выглядеть вот так:

<script src='http://ваш-хостинг-трололо/jquery.qtip-1.0.0-rc3.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<script type="text/javascript" src="http://ваш-хостинг-трололо/qtip-video.js"></script>

Тонкости.
qtip-video.js - это скрипт настроек видеоподсказки, в котором настраивается её отображение.
Условно разделим на несколько секторов (согласно документации):
         show: {
            when: 'mouseover', // Show it on mouseover...
            solo: true // ...and hide all others when its shown
         },
         hide: 'unfocus', // Hide it when inactive...
         style: {
            width: 432,
            height: 264,
            padding: 0,
            tip: true,
            name: 'dark'
         },
-- show - отвечает за появление подсказки (плеера) над ссылкой, параметр mouseover означает, что подсказка появится при касании ссылки стрелкой курсора (если нужно, чтобы плеер появлялся при нажатии кнопки мыши, поставьте click); solo означает, что только одна подсказка может быть активна.
-- unfocus прячет подсказку, если счёлкнуть мышью в любом месте, кроме неё
-- style отвечает за размеры подсказки и стиль (используется прессет dark)



А что ещё интересного?

На тему qTip:
qTip. Предпросмотр для ссылок в виде авто-скриншотов

На тему видеоплеера:

Как проигрывать видеоролики в блоге или Альтернативный плеер для Youtube

13 комментариев:

  1. Добрый день! Пробовал я вчера эту тему с всплывающим плеером youtube у себя на временном blogger, но на этот момент не дало никаких результатов. Залил я эти скрипты ко мне на гугл сайт (https google site) давал ссылку с них с менял на "трололо" в вашем тексте, не получилось даже указать ссылку на хостинг с вашего сайта. При наведении курсора также указывает на прямую ссылку ва видеосервис Ютубе, а надо чтобы была уже трансформирована. Надеюсь на вашу помощь. Спасибо.

    ОтветитьУдалить
  2. А вы как ссылку указывали?
    У меня в статье, в демо, ссылка на ролик указана так:
    <a href="http://www.youtube.com/watch?v=HR6cGRGRUYg" alt="">RuThau-Luna</a>

    ОтветитьУдалить
  3. Было без этого " alt=" сейчас попробовал, и уже пробел убирал, не идет. Да, кстати когда перед head ставлю эти пять строчек с скриптами, четвертую строчку закрывающий отдельно стоящий тэг, шаблон почему то "съедает", попробовал поставить его опять, но уже выдает ошибку Xml, убираю обратно, все пропускает, но ссылка также не работает, плеер не всплывает.

    ОтветитьУдалить
  4. Попробуйте на "чистом" лёгком блоге. В этом уже довольно много всяких скриптов (может возникнуть конфликт), поэтому чтобы не гадать, что мешает, лучше гадать почему не работает :).

    ОтветитьУдалить
  5. Попробовал на другом блоге, не идет тоже, я наверно в последовательности что то не так сделал.
    ВЫ не могли бы дать полностью ваш код
    скрипта, для проверки, или у вас хостинг...

    ОтветитьУдалить
  6. Нет проблем.
    Для наглядности я создал демонстрационный блог qTip.
    В тело статьи прописал все ссылки, которые должны находиться в области head.
    Лучше, что бы первой стояла ссылка на библиотеку jQuery. В общем, там это видно в тексте.

    ОтветитьУдалить
  7. Забыл как называется когда наводишь курсор на мышку внизу браузера показывает ссылку когда подержишь курсор на месте, так вот у меня там даже ссылка не трансформированая, а у вас в примере сразу трансформированая идет.
    Я уже даже расширения повыключал которые могли бы давать ошибку.

    ОтветитьУдалить
  8. В тестовом блоге я запостил ссылки.
    Заведите чистый блог и вставьте их прямо в статью. После этого можете заняться конкретной настройкой на другом блоге.

    ОтветитьУдалить
  9. Попробовал в абсолютно новом блоге, ничего не вышло.
    Первое. Открыл HTML шаблон перед закрывающим тэгом head поставил
    --- четыре первые строчки со скриптами с вашего дем. блога ---
    Сохранил шаблон
    Второе. Создал новое сообщение, в режиме html вставил эту ссылку с тэгом a href="http://www.youtube.com/watch?v=HR6cGRGRUYg" alt="">RuThau-Luna</a - ничего
    Третье - Попробовал скопировть с вашего демонстративного блога кусочек html текста - ничего не дало.
    Четвертое попробовал скопировать все пять строк с вашего демонстративного блога в тело сообщения - трансформации ссылки так и не произошло.

    ОтветитьУдалить
  10. Только что сам скопировал ещё на один блог внутрь поста - удачно, работает.

    Дайте ссылку на ваш демо-блог.

    ОтветитьУдалить
  11. @aldousПоставил новую винду, надо будет попробовать по новой.
    Да и по поводу корейского меню, когда поставил туда мой текст и мои ссылки, они вместо столбика расползлись в строку, видимо какой то перенос на новую строку нарушен.
    Спасибо за вашу помощь

    ОтветитьУдалить
  12. Приветствую!
    Все сделал, все получилось, единственная проблема, при нажатии на ссылку плеер появляется над ссылкой как надо, но при этом страницу перекидывает в начало, на верх, что не желательно, плеер остается в низу страницы, как бы исправить, чтоб страница на месте оставалась.
    заранее благодарю.

    ОтветитьУдалить
    Ответы
    1. У меня та же история, не знаю как исправить. При нажатии на ссылку к адресу страницы добавляется /# и перекидывает в начало. Если кто знает, как исправить, буду премного благодарен

      Удалить