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

Trotor · 12/08/19 19:53

Как можно отложить загрузку 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/

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

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

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

newbie · 12/09/19 07:37

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

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

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

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

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

Trotor · 12/09/19 16:34

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

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

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

Trotor · 10 декабря 2019

Всё отлично получается, однако есть одна неприятность - при внесения изменений в сообщение посредством быстрой правки - пропадает 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

Изменено 10 декабря 2019 пользователем Haktar

Trotor · 12/11/19 04:17

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

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

Trotor · 12/11/19 15:55

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

newbie · 12/12/19 10:00

'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();
	}
});
});

Trotor · 12/12/19 13:22

@newbie,

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

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

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

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

Trotor · 12/13/19 17:24

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

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

<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>

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

newbie · 12/14/19 06:33

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

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

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

Никак

Trotor · 12/14/19 14:40

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

Есть много роликов на Ютубе, у которых стоит по умолчанию устаревшая 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>'

Trotor · 12/15/19 20:44

Есть много роликов на Ютубе, у которых стоит по умолчанию устаревшая 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;
}

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

newbie · 12/16/19 06:54

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

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

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

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

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

Trotor · 12/16/19 18:02

Так спросите человека с форума.
Это вообще какая-то смесь js и php.
Да и file_exists работает не так, как Вам надо.

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

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

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

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

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

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

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

newbie · 12/19/19 11:57

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

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

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

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

Trotor 27

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

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

newbie 1723

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

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

Trotor 27

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

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

Trotor 27

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

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

Trotor 27

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

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

Trotor 27

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

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

newbie 1723

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

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

Trotor 27

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

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

Trotor 27

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

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

newbie 1723

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

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

Trotor 27

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

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

Trotor 27

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

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

newbie 1723

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

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

Trotor 27

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

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

newbie 1723

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

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

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

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

Войти

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

Сообщество