Синхронизация канала Youtube с сайтом ( AJAX ). Как?

#1 20 июля 2014 в 02:06
Собственно есть канал на ютуб, который постоянно обновляется. Возможно ли интегрировать какой то код в модуль, чтобы он автоматом подгружал последние 3-4 видео с канала на сайт?
#2 21 июля 2014 в 13:04
Вот вариант простой, мне кажется что простой)))
Во вложении файлик, запустите на компе и все увидите.
В скрипте подключаете свой канал, количество выводимых роликов. Собственно все настраивается очень легко и понятно.
Новый ролик при выборе, без перезагрузки страницы, как и подгрузка превью роликов по ссылке еще видео.

Управление:

  1. var user ='pelmeniTV'; - название канала
  2. var lenPage=16; - сколько превью выводить
  3. var startOn=false; - старт
  4. var playerWidth="480";
  5. var playerHeight1="360";
  6. var playerHeight2="270";
  7. var startOn=false;
Сейчас нет в "руках" тестового instant, но не суть, будет то же самое. По этому демка тут:
Демка просмотра канала
Прикрепленный файл
Youtub_kc5ls.rar 3 Кб
#3 21 июля 2014 в 13:40
Полезная штучка может быть. Спасибо))
#4 21 июля 2014 в 15:11
не подскажите что нужно переименовать что бы нормально использовать код на одной странице два раза? (вывод из двух каналов)
#5 21 июля 2014 в 15:21
Посмотрите по коду player1, но я не как специалист говорю, возможно добавить то же самое, но для player2.
Наверно подскажут более квалифицировано…
#6 21 июля 2014 в 18:17
C выводом второго канала просто, присвоил другое имя диву отвечающему за вывод списка роликов
  1. <div id="listVideo2">
и убрал дублирование вывода плеера. оба канала показываются в первом плеере.
Может быть кто нибудь подскажет еще что сделать что при открытии страницы автовоспроизведение ролика не срабатывало а при клике на постер ролика из списка — да. При перезагрузки страницы каждый раз слушать одно и тоже надоедает, но если убрать в параметрах плеера автопуск то и при клике на постер из списка его потом нет это уже плохо.
#7 21 июля 2014 в 20:04

Может быть кто нибудь подскажет еще что сделать что при открытии страницы автовоспроизведение ролика не срабатывало а при клике на постер ролика из списка — да

Нил
Это сделал. При первой загрузке страницы видеоплеер вообще не показывается при клике на превью ролика открывается плеер и начинается автовоспроизведение. при клике на следующий ролик тоже воспроизводится. Пойдёт.
Кому надо вывод нескольких каналов на одной странице. Код как есть у меня.


  1. <table width="550" border="0" align="center">
  2. <tbody>
  3. <tr>
  4. <td width="536" height="52" align="left" valign="top">
  5. <table width="550" border="0">
  6. <tbody>
  7. <tr>
  8. <td valign="top">&nbsp;</td>
  9. </tr>
  10. <tr>
  11. <td valign="top">
  12. <p><style type="text/css">
  13. .oneV { float:left; margin:0 15px 15px 0; font-size:11px; width:120px; height:140px; border-radius:5px;}
  14. .oneV a:hover {color:#000}
  15.  
  16. .oneV img {border-radius:5px;}
  17.  
  18. .oneV p { margin:0; font-size:10px; line-height:120%;}
  19.  
  20. #listVideo { float: left}
  21.  
  22. #nextVideo {margin-top: 10px; width:80%; float:left;}
  23. #prevVideo {margin-bottom:20px; width:80%; float:left}
  24.  
  25. #nextVideo a, #prevVideo a {display:block; background:#fbffe8;border-radius:10px; border:1px solid #4ca517; padding:10px; margin:0; font-size:15px;text-align:center; color:#000; text-decoration:none;}
  26.  
  27. #nextVideo a:hover, #prevVideo a:hover {background:#dbe5ee}
  28.  
  29.  
  30. </style></p>
  31. <div>
  32. <div style="width:550px; float:left;">
  33.  
  34. <div id="player1" name="player1">&nbsp;</div>
  35. <div id="vdescr" style="overflow:hidden;">&nbsp;</div>
  36. </div>
  37. <div>
  38. <h3><a href="http://ru.euronews.com/" target="_blank">Euronews</a></h3>
  39. <div id="listVideo">&nbsp;</div>
  40. </div>
  41. <br clear="all" />
  42. <div id="error" style="border:1px #сccc solid; color:#f00">&nbsp;</div>
  43. </div>
  44. <script type="text/javascript">
  45.  
  46. $(document).ready ( function (){ //
  47. var user ='euronewsru';
  48. var lenPage=12;
  49. var startOn=false;
  50. var playerWidth="530";
  51. var playerHeight1="360";
  52. var playerHeight2="270";
  53. var startOn=true;
  54.  
  55. function animeDX(id, data, direct){
  56. $(id).hide();
  57. $(id).html( data);
  58. $(id).animate( {'opacity':'toggle'},500);
  59. loadL();
  60. if (!startOn) {
  61. $('#ytvN0').trigger('click');
  62. startOn=true;
  63. }
  64. return;
  65.  
  66. var w = $(id).width()+0;
  67. var h = $(id).height()+0;
  68. var top=0;
  69. var left=-w;
  70. if ( direct =="top"){ left=0; top=-h; }
  71. if ( direct =="bottom"){ left=0; top=h; }
  72. if ( direct =="left"){ left=w; top=0; }
  73. if ( direct == "right"){ left=-w; top=0; }
  74. var s='<div id="tmp5421" style="position:relative; top:'+ top +'px; left:'+ left +'px;">' + data + '</div>';
  75. $(id).html(s);
  76. $('#tmp5421').animate(
  77. {left:0,top:0},400,'swing',
  78. function(){
  79. $(id).html(data);
  80. loadL();
  81. if (!startOn) {
  82. $('#ytvN0').trigger('click');
  83. startOn=true;
  84. }
  85. });
  86. }
  87.  
  88.  
  89. function loadL(){
  90. $('.oneVideo').click (
  91. function (){
  92. var aspectRatio = $(this).data("ws");
  93. var width = playerHeight1;
  94. if (aspectRatio == "widescreen"){width = playerHeight2;}
  95.  
  96. var s= '<iframe width="'+playerWidth+'" height="'+ width +'"'+
  97. 'src="http://www.youtube.com/embed/'+
  98. $(this).data("href") +
  99. '?html5=1&theme=light&autoplay=1&wmode=transparent&rel=0&color=red&modestbranding=1&autohide=1"'+
  100. ' frameborder="0" allowfullscreen=""></iframe>';
  101. $('#player1').html(s);
  102. $('#vdescr').html('<h3>'+decodeURIComponent( $(this).data("title") )+ /*' ('+$(this).data("count")+*/'</h3><p>'+decodeURIComponent( $(this).data("description") )+'</p>');
  103. return (false);
  104. })
  105. }
  106.  
  107. function clickPage(){
  108. $('.clickPage').click (
  109. function (){
  110. readList($(this).data("page")+0, $(this).data("direct"));
  111. })
  112. }
  113.  
  114. function loadPages(page){
  115. var i = 0;
  116. var html=[];
  117. if (page > 1) {
  118. i=page-1;
  119. html.push('<a href="#" data-page="' + i + '" class="clickPage" + data-direct="bottom">');
  120. html.push('предыдущие</a>');
  121. }
  122. $('#prevVideo').html(html.join(''));
  123. html=[];
  124.  
  125. i = page + 1;
  126. var serach= 'http://gdata.youtube.com/feeds/api/users/'+user+'/uploads?time=today&max-results='+lenPage+'&v=2&alt=jsonc&orderby=published&start-index='+(1+ (i-1)*lenPage)+'&callback=?';
  127. $.ajax({
  128. url: serach,
  129. dataType:'json',
  130. cache: false,
  131. async: true,
  132. type: "get",
  133. success: function(content){
  134. var entries = content.data.items || [];
  135. if (entries.length > 0) {
  136. html.push('<a href="#" data-page="' + i + '" class="clickPage" + data-direct="top">');
  137. html.push('еще видео</a>');
  138. }
  139. $('#nextVideo').html(html.join(''));
  140. html=[];
  141. clickPage();
  142. },
  143. error: function (xhr, ajaxOptions, thrownError) {
  144. $('#error').html(xhr.status+ ' - '+ thrownError);
  145. }
  146. });
  147. }
  148.  
  149.  
  150.  
  151. function readList (page,direct) {
  152. var entries= [];
  153. var html=[];
  154. var serach= 'http://gdata.youtube.com/feeds/api/users/'+user+'/uploads?time=today&max-results='+lenPage+'&v=2&alt=jsonc&orderby=published&start-index='+(1+ (page-1)*lenPage)+'&callback=?';
  155. $.ajax({
  156. url: serach,
  157. dataType:'json',
  158. cache: false,
  159. async: true,
  160. type: "get",
#8 21 июля 2014 в 22:00

Не могу решить вопрос с тем что бы при клике на превью внизу страницы происходила перемотка страницы вверх на уровень плеера. Пробовал якоря по разному — поднимается но ниже чем нужно. Может кто поправит код....

Нил
может добавить
$('html, body').animate({scrollTop:0}, 'slow');
в
function loadL(){
$('.oneVideo').click (
function (){

?)

Полностью должно получиться так:

  1.  
  2. function loadL(){
  3. $('.oneVideo').click (
  4. function (){
  5. var aspectRatio = $(this).data("ws");
  6. var width = playerHeight1;
  7. if (aspectRatio == "widescreen"){width = playerHeight2;}
  8.  
  9. var s= '<iframe width="'+playerWidth+'" height="'+ width +'"'+
  10. 'src="http://www.youtube.com/embed/'+
  11. $(this).data("href") +
  12. '?html5=1&theme=light&autoplay=1&wmode=transparent&rel=0&color=red&modestbranding=1&autohide=1"'+
  13. ' frameborder="0" allowfullscreen=""></iframe>';
  14. $('#player1').html(s);
  15. $('#vdescr').html('<h3>'+decodeURIComponent( $(this).data("title") )+ /*' ('+$(this).data("count")+*/'</h3><p>'+decodeURIComponent( $(this).data("description") )+'</p>');
  16. $('html, body').animate({scrollTop:0}, 'slow');
  17. return (false);
  18. })
  19. }
  20.  
#9 21 июля 2014 в 22:11
reload,
спасибо, так прокручивает наверх, но немного криво работает, после скачка на самый верху несколько попыток прокрутить страницу что бы выставить плеер на удобный уровень не срабатывают, страница мигает, третье или четвертое вращение колесом дает результат страница прокручивается.
#10 21 июля 2014 в 22:15
а понял, заменил top:0 на top:200 сразу встает на уровень плеера в принципе в таком случае нет нужды вращать колесиком сразу и эффект мерцания страницы при прокрутке поэтому будет не замечен. а через несколько секунд его уже нет так что пойдет) спасибо
#11 21 июля 2014 в 22:41
Нил, можно еще к нужному элементу прокручивать

$('html, body').animate({scrollTop: $(".oneVideo").offset().top — 100}, 'slow');

100 — это тоже позиционирование! к top можно прибавить любое кол-во пикселей или отнять, в примере отняли 100, если нужно будет прибавить то
.....offset().top + 57 (для примера)

ps: это если плеер НЕ всегда находится на одинаковом расстоянии от верха) В зависимости от контента может быть либо выше, либо ниже… ТОгда лучше к элементу поднимать.
#12 21 июля 2014 в 22:53
reload, не совсем понятно если привязали к элементу $(".oneVideo")зачем еще прописывать отношение к top?
У меня нормально работает просто не понял смысла.
#13 21 июля 2014 в 23:08
Нил, наверное здесь top подразумевается как верх элемента .oneVideo)
Возможно есть и другие варианты, я указал один из примеров...

Проверьте и поймете разницу в работе)

У меня нормально работает просто не понял смысла.

Нил
последний пример нужен только в том случае, если мы не знаем заранее расположение плеера от верха страницы!
#14 22 июля 2014 в 20:06
Не плохая штука для подгрузки каналов, применение найдет.
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.