Во вложении файлик, запустите на компе и все увидите.
В скрипте подключаете свой канал, количество выводимых роликов. Собственно все настраивается очень легко и понятно.
Новый ролик при выборе, без перезагрузки страницы, как и подгрузка превью роликов по ссылке еще видео.
Управление:
var user ='pelmeniTV'; - название канала var lenPage=16; - сколько превью выводить var startOn=false; - старт var playerWidth="480"; var playerHeight1="360"; var playerHeight2="270"; var startOn=false;
Демка просмотра канала
Наверно подскажут более квалифицировано…
<div id="listVideo2">
Может быть кто нибудь подскажет еще что сделать что при открытии страницы автовоспроизведение ролика не срабатывало а при клике на постер ролика из списка — да. При перезагрузки страницы каждый раз слушать одно и тоже надоедает, но если убрать в параметрах плеера автопуск то и при клике на постер из списка его потом нет это уже плохо.
Это сделал. При первой загрузке страницы видеоплеер вообще не показывается при клике на превью ролика открывается плеер и начинается автовоспроизведение. при клике на следующий ролик тоже воспроизводится. Пойдёт.Может быть кто нибудь подскажет еще что сделать что при открытии страницы автовоспроизведение ролика не срабатывало а при клике на постер ролика из списка — да
Кому надо вывод нескольких каналов на одной странице. Код как есть у меня.
<table width="550" border="0" align="center"> <tbody> <tr> <td width="536" height="52" align="left" valign="top"> <table width="550" border="0"> <tbody> <tr> <td valign="top"> </td> </tr> <tr> <td valign="top"> <p><style type="text/css"> .oneV { float:left; margin:0 15px 15px 0; font-size:11px; width:120px; height:140px; border-radius:5px;} .oneV a:hover {color:#000} .oneV img {border-radius:5px;} .oneV p { margin:0; font-size:10px; line-height:120%;} #listVideo { float: left} #nextVideo {margin-top: 10px; width:80%; float:left;} #prevVideo {margin-bottom:20px; width:80%; float:left} #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;} #nextVideo a:hover, #prevVideo a:hover {background:#dbe5ee} </style></p> <div> <div style="width:550px; float:left;"> <div id="player1" name="player1"> </div> <div id="vdescr" style="overflow:hidden;"> </div> </div> <div> <h3><a href="http://ru.euronews.com/" target="_blank">Euronews</a></h3> <div id="listVideo"> </div> </div> <br clear="all" /> <div id="error" style="border:1px #сccc solid; color:#f00"> </div> </div> <script type="text/javascript"> $(document).ready ( function (){ // var user ='euronewsru'; var lenPage=12; var startOn=false; var playerWidth="530"; var playerHeight1="360"; var playerHeight2="270"; var startOn=true; function animeDX(id, data, direct){ $(id).hide(); $(id).html( data); $(id).animate( {'opacity':'toggle'},500); loadL(); if (!startOn) { $('#ytvN0').trigger('click'); startOn=true; } return; var w = $(id).width()+0; var h = $(id).height()+0; var top=0; var left=-w; if ( direct =="top"){ left=0; top=-h; } if ( direct =="bottom"){ left=0; top=h; } if ( direct =="left"){ left=w; top=0; } if ( direct == "right"){ left=-w; top=0; } var s='<div id="tmp5421" style="position:relative; top:'+ top +'px; left:'+ left +'px;">' + data + '</div>'; $(id).html(s); $('#tmp5421').animate( {left:0,top:0},400,'swing', function(){ $(id).html(data); loadL(); if (!startOn) { $('#ytvN0').trigger('click'); startOn=true; } }); } function loadL(){ $('.oneVideo').click ( function (){ var aspectRatio = $(this).data("ws"); var width = playerHeight1; if (aspectRatio == "widescreen"){width = playerHeight2;} var s= '<iframe width="'+playerWidth+'" height="'+ width +'"'+ 'src="http://www.youtube.com/embed/'+ $(this).data("href") + '?html5=1&theme=light&autoplay=1&wmode=transparent&rel=0&color=red&modestbranding=1&autohide=1"'+ ' frameborder="0" allowfullscreen=""></iframe>'; $('#player1').html(s); $('#vdescr').html('<h3>'+decodeURIComponent( $(this).data("title") )+ /*' ('+$(this).data("count")+*/'</h3><p>'+decodeURIComponent( $(this).data("description") )+'</p>'); return (false); }) } function clickPage(){ $('.clickPage').click ( function (){ readList($(this).data("page")+0, $(this).data("direct")); }) } function loadPages(page){ var i = 0; var html=[]; if (page > 1) { i=page-1; html.push('<a href="#" data-page="' + i + '" class="clickPage" + data-direct="bottom">'); html.push('предыдущие</a>'); } html=[]; i = page + 1; 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=?'; $.ajax({ url: serach, dataType:'json', cache: false, async: true, type: "get", success: function(content){ var entries = content.data.items || []; if (entries.length > 0) { html.push('<a href="#" data-page="' + i + '" class="clickPage" + data-direct="top">'); html.push('еще видео</a>'); } html=[]; clickPage(); }, error: function (xhr, ajaxOptions, thrownError) { $('#error').html(xhr.status+ ' - '+ thrownError); } }); } function readList (page,direct) { var entries= []; var html=[]; 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=?'; $.ajax({ url: serach, dataType:'json', cache: false, async: true, type: "get",
может добавитьНе могу решить вопрос с тем что бы при клике на превью внизу страницы происходила перемотка страницы вверх на уровень плеера. Пробовал якоря по разному — поднимается но ниже чем нужно. Может кто поправит код....
$('html, body').animate({scrollTop:0}, 'slow');
в
function loadL(){
$('.oneVideo').click (
function (){
?)
Полностью должно получиться так:
function loadL(){ $('.oneVideo').click ( function (){ var aspectRatio = $(this).data("ws"); var width = playerHeight1; if (aspectRatio == "widescreen"){width = playerHeight2;} var s= '<iframe width="'+playerWidth+'" height="'+ width +'"'+ 'src="http://www.youtube.com/embed/'+ $(this).data("href") + '?html5=1&theme=light&autoplay=1&wmode=transparent&rel=0&color=red&modestbranding=1&autohide=1"'+ ' frameborder="0" allowfullscreen=""></iframe>'; $('#player1').html(s); $('#vdescr').html('<h3>'+decodeURIComponent( $(this).data("title") )+ /*' ('+$(this).data("count")+*/'</h3><p>'+decodeURIComponent( $(this).data("description") )+'</p>'); $('html, body').animate({scrollTop:0}, 'slow'); return (false); }) }
спасибо, так прокручивает наверх, но немного криво работает, после скачка на самый верху несколько попыток прокрутить страницу что бы выставить плеер на удобный уровень не срабатывают, страница мигает, третье или четвертое вращение колесом дает результат страница прокручивается.
$('html, body').animate({scrollTop: $(".oneVideo").offset().top — 100}, 'slow');
100 — это тоже позиционирование! к top можно прибавить любое кол-во пикселей или отнять, в примере отняли 100, если нужно будет прибавить то
.....offset().top + 57 (для примера)
ps: это если плеер НЕ всегда находится на одинаковом расстоянии от верха) В зависимости от контента может быть либо выше, либо ниже… ТОгда лучше к элементу поднимать.
У меня нормально работает просто не понял смысла.
Возможно есть и другие варианты, я указал один из примеров...
Проверьте и поймете разницу в работе)
последний пример нужен только в том случае, если мы не знаем заранее расположение плеера от верха страницы!У меня нормально работает просто не понял смысла.