Перейти к публикации
Дизайн и модификация IPS Community IPBSkinsBETA
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...
Trotor

Отложенная загрузка встроенного плеера Ютуба

Рекомендованные сообщения

Как можно отложить загрузку iframe встроенного плеера Ютуба на форуме, вызывая его лишь по нажатию кнопки? Что бы он не прогружался во время загрузки страницы? А то ведь если на странице таких встроенных роликов несколько - то страница ощутимо грузится.

 

Искал в сети методы как это реализовать, вот нашёл отличный способ - https://ruseller.com/lessons.php?rub=32&id=2125

 

А вот пример внедрения этого способа - https://www.languagesandnumbers.com/articles/en/The-Canticles-of-Holy-Mary-and-the-Galician-Portuguese-language/

Страница загружается практически сразу, что не может не радовать. Встроенный плеер Ютуба активируется по встроенной кнопке, размещённой на изображении-миниатюре к видеоролику.

 

Отличный способ, однако пробовал его реализовать - на жаль ничего не получилось.

 

Прошу помощи у специалистов, как можно такое реализовать, не обязательно как в том способе что я привёл выше.

Поделиться сообщением


Ссылка на сообщение

Что именно не получилось?

Добавляете js, css.

 

Изменяете шаблон замены медиа-тега

<div class="youtube" id="fsrJWUVoXeM" style="width: 500px; height: 281px;"></div>

Вместо fsrJWUVoXeM пишите ссылку ($1, $2 или $3) (зависит от медиа-тега)

  • Upvote 1

Поделиться сообщением


Ссылка на сообщение

Вместо fsrJWUVoXeM пишите ссылку ($1, $2 или $3) (зависит от медиа-тега)

Вот это я и не сделал.

 

Реализовываю его - пока всё отлично получается.

Поделиться сообщением


Ссылка на сообщение
12/10/19 14:48 (изменено)

Всё отлично получается, однако есть одна неприятность - при внесения изменений в сообщение посредством быстрой правки - пропадает iframe, то есть нет картинки-превью Ютуба и плеер не возможно активировать кликом. Тоже самое если ссылку с плеером поместить в чат. То есть код не срабатывает если помещать или редактировать ссылку плеера в прямом режиме, без перезагрузки.

 

Частично я эту проблему решил, добавив в медиа-код ссылку на картинку-превью плеера:

 

<div class="youtube-player" id="$4" style="background-image: url(http://i.ytimg.com/vi/$4/sddefault.jpg)"></div>

 

Однако всё равно при клике на плеер, он не активируется.

 

Мой js код:

 

'use strict';
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
   if (!document.getElementsByClassName) {
       var getElementsByClassName = function(node, classname) {
           var a = [];var re = new RegExp('(^| )'+classname+'( |$)');var els = node.getElementsByTagName("*");for(var i=0,j=els.length; i<j; i++)
               if(re.test(els[i].className))a.push(els[i]);
           return a;
       }
       var videos = getElementsByClassName(document.body,"youtube-player");
   } else {
       var videos = document.getElementsByClassName("youtube-player");
   }
   var nb_videos = videos.length;
   for (var i=0; i<nb_videos; i++) {
       videos[i].style.backgroundImage = 'url(http://i.ytimg.com/vi/' + videos[i].id + '/sddefault.jpg)';
       var play = document.createElement("div");play.setAttribute("class","playyout");videos[i].appendChild(play);videos[i].onclick = function() {
           var iframe = document.createElement("iframe");var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1";if (this.getAttribute("data-params")) iframe_url+='&'+this.getAttribute("data-params");iframe.setAttribute("src",iframe_url);iframe.setAttribute("allowfullscreen",'allowfullscreen');iframe.style.width  = this.style.width;iframe.style.height = this.style.height;this.parentNode.replaceChild(iframe, this);
       }
   }
});

 

 

CSS:

 

.youtube-player {background-position: center;background-repeat: no-repeat;background-size: 100%;position: relative;display: inline-block;border-radius: 6px;border: 2px solid #aac5e8;opacity: 0.9;height: 390px;width: 640px;} .youtube-player:hover {cursor: pointer;border: 2px solid #B65501;opacity: 1.0;} .playyout {background: url(/grafik/yt_icon_t.png) no-repeat center center;background-size: 64px 64px;height: 100%;width: 100%;position: absolute;} .playyout:hover {background: url(/grafik/yt_icon.png) no-repeat center center;background-size: 64px <if test="in_array( $this->memberData['userAgentKey'], array( chrome, htc ) )">45px<else />64px</if>;}
.whitebox_m iframe {height: 390px;width: 640px;border-radius: 6px;border: 2px solid #B65501;}

 

 

Медиа-код:

 

<div class="youtube-player" id="$4" style="background-image: url(http://i.ytimg.com/vi/$4/sddefault.jpg.jpg)"></div>

 

 

Хотя я думаю что проблема не в этом, нужно наверное какие то данные добавить в шаблон includeVars

Изменено пользователем Haktar

Поделиться сообщением


Ссылка на сообщение

И ещё одна проблема нарисовалась - не у всех роликов есть картинка превью sddefault.jpg (особенно у старых роликов).

 

Подскажите условие, при котором если нет в наличие у ролика картинки sddefault.jpg, добавлялась картинка hqdefault.jpg.

Поделиться сообщением


Ссылка на сообщение

Ребята, плизз окажите помощь с этими двумя проблемами!

Поделиться сообщением


Ссылка на сообщение

'use strict';
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
function createYTFrames() {
	if (!document.getElementsByClassName) {
		// Поддержка IE8
		var getElementsByClassName = function(node, classname) {
			var a = [];
			var re = new RegExp('(^| )'+classname+'( |$)');
			var els = node.getElementsByTagName("*");
			for(var i=0,j=els.length; i<j; i++)
				if(re.test(els[i].className))a.push(els[i]);
			return a;
		}
		var videos = getElementsByClassName(document.body,"youtube");
	} else {
		var videos = document.getElementsByClassName("youtube");
	}

	var nb_videos = videos.length;
	for (var i=0; i<nb_videos; i++) {
		// Зная идентификатор видео на YouTube, легко можно найти его миниатюру
		videos[i].style.backgroundImage = 'url(http://i.ytimg.com/vi/' + videos[i].id + '/sddefault.jpg)';

		// Добавляем иконку Play поверх миниатюры, чтобы было похоже на видеоплеер
		var play = document.createElement("div");
		play.setAttribute("class","play");
		videos[i].appendChild(play);

		videos[i].onclick = function() {
			// создаем iframe со включенной опцией autoplay
			var iframe = document.createElement("iframe");
			var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1";
			if (this.getAttribute("data-params")) iframe_url+='&'+this.getAttribute("data-params");
			iframe.setAttribute("src",iframe_url);
			iframe.setAttribute("frameborder",'0');

			// Высота и ширина iframe должны быть такими же, как и у родительского блока
			iframe.style.width  = this.style.width;
			iframe.style.height = this.style.height;

			// Заменяем миниатюру плеером с YouTube
			this.parentNode.replaceChild(iframe, this);
		}
	}
}

createYTFrames();

Ajax.Responders.register({
	onComplete: function(e, data) {
		createYTFrames();
	}
});
});

  • Upvote 1

Поделиться сообщением


Ссылка на сообщение

@newbie,

Большое человеческое спасибо!

 

А вот с этим, ещё не подскажете?

И ещё одна проблема нарисовалась - не у всех роликов есть картинка превью sddefault.jpg (особенно у старых роликов).

 

Подскажите условие, при котором если нет в наличие у ролика картинки sddefault.jpg, добавлялась картинка hqdefault.jpg.

Поделиться сообщением


Ссылка на сообщение

И ещё, самое последнее. Как можно медиа-тег обвернуть в условие?

 

Вот так примерно:

<if test="memberbox:|:$this->memberData['field_144']">
<iframe class="youtube-player" src="https://www.youtube.com/embed/$4" allowfullscreen></iframe>
<else />
<div class="youtube-player" id="$4"></div>
</if>

 

То есть нужно что бы пользователь смог выбирать, оставаться в новом формате, или использовать старый, с фреймом.

Поделиться сообщением


Ссылка на сообщение

А вот с этим, ещё не подскажете?

Там же есть изображение-заглушка. Узнать можно только по коду ответа, а это лишняя работа.

 

Как можно медиа-тег обвернуть в условие?

Никак

Поделиться сообщением


Ссылка на сообщение

Там же есть изображение-заглушка. Узнать можно только по коду ответа, а это лишняя работа.

Есть много роликов на Ютубе, у которых стоит по умолчанию устаревшая hqdefault.jpg (хотя большая часть роликов использует sddefault.jpg). И при такой миниатюре, появляется картинка-заглушка удалённого видео.

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

videos[i].style.backgroundImage = '<if test="file_exists( 'http://i.ytimg.com/vi/' + this.id + '/sddefault.jpg' )">url(http://i.ytimg.com/vi/' + this.id + '/sddefault.jpg)<else />url(http://i.ytimg.com/vi/' + videos[i].id + '/hqdefault.jpg)</if>'

Поделиться сообщением


Ссылка на сообщение

Есть много роликов на Ютубе, у которых стоит по умолчанию устаревшая hqdefault.jpg (хотя большая часть роликов использует sddefault.jpg). И при такой миниатюре, появляется картинка-заглушка удалённого видео.

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

 

Человек с форума, посоветовал вот такое:

 

function toDoSomething() {
var test = new String();
if(file_exists('url(http://i.ytimg.com/vi/' + videos[i].id + '/sddefault.jpg)')) {
test = 'url(http://i.ytimg.com/vi/' + videos[i].id + '/sddefault.jpg)';
}
else {
test = 'url(http://i.ytimg.com/vi/' + videos[i].id + '/hqdefault.jpg)';
}
return test;
}

 

Правда я так и не понял как мне это реализовать в выше указанном коде...

Поделиться сообщением


Ссылка на сообщение

Так спросите человека с форума.

Это вообще какая-то смесь js и php.

Да и file_exists работает не так, как Вам надо.

Я же написал выше, что нужно проверять код ответа. Для "заглушек" он будет 404.

 

Делать 1 запрос к youtube для каждой картинке. Вам оно действительно надо?

Поделиться сообщением


Ссылка на сообщение

Так спросите человека с форума.

Это вообще какая-то смесь js и php.

Да и file_exists работает не так, как Вам надо.

Это я его уже переделал, на основании того что он мне дал. Но судя по всему неправильно и криво :)

 

Я же написал выше, что нужно проверять код ответа. Для "заглушек" он будет 404.

Во многих старых видеороликах Ютуба используется не современный файл sddefault.jpg а устаревший hqdefault.jpg

Поэтому такие ролики идут с заглушкой, как будто ролик удалён. И форумчане жалуются на это.

Вот пример ролика с hqdefault.jpg:

post-31497-0-65076500-1576519227_thumb.jpg

 

Делать 1 запрос к youtube для каждой картинке. Вам оно действительно надо?

По сравнению с тем сколько делалось запросов к Ютубу в стандартном варианте - это вообще не существенно.

Поделиться сообщением


Ссылка на сообщение

Вы другие варианты смотрели?

  • 0.jpg
  • 1.jpg
  • 2.jpg
  • 3.jpg
  • default.jpg
  • mqdefault.jpg
  • hqdefault.jpg
  • sddefault.jpg
  • maxresdefault.jpg

Поделиться сообщением


Ссылка на сообщение

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.

×
×
  • Создать...