Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > jQuery табы и видео с youtube


Автор: Cheizer 29.10.2014, 13:18
Дорогие друзья, нужна очень ваша помощь, ума не приложу как реализовать следующую задачу, есть JQUERY табы, список переключает табы, в которых видео с youtube, вставлено как iframe.

Если в одном табе запустить видео, и не останавливая его переключить на другой таб, то оно продолжает играть в закрытом табе, и это треш smile, как сделать так, что бы при переключении табов, все остальные видео ролики прекращали играть, кроме того, на таб которого переключились??? Всю голову изломал, в jquery только разбираюсь. Подскажите пожалуйста!!!! 



Код

<div id="tabs">
<ul>    
<li><a href="#tabs-1" class="haract_line">1 видео</a></li>    
<li><a href="#tabs-2" class="haract_line">2 видео</a></li>
<li><a href="#tabs-3" class="haract_line">3 видео</a></li>
</ul>

        <div id="tabs-1" class="animated fadeInRight">
    <iframe width="570" height="351" src="//www.youtube.com/embed/Lkb1kGCsIJ0" frameborder="0" allowfullscreen></iframe>
    </div>
    
    <div id="tabs-2" class="animated fadeInRight video1">
    <iframe width="570" height="351" src="//www.youtube.com/embed/Lkb1kGCsIJ0" frameborder="0" allowfullscreen></iframe>
    </div>
    
    <div id="tabs-3" class="animated fadeInRight video1">
    <iframe width="570" height="351" src="//www.youtube.com/embed/Lkb1kGCsIJ0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

Автор: sQu1rr 29.10.2014, 13:28
На stackoverflow всегда есть ответ
http://stackoverflow.com/questions/8667882/how-to-pause-a-youtube-player-when-hiding-the-iframe
Код

<script>
function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementById("popupVid");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}
</script>

<p><a href="javascript:;" onClick="toggleVideo();">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">
   <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
   <br /><br />
   <a href="javascript:;" onClick="toggleVideo('hide');">close</a>

Автор: Aliance 29.10.2014, 13:29
Если лень лезть в Youtube API, то неужели было лень залезть в Гугл? http://lmgtfy.com/?q=stop+youtube+video+iframe+jquery на ваш вопрос.

Автор: sQu1rr 29.10.2014, 13:30
Ну разумеется это только пример, селектить правильные айфремы и биндить ивенты к табам придется самому. если что не получится - рад помочь smile

Автор: Cheizer 29.10.2014, 14:28
Спасибо, но JS вообще сложно, я на JQUERY хочу сделать, да видел я много чего, но там не понятно для меня, и большинство решений на JS чистом, а это треш для меня,
Пытаюсь сделать как то так, хочу логику: по клику на табе, получаю id таба из атрибута href, так как этот же id и у div с iframe с видео, далее, 
очищаю все iframe кроме того на таб которого кликнул.  Но ничего не получается то что задумано smile) что не так?

Код

<script>
$(document).ready(function() {     
$('#tabs li a').click(function() {           
var vid= $(this).attr("href");
$('div:not(vid)').empty();         
}); 
});
</script>

Автор: Aliance 29.10.2014, 15:58
Cheizer, вы пишите глупости! jQuery -это лишь кроссбраузерная оболочка над некоторыми популярными практиками в JS. Не все вещи можно сделать только в синтактисе jQuery, т.к. если решение довольно уникальное - его нет и не может быть в jQuery. Суть решения в том, чтобы послать в iframe postMessage запрос. И все. Выше был приведен как полностью рабочий код (с демо странцией на jsfiddle), так и описание того как это работает (на английском). Если лдя вас это слишком сложно - либо разбирайтесь, спрашивая здесь что не понятно, либо наймите профессионала.

Кстати, на форуме запрещено ругательные выражения, я отредактировал ваш пост.

Автор: Cheizer 29.10.2014, 16:35
Цитата(Aliance @ 29.10.2014,  15:58)
Cheizer, вы пишите глупости! jQuery -это лишь кроссбраузерная оболочка над некоторыми популярными практиками в JS. Не все вещи можно сделать только в синтактисе jQuery, т.к. если решение довольно уникальное - его нет и не может быть в jQuery. Суть решения в том, чтобы послать в iframe postMessage запрос. И все. Выше был приведен как полностью рабочий код (с демо странцией на jsfiddle), так и описание того как это работает (на английском). Если лдя вас это слишком сложно - либо разбирайтесь, спрашивая здесь что не понятно, либо наймите профессионала.

Кстати, на форуме запрещено ругательные выражения, я отредактировал ваш пост.

Я прихожу сюда за конструктивной помощью, а не критикой, скажите, вы можете мне помочь??? Если нет, пожалуйста, не вмешивайтесь. 
Ссылками кидаться это не дело для форума, я пришел сюда за помощью и за объяснением, не критикуйте если не предлагаете ничего конкретного, погуглить я и сам могу, что и делаю всегда в первую очередь, но разобраться прихожу сюда и не первый раз! И всегда мне здесь помогают люди знающие. 

Автор: sQu1rr 29.10.2014, 16:55
Цитата(Cheizer @  29.10.2014,  16:35 Найти цитируемый пост)
Это вы пишете глупости

Сэр, вы ошибаетесь


Цитата(Cheizer @  29.10.2014,  16:35 Найти цитируемый пост)
 если не можете помочь и пояснить, не лезьте!

Цитата(Aliance @  29.10.2014,  15:58 Найти цитируемый пост)
 Суть решения в том, чтобы послать в iframe postMessage запрос. И все. Выше был приведен как полностью рабочий код (с демо странцией на jsfiddle), так и описание того как это работает (на английском). Если лдя вас это слишком сложно - либо разбирайтесь, спрашивая здесь что не понятно, либо наймите профессионала.



Цитата(Cheizer @  29.10.2014,  16:35 Найти цитируемый пост)
Ссылками кидаться это не дело для форума,, я пришел сюда за помощью и за обьяснением, а не критикой, не критикуйте если не предлагаете конкретно, погуглить я и сам могу, но разобраться прихожу сюда и не первый раз!

Никто вас не критикует, вы напишите что не получается. Решать за вас, тоже не для этого форума. Тот код что вы привели, даже не собирается никак пытаться ничего делать с плеером. Вот вы попытайтесь а мы покритикуем поможем и объясним что непонятно

Автор: Cheizer 29.10.2014, 16:59
Я же уже писал! Еще раз, ибо все умные тут, а я глупый глупости пишу, вот глупости еще раз!

Пытаюсь сделать так, логика: по клику на табе, получаю id таба из атрибута href, так как этот же id и у div с iframe с видео, далее, 
очищаю все iframe кроме того на таб которого кликнул.  Но ничего не получается то что задумано) что не так?

Код

<script>
$(document).ready(function() {     
$('#tabs li a').click(function() {           
var vid= $(this).attr("href");
$('div:not(vid)').empty();         
}); 
});
</script>

Автор: sQu1rr 29.10.2014, 17:09
Цитата(Cheizer @  29.10.2014,  16:59 Найти цитируемый пост)
Но ничего не получается то что задумано

Ну если задуманно именно это
Код

$('div:not('+vid+')').empty(); // изучайте конкатенацию строк с переменными

Автор: Aliance 29.10.2014, 17:16
У ссылок в атрибуте href содержится #tabs-N, значит в вашей переменной vid при клике на первую ссылку будет строка #tabs-1. Если бы вы сделали dump в консоль, например, вы могли бы в этом убедиться.
Далее, селектор 'div:not(vid)' - что вы хотите тут получить? Все дивы, кроме текущего активного? Логично. Только опять же таки, если бы вы сами дебажили свой же код - вы бы увидели, что в коллекции по такому селектору пустой массив - то есть элементов не найдено. Возможно, тогда бы вы догадались сами, что что-то не так. А именно - у вас vid это переменная js, а вы ее хотите подставить прямо в строку селектора (см. sizzle.js). Нужно хотя бы так было сделать:
Код

$('div:not(' + vid + ')')


Но и тут бы вас ждало разочарование. А все потому, что нужно зайти в http://api.jquery.com/not-selector/ и прочесть, что же такое этот :not() и что туда можно запихать. Он принимает на вход селектор. А у вас есть строка с ID. Там же в документации сказано, что при переменных данных лучше использовать не псевдоселектор :not(), а метод http://api.jquery.com/not/. Он может принимать как селектор, так и элемент сразу. Таким образом код можно было бы упростить до такого:
Код

$(function() {     
    $('#tabs li a').click(function() {
        $('div').not(this).empty();         
    }); 
});


Я конечно промолчу (ведь глупости-то пишу я, оказывается), что ваш код слишком абстрактный и проходится по всем дивам на страничке, правильней было бы ограничить траверсинг каким-то классом.

Только дальше встает вопрос резонный. Зачем вы хотите вызвать метод .empty()? Он же удалит iframe, конечно решив вашу проблему с воспроизведением неактивного видео, но повторно туда уже будет не вернуться. Правильное решение - посылка postMessage, о которой я говорил выше.

Надеюсь я вам максимально просто и полно ответил на ваш вопрос, и вы более не против моего присутствия в этом топике. Аминь  smile 

Автор: sQu1rr 29.10.2014, 17:21
Согласен со всем что написано, но немного не понял смысла этой фразы
Цитата(Aliance @  29.10.2014,  17:16 Найти цитируемый пост)
Он принимает на вход селектор. А у вас есть строка с ID.

Это же тоже селектор, а значит все будет работать по задумке автора, вот только непонятно, что он собирается увидеть, когда нажмет на следующий таб

Добавлено через 5 минут и 25 секунд
Цитата(Aliance @  29.10.2014,  17:16 Найти цитируемый пост)
Таким образом код можно было бы упростить до такого:

В вашем коде this - это ссылка <a> а не div, поэтому мимо :(

Автор: Cheizer 29.10.2014, 18:38
Цитата(Aliance @ 29.10.2014,  17:16)
У ссылок в атрибуте href содержится #tabs-N, значит в вашей переменной vid при клике на первую ссылку будет строка #tabs-1. Если бы вы сделали dump в консоль, например, вы могли бы в этом убедиться.
Далее, селектор 'div:not(vid)' - что вы хотите тут получить? Все дивы, кроме текущего активного? Логично. Только опять же таки, если бы вы сами дебажили свой же код - вы бы увидели, что в коллекции по такому селектору пустой массив - то есть элементов не найдено. Возможно, тогда бы вы догадались сами, что что-то не так. А именно - у вас vid это переменная js, а вы ее хотите подставить прямо в строку селектора (см. sizzle.js). Нужно хотя бы так было сделать:
Код

$('div:not(' + vid + ')')


Но и тут бы вас ждало разочарование. А все потому, что нужно зайти в http://api.jquery.com/not-selector/ и прочесть, что же такое этот :not() и что туда можно запихать. Он принимает на вход селектор. А у вас есть строка с ID. Там же в документации сказано, что при переменных данных лучше использовать не псевдоселектор :not(), а метод http://api.jquery.com/not/. Он может принимать как селектор, так и элемент сразу. Таким образом код можно было бы упростить до такого:
Код

$(function() {     
    $('#tabs li a').click(function() {
        $('div').not(this).empty();         
    }); 
});


Я конечно промолчу (ведь глупости-то пишу я, оказывается), что ваш код слишком абстрактный и проходится по всем дивам на страничке, правильней было бы ограничить траверсинг каким-то классом.

Только дальше встает вопрос резонный. Зачем вы хотите вызвать метод .empty()? Он же удалит iframe, конечно решив вашу проблему с воспроизведением неактивного видео, но повторно туда уже будет не вернуться. Правильное решение - посылка postMessage, о которой я говорил выше.

Надеюсь я вам максимально просто и полно ответил на ваш вопрос, и вы более не против моего присутствия в этом топике. Аминь  smile

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

С конкатенацией понял, исправил.
Добавил атрибут data к ссылке что бы id забирать чистый, без #
И согласен с вами по поводу возврата на предыдущую вкладку, empty() рубит все. 


Код

<script>
$(document).ready(function() {     
$('#tabsvid li a').click(function() {           
var vid= $(this).attr("data"); 
$('div#'+vid+' div:not('+vid+')').empty();
}); 
});
</script>

Автор: sQu1rr 29.10.2014, 19:02
Что это?
Код

$('div#'+vid+' div:not('+vid+')').empty();

Если vid = tabs-1, то это будет выглядить
Код

$('div#tabs-1 div:not(tabs-1)').empty();

Что значит будет искать все <div> которые не <tabs-1> (серьезно) внутри <div id="tabs-1">

Вы уж используйте то что посоветовал мр. Aliance
Код

$('#tabs div').not('#' + vid).empty();

Или что-то подобное, вообще желательно всем <div> с которыми будете работать дать класс, а то, по добавлению (не относящихся к делу) <div> вы их селектить и чистить будуте тоже.

Автор: Cheizer 30.10.2014, 01:09
Цитата(sQu1rr @ 29.10.2014,  19:02)
Что это?
Код

$('div#'+vid+' div:not('+vid+')').empty();

Если vid = tabs-1, то это будет выглядить
Код

$('div#tabs-1 div:not(tabs-1)').empty();

Что значит будет искать все <div> которые не <tabs-1> (серьезно) внутри <div id="tabs-1">

Вы уж используйте то что посоветовал мр. Aliance
Код

$('#tabs div').not('#' + vid).empty();

Или что-то подобное, вообще желательно всем <div> с которыми будете работать дать класс, а то, по добавлению (не относящихся к делу) <div> вы их селектить и чистить будуте тоже.

Спасибо, решил сделать так, в самих iframe атрибут SRC оставил пустыми, а сами ссылки на видео перенес в созданный новый атрибут URLVIDEO у самого тега A, и по клику забираю видео и заполняю соответствующий ID атрибут SRC у IFRAME, но млять почему не заполняется атрибут SRC у IFRAME не пойму :( что не так на этот раз?  

Код

<script>
$(document).ready(function() {     
$('#tabsvid li a').click(function() {  
    
var vid= $(this).attr("href");    
var video = $(this).attr("urlvideo");
$('div'+vid+ 'iframe').attr('src','video');
}); 
});
</script>

Автор: Aliance 30.10.2014, 09:45
Цитата(sQu1rr @  29.10.2014,  18:21 Найти цитируемый пост)
Это же тоже селектор, а значит все будет работать по задумке автора

согласен, спасибо за поправку

Цитата(sQu1rr @  29.10.2014,  18:21 Найти цитируемый пост)
В вашем коде this - это ссылка <a> а не div, поэтому мимо :( 

действительно, не внимателен.

Cheizer, на форуме есть кнопка код с выпадающим списком. для данного раздела чаще всего используется либо html (по дефолту), либо javascript. Если вы пишите код внутри тегов script - фактически это кусок html кода, а вы его оборачиваете в код js. Самое правильнео в данном случае - писать js без тегов script (имеется ввиду на данном форуме), подразумевая его наличие в реальном проекте. Тогда подсветка синтаксиса будет работать корректно.

Кроме того всегда не понимал, зачем люди пишут
Код

$(document).ready(function() {});

когда можно писать сокращенную форму
Код

$(function() {});


Вы так же проигнорировали мое замечание на счет выборки всех дивов
Цитата(Aliance @  29.10.2014,  18:16 Найти цитируемый пост)
ваш код слишком абстрактный и проходится по всем дивам на страничке, правильней было бы ограничить траверсинг каким-то классом.


И я бы не рекомендовал вам при любой необходимости вешать произвольные атрибуты, работать-то работает, но это не по стандарту. Если очень хочется - то лучше тогда использовать data-* нотацию и получать к ним доступ не через .attr(), а через .data():
Код

<a href="#tab-1" data-tab-id="tab-1"></a>

Код

$('a').data('tab-id'); // tab-1


Но в вашем случае это будет лишним повторением, у вас же есть уже ID. Просто, можно всегда обрезать первый символ:
Код

'#tab-1'.slice(1)

Автор: Aliance 30.10.2014, 10:11
Вот примерная реализация того, как это должно работать: http://jsfiddle.net/Aliance/y1x9u0oj/

Оказалось, для правильной работы отсановки видео из js нужно вставлять видео с доп. параметрами allowscriptaccess="always" (атрибут) и enablejsapi=1 (get-параметр):
Код

<iframe src="//www.youtube.com/embed/Lkb1kGCsIJ0?enablejsapi=1" allowscriptaccess="always"></iframe>

Автор: sQu1rr 30.10.2014, 12:25
Немного в оффтопик пойду, но раз тут обсуждается конструкция
Код

$(function() {});

сразу дам совет:
не вставляем скрипты в <head>
вставляем скрипты в конец <body>
таким образом скрипты грузятся после загрузки html, и могут выполнятся сразу. Что бы не засорять глобальное пространство можно оборачивать в кошерный
Код

(function() {
// code
})();

главное следить что бы сначало зависимости грузились а потом уже ваши скрипты
Код

<html>
<head>
  <title></title>
</head>
<body>
  <tags></tags>
  <script jquery/jqueryui/whatever>
  <script>(function() { /* your code here */ })();</script>

Автор: Cheizer 30.10.2014, 23:41
Короче сделал так, может глупо но меня устраивает, а суть такая по клику на табе по тегу а, забираю ID блока с видео 
и вынес в новый параметр URLVIDEO в котором теперь храню ссылку на ютуб, далее очищаю все остальные IFRAME что бы лишнего не звучало, 
и подставляю URLVIDEO именно в активный блок IFRAME ссылку с ютуб, все просто, спасибо что попытались помочь.

Код

<script>
$(document).ready(function() {     
$('#tabsvid li a').click(function() {  
var vid= $(this).attr("href");    
var video = $(this).attr("urlvideo");
$('div#tabs2 iframe').attr("src","");
$('div'+vid+' iframe').attr('src',video);
}); 
});
</script>

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)