Вчера я решил улучшить способ загрузки видео с YouTube на моем веб-сайте, встраивая их только тогда, когда их запрашивает пользователь. Иногда на странице могло быть до 30 видео, и это занимало много времени для загрузки.
Это первый раз, когда я попытался использовать метод «ленивой загрузки», и я подумал, что стоит спросить:
Что я могу сделать, чтобы это исправить?
Как я могу сделать его немного более изящным?
Это полностью упускает смысл отложенной загрузки?
Не обращайте внимания на стиль, так как он здесь не имеет значения.
Это работает следующим образом: сначала поместите привязку на страницу, содержащую идентификатор видео:
После этого jQuery перебирает каждый a.youtube-video и создает прозрачный диапазон с миниатюрой видео в качестве фона:
$(‘a.youtube-video’).each(function() < var videoId = $(this).attr(‘data-video’); var videoThumbnail = «http://img.youtube.com/vi/» + videoId + «/0.jpg»; var videoBackground = $(‘ ‘); videoBackground.css(< background:»#fff url(‘»+videoThumbnail+»‘) no-repeat» >) .
Затем он изменяет стиль тега привязки (здесь это делается для предотвращения воздействия на браузеры с отключенным JavaScript):
Как продолжить прерванную загрузку видео на youtube
$(this).css(< height:315, width:460, position:»relative», display:»block», textAlign:»center», color:»#fff», fontSize:26 >);
Затем он завершает цикл, добавляя span к якорю:
$(this).text(‘Click to load video’); $(this).append(videoBackground); >);
Загрузка встроенного видеообъекта YouTube происходит по якорному клику:
$(‘a.youtube-video’).click(function(e) < e.preventDefault(); var videoId = $(this).attr(‘data-video’); var videoThumbnail = «http://img.youtube.com/vi/» + videoId + «/0.jpg»; var videoEmbed = $(‘. ‘); .
Это завершается добавлением кода встраивания к родительскому якорю и удалением якоря:
$(this).parent().append(videoEmbed); $(this).hide(); >);
задан 19 фев ’13, 11:02
Для чего вы используете videoThumbnail в обработчике кликов? Я работаю над чем-то подобным, и одна проблема, с которой я столкнулся, — это количество перерисовок, происходящих для каждого видео. Ваш опыт может отличаться. Кроме того, рассмотрите возможность автоматического воспроизведения видео после первого клика, чтобы пользователям не приходилось нажимать дважды. — lrusli
Ах, я удалил это сейчас. Это было для того времени, когда я изначально использовал только маленькие миниатюры — при нажатии изображение расширялось и заменялось большим миниатюрой. — James Donnelly
Вы видели API, который YouTube предоставляет для удобного встраивания видео, у них есть API jS (Developers.google.com/youtube/js_api_reference) и iframe API(Developers.google.com/youtube/iframe_api_reference) — Arindam
Проблема с iFrame заключается в том, что он отображает сгенерированные ошибки консоли. в сам iFrame. Однако я не знаю, будет ли это то же самое для iFrame API. Тем не менее, я почитаю JS API, спасибо! — James Donnelly
Как загрузить видео на главную страницу Ютуб — YouTube канала 2019
Почти уверен, что вы можете удалить href=»#» и по-прежнему запускать onclick. Убрав его, вы не сможете загрязнять URL-адрес в строке URL-адреса символами, которые на самом деле ничего не делают. Вы можете изменить указатель (для индикации «это кликабельно») в CSS, если хотите. — Pegasus Epsilon
2 ответы
Вы должны установить href так, чтобы люди знали, что они будут загружать. Это можно сделать в элементе a при создании страницы или в JS. Он должен быть в элементе, если вы хотите, чтобы ваша страница работала для людей, у которых отключен Javascript.
var url = «http://www.youtube.com/watch?v Click to play video»);
Или создав наложение, подобное тем, что SMH что делает более очевидным, что при нажатии на изображение будет воспроизводиться видео. Или оба.
Также вы не должны прерывать открытие вещей в новом окне, когда люди держат нажатой клавишу Ctrl или Command. я обновил играть на скрипке но в основном в вашем событии клика вам нужно:
var isCtrlPressed = e.ctrlKey || e.metaKey; if (isCtrlPressed == true)
Я знаю, вы сказали игнорировать стиль, но я предпочитаю, чтобы цвет фона заполнителя явно отличался от фона страницы. Если страница загружается медленно, я могу сказать, что там что-то будет загружаться, а не просто пустой фрагмент страницы.
Это полностью упускает смысл отложенной загрузки?
Не совсем, но в данном случае это немного бессмысленно. Отложенная загрузка обычно используется, когда загружаемая вещь очень сложна (например, массивная таблица) и поэтому сильно увеличивает размер страницы, из-за чего первоначальный рендеринг страницы занимает много времени после того, как пользователь перешел по ссылке. .
Хотя видео на YouTube могут загружаться медленно, на самом деле они не должны блокировать загрузку и рендеринг остальной части страницы, поэтому отсрочка загрузки видео дает вам лишь небольшую выгоду за довольно много работы.
Я думаю, вы должны измерить, как быстро кто-то может просмотреть страницу, прокрутить вниз, а затем щелкнуть, чтобы воспроизвести последнее видео. Если это происходит быстрее с отложенной загрузкой, потому что другой флеш-проигрыватель видео не загружается, то это все равно может стоить того.
Источник: stackovergo.com
Быстрая подгрузка встроенного видео YouTube средствами JavaScript
Код для замещения видео из YouTube на странице его миниатюрой. Это позволяет сократить время загрузки страницы.
Научим бесплатно правильно создавать сайты на WordPress. Подробнее →
При вставке видео из YouTube на страницу встроенными средствами WordPress страница получается не самой быстрой — она полностью загрузится только тогда, когда отобразится видео. А если видео роликов несколько, то иногда ждать их загрузки приходится долго. Выходом из этой ситуации является отложенная загрузка видео — вместо него на странице отображается миниатюра (изображение), а само видео начинает загружаться только после клика по миниатюре. Такой способ быстрой загрузки может существенно сократить общее время загрузки страницы. Есть множество плагинов, которые позволяют делать отложенную загрузку видео из YouTube, но речь в этом посте не о них, а о том, как можно реализовать такое без плагинов.
Тут на помощь приходит Java-код. С его помощью, указав данные видео (достаточно одного ID), можно получить его миниатюру. Вставьте в файл header.php:
«use strict»; $(function() < $(«.youtube»).each(function() < // определение миниатюры $(this).css(‘background-image’, ‘url(http://i.ytimg.com/vi/’ + this.id + ‘/sddefault.jpg)’); // значок Play поверх миниатюры $(this).append($(‘
Обратите внимание на sddefault.jpg — это миниатюра, которая используется для отображения на странице. YouTube создает несколько миниатюр, каждая со своим размером:
default.jpg — 120px на 90px
hqdefault.jpg — 480px на 360px
mqdefault.jpg — 32px на 180px
sddefault.jpg — 640px на 480px
maxresdefault — 1280px на 720px
Вы можете использовать любую из этих миниатюр, вставив в код ее название.
В файл style.css вставьте код оформления блока с миниатюрой:
.youtube < background-position: center; background-repeat: no-repeat; position: relative; display: inline-block; overflow: hidden; transition: all 200ms ease-out; cursor: pointer; >.youtube .play < background: url(«data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAERklEQVR4nOWbTWhcVRTHb1IJVoxGtNCNdal2JYJReC6GWuO83PM/59yUS3FRFARdFlwYP1CfiojQWt36sRCUurRIdVFXIn41lAoVdRGrG1M01YpKrWjiYmaSl8ybZJL3cd+YA//NLObd3++eO8x79z5jSq5Gw+8kov0AP8vMR5l1BtBZQM4B8ks75wCdZdYZZj5qLZ4hov2Nht9Z9vhKKSIaB/gI4M4w62KeAO6Mte4lYOq20FxrlqqOibhHmeWbvNC9ZfDX1mLae391aN6limO/gwgvAPJbWeAZuSDingdwXTBw7/0IsyaA/Fkh+KqOkD+YNfHej1QKD+y7iVlOhgLvFqFfNJvNGyuBJ+KDAF8MDd0tgS8y64OlgSdJMsysL4cG7SOHkyQZLhTee7+d2R2rAVy/S+Jd7/32ouBHAP4gNNRGQyTHc/84NhqNywZp5rvjjnnvt21aABFeCQ+RLwAf2hQ8s7sv9OCLk6AHNgQvIrvbfzKCD76g/O6cu7lf/iER/aQGgy448pExZmhdegAPhR9sObFWH1gT3lp7DaA/5bkIgJhZPgsNmz02novj+KqeApj1ubwXWe4kdyeznAgNvTpE/HQmvKqOMeuFogTUVQSRno+iaLRLAJF7uIgL9O4ubgL8aWgB7S44mNX+35YpICUiAvS9sBLkq1WzT+NFffl6AuoiApi6NT37h6sWkBIRZGkQ8YtLgyji6e1mBYTqCEBPG2Naz+0BWQgtoGoRgCzEsd9hAN1X5BfnFZASUfrSAFQNsyZ1FJASUVpHiLinDJG8U2cBZYogkrcNs5waBAGdstbeU9zdqpw0gPwwSAI6VUxHyFlDpOcHUUBBIuYNs14aZAE5RVwyzPr3/0EAEY0TyfGNjBWQvwZ +CTSbehfAH29mrID8bET0+0EUkAd8WYDOmqJ3ecsG30yr9wqRfm6Y+a1BEFDEjHfHvWmY9ck6CygHvBVr8Xhtb4ZE5HZA3y8DvBNA1TjnrmXWf+sioMwZX5V/VHXMGGMMoKdDCxCRvRWBdzKzdHEO+EisilbPyopHYqp6S9UCAsz4iojI7hUDAtyXVQgIDd6KnOoaWNkbI6FaPSuZGyMArsi7MZoloB4zviI/Nhr3X95jltwTRQmoIfgisy5ai+me67OI7fE4nrqjrqfK1t0eby0FPRB6oGVlchL3rgnfrq19RKbVBdhV9IOSwJmfmJi4vi/4ThERitwyCxVAFqydshuCX5awhQ9KtmuIWd8IDZED/nXT77rvVVv6sHRKwjYi91poqP7Dr+Y6JJ1VSZIMA3wkPNy6bX+o8Bcm0sXMdwM8Fxo0A3xORPaWBp6uPXsmbxCRD0NDL0dOANhVCXy6iAjMcjbcrMt3RITKwdMVRdFo+y5yvkL4eWZ+zHt/ZVD4dEVRNGotpst+dZZZH8k86lqn2pIvT/eqrNfn2xuyqYPZ8mv7s8pfn/8Pybm4TIjanscAAAAASUVORK5CYII=») no-repeat center center; background-size: 64px 64px; position: absolute; height: 100%; width: 100%; opacity: .8; filter: alpha(opacity=80); transition: all 0.2s ease-out; >.youtube .play:hover
Для того, чтобы плеер в виде миниатюры отображался на странице, нужно вставить в ее код с Youtube.
YouTube предоставляет несколько параметров для отображения разных элементов управления в своем плеере:
fpm_start( «true» );
controls: если вы установите 0, то элементы управления не будут отображаться
modestbranding: если вы установите 1, то логотип YouTube не будет отображаться
rel: если вы установите 0, то по завершению ролика не будут отображаться похожие видео
showinfo: если вы установите 0, то подробная информация о видео отображаться не будет
start: время старта видео от начала
vq: если вы установите hd720, то видео будет отображаться в высшем качестве, если такое доступно.
Вот такой вот прием позволяет кардинально уменьшить время загрузки страницы со множеством роликов из YouTube за счет уменьшения самого размера страницы и уменьшения количества запросов, что благотворно скажется не только на юзабилити (посетители не ждут, пока подгрузятся все видео ролики), но и на индексации (Google любит быстрые сайты).
Источник: n-wp.ru
Загрузка страницы как на youtube
WordPress 6 с Нуля до Гуру
Этот курс научит Вас созданию самых разных сайтов на самой популярной в мире CMS — WordPress. Вы увидите установку и настройку локального сервера, разбор каждой настройки, каждой кнопки и каждого пункта меню в панели WordPress.
Также Вы получите и всю практику, поскольку прямо в курсе с нуля создаётся полноценный Интернет-магазин, который затем публикуется в Интернете. И всё это прямо на Ваших глазах.
Помимо уроков к курсу идут упражнения для закрепления материала.
И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.
Уроки и статьи
Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.
Подписаться
Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.
Подписаться
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Мой аккаунт Моя группа
Источник: myrusakov.ru