LINUX.ORG.RU
решено Форум — Web-development  

JS, jQuery и API Youtube

 ,


1

1

Этот код работает отлично, delight, sib и blitz это id от айфреймов с видео, записываются в свою переменную и в следующей функции при клике на определённый элемент ставятся на паузу.

function onYouTubePlayerAPIReady() {
	play = new YT.Player('delight', {
		events: {'onReady': onPlayerReady}
	});
	play2 = new YT.Player('sib', {
		events: {'onReady': onPlayerReady}
	});
	play3 = new YT.Player('blitz', {
		events: {'onReady': onPlayerReady}
	});
}

function onPlayerReady(event) {
	document.getElementById('bx-pager').onclick = function(){
		play.pauseVideo();
		play2.pauseVideo();
		play3.pauseVideo();
	};
	$(".bx-controls-direction a").on("click", function(){
		play.pauseVideo();
		play2.pauseVideo();
		play3.pauseVideo();
	});
}
Да, я вижу что во второй функции смесь из js и jquery, но если я прописываю первую запись в стиле второй, то всё отваливается. Кстати тоже хотел бы узнать почему.

Но видео может оказаться не три, а больше. Хорошо было бы автоматом эту конструкцию делать. В следующем коде до алерта всё здорово, он вроде как выводит массив (или объект?) [«delight», «sib», «blitz»], а что дальше делать и как применить я не могу понять. 

var iframe_id = [];
$("iframe").each(function (i){
	iframe_id[i] = $("iframe")[i].id;
});
alert(iframe_id);
function onYouTubePlayerAPIReady() {
	play = new YT.Player(iframe_id[i], {
		events: {'onReady': onPlayerReady}
	});
}
function onPlayerReady(event) {
	document.getElementById('bx-pager').onclick = function(){
		play.pauseVideo();
	};
	$(".bx-controls-direction a").on("click", function(){
		play.pauseVideo();
	});
}
Когда делал так:
$("iframe").each(function (i){
	iframe_id = [];
	iframe_id[i] = $("iframe")[i].id;
});
alert(iframe_id);
то возвращалось последнее значение, отлично подставлялось и работало.

Да, алерты там просто для меня.


Вы обнуляете переменную iframe_id в функции each().

Надо вынести её за пределы функции.

var iframe_id = [];
$("iframe").each(function (i){
	iframe_id[i] = $("iframe")[i].id;
});
alert(iframe_id);

Можно заполнять массив без ключей: 

$("iframe").each(function(key, value){
    iframe_id.push(value.id);
});

Каждый раз делая $("iframe") вы снова, снова и снова ищете то, что уже давно нашли. :)

lexazloy ★
()
Ответ на: комментарий от lexazloy

Спасибо, это понял, я сам хоть криво, но вывел, что делать дальше фиг знает, сделал так: 

var iframe_id = [];
$(".bxslider iframe").each(function(key, value){
	iframe_id.push(value.id);
});
var YtObjects = [];
function onYouTubePlayerAPIReady() {
	$.each(iframe_id, function (key, value) {
		YtObjects.push(new YT.Player(value[key], {
			events: {'onReady': onPlayerReady}
		}));
	});
	console.log(YtObjects);
};
function onPlayerReady(event) {
	$.each(YtObjects, function (key, value) {
		document.getElementById('bx-pager').onclick = function(){
			YtObjects[key].pauseVideo();
		};
		$(".bx-controls-direction a").on("click", function(){
			YtObjects[key].pauseVideo();
		});
	});
};
Вконсольлог выводит правильно, объект с 3 элементами ютубовскими, но хоть он объявлен глобально, за пределами функции не видно результата, так что не получается передать в последнюю функцию.

seded
() автор топика

вырвиглазный код. Во-первых, глобальные объекты и переменные - моветон. Во-вторых, 

var iframe_id = $("iframe").map((i, iframe) => iframe.id);
В-третьих, я вообще не понял, что вы пытаетесь сделать. Если передать id фрейма в onPlayerReady, то это можно сделать как-то так: 
function onPlayerReady(frame_id, event) { ... }

new YT.Player(iframe_id[i], {
		events: {'onReady': onPlayerReady.bind(undefined, iframe_id[i])}
	});
(написал навскидку, не тестировал)

anonymous
()
Ответ на: комментарий от seded

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

anonymous
()
Ответ на: комментарий от seded

У вас всё немного в кучу и наперекосяк. :)

Во-первых, я вам очень советую отказаться от jQuery в пользу чистого - «ванильного» - JavaScript. Не разобравшись в одном вы хватаете дополнительный слой, который требует отдельного обучения и понимания.

Во-вторых, смотрите. Вы делаете each() по массиву iframe_id. Берёте ключи и значения, а потом помещаете ключи в значения: 

$.each(iframe_id, function (key, value) {
    YtObjects.push(new YT.Player(value[key], {

В данном случае value это то же самое, что iframe_id[key]. В массиве ключи 0, 1, 2. Поэтому value[key] должен вернуть вам букву из строки. Например, если value == delight, то value[key] будет d, потом e, а затем l.

В-третьих, ваш подход к биндингу onclick на элемент не даст результата. Вы каждый раз (на onReady каждого плеере) вызываете функцию, которая проходит по объектам и делает что конкретно? Не, я-то понимаю что вы хотите, но браузер этого не поймёт. :)

Логика такого поведения должна отличатся. Смотрите: вы берёте массив и ставите его во главу всего. Но массив это вспомогательный элемент. Он должен помогать биндингу, но не наоборот.

Не знаю как объяснить...

Вот пример вашего кода: 

$.each(YtObjects, function (key, value) {

Вы берёте массив, проходите по нему и пытаетесь сделать биндинг. Очень плохо, очень неправильно.

Массив вещь вспомогательная. Скажем, это ведь может быть не массив, а объект или число. То есть какое-то значение. Содержание его не так важно.

А вот биндинг важен. Поэтому функция должна выглядеть так: 

$('.bx-controls-direction a').on('click', function(){
	$.each(YtObjects, function(index, my_yt_object){
            my_yt_object.pauseVideo();
	});
});

lexazloy ★
()
Ответ на: комментарий от lexazloy

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

anonymous
()
Ответ на: комментарий от lexazloy

Спасибо за советы! Нашёл ещё вот что: http://jsfiddle.net/MadLittleMods/3J2wT/

И просто зациклил по вашим советам. 

// в html вставляем YouTube API

// ищем все id у видео
var iframe_id = [];
$('.bxslider iframe').each(function(key,value){
	iframe_id.push(value.id);
});

// ставим на паузу с миниатюр и стрелок
$('.cd_class').on("click", ".thumb, .arrow", function (){
	$.each(iframe_id, function (key, value){
		$('.bxslider')
			.find('li:not(.bx-clone)') // bxslider дублирует первый и последний элемент с классом .bx-clone, без этого не взлетит
			.find('#'+iframe_id[key])[0] // 0 нужен, потому что возвращается объект
			.contentWindow
			.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
	});
});
Вдруг мне или ещё кому понадобится.

Спасибо всем за помощь. (;

seded
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Web-development