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

Trotor · 12/08/2019 07:53 PM

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

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

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

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

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

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

Trotor · 12/09/2019 04:34 PM

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

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

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

Trotor · December 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

Edited December 10, 2019 by Haktar

Trotor · 12/11/2019 04:17 AM

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

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

Trotor · 12/11/2019 03:55 PM

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

newbie · 12/12/2019 10:00 AM

'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/2019 01:22 PM

@newbie,

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

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

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

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

Trotor · 12/13/2019 05:24 PM

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

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

<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/2019 06:33 AM

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

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

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

Никак

Trotor · 12/14/2019 02:40 PM

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

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

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

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

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

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

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

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

Trotor · 12/16/2019 06:02 PM

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

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

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

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

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

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

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

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

newbie · 12/19/2019 11:57 AM

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

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

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

Recommended Posts

Trotor 27

Share this post

Link to post

newbie 1,722

Share this post

Link to post

Trotor 27

Share this post

Link to post

Trotor 27

Share this post

Link to post

Trotor 27

Share this post

Link to post

Trotor 27

Share this post

Link to post

newbie 1,722

Share this post

Link to post

Trotor 27

Share this post

Link to post

Trotor 27

Share this post

Link to post

newbie 1,722

Share this post

Link to post

Trotor 27

Share this post

Link to post

Trotor 27

Share this post

Link to post

newbie 1,722

Share this post

Link to post

Trotor 27

Share this post

Link to post

newbie 1,722

Share this post

Link to post

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Сообщество