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

Подписчики

8 декабря 20196 г

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

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

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

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

9 декабря 20196 г

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

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

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

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

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

9 декабря 20196 г

Автор

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

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

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

10 декабря 20196 г

Автор

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

11 декабря 20196 г

Автор

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

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

11 декабря 20196 г

Автор

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

12 декабря 20196 г

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

12 декабря 20196 г

Автор

@newbie,

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

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

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

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

13 декабря 20196 г

Автор

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

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

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

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

14 декабря 20196 г

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

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

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

Никак

14 декабря 20196 г

Автор

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

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

15 декабря 20196 г

Автор

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

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

16 декабря 20196 г

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

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

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

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

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

16 декабря 20196 г

Автор

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

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

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

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

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

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

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

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

19 декабря 20196 г

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

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

19 декабря 20196 г

Автор

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

Да. Из этих вариантов, изображения низкого качества, не считая maxresdefault.jpg, но он встречается ещё реже чем sddefault.jpg

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

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

Войти сейчас

Подписчики

Перейти к списку тем

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

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

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

Аккаунт

Навигация

Поиск

Настроить push-уведомления браузера

Chrome (Android)

Chrome (компьютер)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (компьютер)

Firefox (Android)

Firefox (компьютер)