Jump to content
Дизайн и модификация IPS Community IPBSkinsBETA
Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
Trotor

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

Recommended Posts

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

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

 

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

 

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

Share this post


Link to post
Share on other sites

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

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

 

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

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

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

  • Upvote 1

Share this post


Link to post
Share on other sites

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

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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

'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

Share this post


Link to post
Share on other sites

@newbie,

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

 

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

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

 

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

Share this post


Link to post
Share on other sites

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

 

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

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

 

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

Share this post


Link to post
Share on other sites

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

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

 

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

Никак

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

 

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

Share this post


Link to post
Share on other sites

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

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

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

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

 

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

Share this post


Link to post
Share on other sites

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

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

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

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

 

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

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

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

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

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

 

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...