Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Стол заказов » Подгрузка видео после нажатия на картинку

Подгрузка видео после нажатия на картинку


 gresius    27.10.2014    Стол заказов    1509    8 комментариев

Сайт http://videock.ru/ DLE 10.3

Дела обстоят так: видео добавляются посредством нажатия кнопки YouTube в ВВ редакторе краткого описания (скрин), после этого ID видео вытягивается и вписывается скриптом в доп. поле, это позволяет использовать скрины видео которые делает YouTube.

ТЗ: сейчас на сайте выводятся непосредственно видео, это есть не совсем хорошо так как стоит ajax подгрузка новостей (бездонное дно) и сайт долго грузится и всё такое когда на главной странице 100 видео. Нужно сделать как к примеру сделал вконтаке, вместо видео - картинка, посередине картинки видео кнопка плей и когда ты её нажимаешь подгружается плеер с видео, когда видео ушло с экрана просмотра плеер снова становится картинкой с кнопкой плей (пример).

Скриншоты мы можем использовать так: https://i.ytimg.com/vi/IDвидеоиздоп.поля/maxresdefault.jpg нужно замаскировать стилями картинку под проигрыватель (чтобы никто и не понял что это картинка) и сделать чтобы видео подгружались когда нажимаешь на неё, а когда перемотали с просматриваемого экрана чтобы видео снова превращалось в картинку.

Кто возьмётся, как быстро сделает и за сколько денег?

8 комментариев

gresius
Юзер

gresius - 27 октября 2014 23:26 -

чуть не забыл, ещё один момент, нужно чтобы просмотры тоже считались...

vitnet
Эксперт

vitnet - 28 октября 2014 14:14 -

Хорошая идея, добавлю в закладки, если что напишу.

gresius
Юзер

gresius - 28 октября 2014 14:20 -

был бы очень благодарен, во сколько примерно оценишь данную работу если что?

lutskboy
Юзер

lutskboy - 29 октября 2014 12:21 -

Еще актуально?

FastFud
Юзер

FastFud - 29 октября 2014 13:28 -

Это можно сделать!

Sumkina
Юзер

Sumkina - 30 октября 2014 17:16 -

Тоже интересует :-)

FastFud
Юзер

FastFud - 30 октября 2014 19:41 -

shortstory.tpl
<div class="yt-video">
  <img src="https://i.ytimg.com/vi/[xfvalue_ytid]/maxresdefault.jpg" id="yt-v{news-id}" data-url="//www.youtube.com/embed/[xfvalue_ytid]">
</div>
main.tpl перед </body> поставить
<div id="yt-dialog"><iframe width="300" height="150" frameborder="0" allowfullscreen></iframe><div class="close">Закрыть</div></div>
jQuery
$(function() {
  $('.yt-video').each(function() {
   var id = $(this).find('img').attr('id');
   $('#'+id).click(function() {
     var overlay = '<div class="overlay"/>';
     var url = $(this).attr('data-url');
       $('body').append(overlay);
       $('#yt-dialog').find('iframe').attr('src', url);
       $('#yt-dialog').addClass('yt-open').fadeIn();
   });
   $('#yt-dialog').find('.close').click(function() {
       $('.overlay').remove();      
       $('#yt-dialog').removeClass('yt-open').fadeOut();
       $('#yt-dialog').find('iframe').attr('src', '');  
   });    
  });
});
Вот вам пример )

FastFud
Юзер

FastFud - 30 октября 2014 20:02 -


Чтобы комментировать - войдите или зарегистрируйтесь на сайте
наверх