Настроить подгрузку превью и описания с ВК Видео через VK API на сайт
7
Здравствуйте!
На просторах нашли код для отложенной загрузки iframe (закгрузка по клику).
Но он не выполняет все необходимые функции.
Требуется написать парсер для загрузки превью и описания (названия) к видео для последующей публикации на сайте.
Связь со мной:
whatsapp
telegram
На просторах нашли код для отложенной загрузки iframe (закгрузка по клику).
Но он не выполняет все необходимые функции.
// заменяем iframe vk видео заглушкой, чтобы страница быстрее грузилась, при клике подгружается iframe с autoplay
document.addEventListener("DOMContentLoaded", function() {
// Ищем все iframe с классом "vk-video"
const iframes = document.querySelectorAll("iframe.vk-video");
iframes.forEach(function(iframe) {
// Получаем URL для подгрузки видео
let videoSrc = iframe.dataset.src;
// Добавляем параметр autoplay=1
videoSrc += "&autoplay=1";
// Создаем контейнер для превью
const previewContainer = document.createElement("div");
previewContainer.className = "videoplayer_thumb";
// Получаем изображение записи (предполагается, что это изображение на странице)
const featuredImage = document.querySelector('meta[property="og:image"]');
const previewImageUrl = featuredImage ? featuredImage.content : ""; // Получаем URL изображения
// Устанавливаем изображение записи как фон для превью, если оно существует
if (previewImageUrl) {
previewContainer.style.backgroundImage = `url(${previewImageUrl})`;
} else {
// Устанавливаем заглушку, если изображение не найдено
previewContainer.style.backgroundImage = `url('https://*******/*******.webp')`; // Укажите путь к вашей заглушке
}
// Создаем контейнер для иконки плей
const playIconContainer = document.createElement("div");
playIconContainer.className = "play-icon-container";
// Вставляем вашу SVG-иконку
const playIcon = document.createElement("div");
playIcon.className = "play-icon";
playIcon.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="#ffffff" viewBox="0 0 256 256"><path d="M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z"></path></svg>
`;
// Добавляем иконку в контейнер
playIconContainer.appendChild(playIcon);
previewContainer.appendChild(playIconContainer);
// Заменяем iframe на контейнер с превью
iframe.parentNode.replaceChild(previewContainer, iframe);
// Добавляем событие клика на превью
previewContainer.addEventListener("click", function() {
// Восстанавливаем iframe с автозапуском
const newIframe = document.createElement("iframe");
newIframe.src = videoSrc;
newIframe.width = iframe.width;
newIframe.height = iframe.height;
newIframe.allow = iframe.allow;
newIframe.frameborder = iframe.frameborder;
newIframe.allowFullscreen = iframe.allowFullscreen;
newIframe.className = iframe.className;
previewContainer.parentNode.replaceChild(newIframe, previewContainer);
});
});
});Но данный код не позволяет подгружать обложки (превью) с VK video и название или описание к видео… Требуется написать парсер для загрузки превью и описания (названия) к видео для последующей публикации на сайте.
Связь со мной:
telegram
Комментарии в этом разделе отключены, так что вы должны указать свои контакты прямо в объявлении, или активировать отправку сообщений из профиля.
Обратите внимание, что modx.pro не несёт никакой ответственности за выполнение работы или оплату заказа. Это просто доска объявлений, дальше вы общаетесь за пределами нашей площадки.