Відео дуже важливе для інформативності сайтів, покращення поведінкових факторів та конверсії. Логічно, що розробники та вебмайстри прагнуть використати цей тип контенту на 100%.
HTML5 відкрив нові можливості для вбудовування відео завдяки підтримці нативного відео. Проте, стандартні елементи керування, що пропонують браузери, часто не задовольняють потреби розробників у гнучкості та індивідуалізації. Саме тому створення власного відеоплеєра за допомогою HTML5 та JavaScript є відмінним рішенням. Це дозволяє не тільки підлаштовувати плеєр під індивідуальні потреби, але й інтегрувати його у загальний дизайн сайту. У цій статті ми розглянемо процес створення власного відеоплеєра з можливостями керування відтворенням, регулюванням гучності та переглядом на повний екран.
Крок 1: Створення HTML структури
На першому етапі необхідно визначити базову структуру нашого відеоплеєра у HTML. Нам знадобиться контейнер для самого відео та окремий контейнер для елементів керування.
<div id="video-player">
<video id="video" src="path/to/your-video.mp4" type="video/mp4"></video>
<div id="video-controls">
<button id="play-pause">Відтворити</button>
<input type="range" id="volume-control" min="0" max="1" step="0.01" value="1">
<button id="fullscreen">На весь екран</button>
</div>
</div>
Крок 2: Стилізація плеєра
Перед тим, як перейти до JavaScript, додамо базові стилі, щоб наш відеоплеєр виглядав більш привабливо.
#video-player {
max-width: 640px;
margin: auto;
position: relative;
}
#video-controls {
position: absolute;
bottom: 5px;
background-color: rgba(0,0,0,0.5);
width: 100%;
padding: 10px;
display: flex;
justify-content: space-between;
}
button {
cursor: pointer;
background-color: #444;
border: none;
color: white;
padding: 5px 10px;
}
input[type="range"] {
width: 30%;
}
Крок 3: Додавання функціоналу за допомогою JavaScript
Тепер оживимо наш відеоплеєр за допомогою JavaScript, додавши функціональність кнопок відтворення/паузи, регулювання гучності та переключення на повний екран.
Кнопка відтворення/паузи
const video = document.getElementById('video');
const playPauseBtn = document.getElementById('play-pause');
playPauseBtn.addEventListener('click', function() {
if (video.paused) {
video.play();
playPauseBtn.textContent = 'Пауза';
} else {
video.pause();
playPauseBtn.textContent = 'Відтворити';
}
});
Регулювання гучності
Звісно ж плеєр не буде повноцінним без можливості регулювати гучність. Ось як це можна реалізувати
const volumeControl = document.getElementById('volume-control');
volumeControl.addEventListener('input', function() {
video.volume = this.value;
});
Перехід на повний екран
const fullscreenBtn = document.getElementById('fullscreen');
fullscreenBtn.addEventListener('click', function() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) { /* Firefox */
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
video.webkitRequestFullscreen();
} else if (video.msRequestFullscreen) { /* IE/Edge */
video.msRequestFullscreen();
}
});
Основні складові готові, час перейти до інтеграції плеєра на сайт.
Інтеграція власного відеоплеєра у WordPress
Щоб додати плеєр і переконатись, що він працює, зробимо наступне.
Крок 1: Додавання файлів відеоплеєра до теми
Щоб інтегрувати власний відеоплеєр у WordPress-сайт, перш за все, потрібно зберегти ваші HTML, CSS та JavaScript коди відеоплеєра. Ось як це можна зробити:
Збереження HTML коду:
HTML код вашого відеоплеєра можна розмістити безпосередньо у файлі теми, де ви хочете відобразити плеєр. Наприклад, якщо ви хочете, щоб плеєр з'являвся на певній сторінці або у певному місці вашого сайту, ви можете додати HTML код у відповідний шаблон теми (page.php, single.php, footer.php тощо) або у віджет "Власний HTML" у сайдбарі чи футері.
Додавання CSS:
Стилі для вашого відеоплеєра краще зберегти у окремому CSS файлі. Створіть файл, наприклад, з назвою video-player.css, і розмістіть його у директорії вашої теми, зазвичай /wp-content/themes/your-theme/css/. Це дозволить легко керувати стилями відеоплеєра та при необхідності швидко вносити зміни.
Додавання JavaScript:
Аналогічно, JavaScript код відеоплеєра слід зберегти у окремому файлі, наприклад, video-player.js, і розмістити його у директорії вашої теми, зазвичай /wp-content/themes/your-theme/js/. Це забезпечить правильне підключення скриптів і їх легке оновлення.
Важливо пам'ятати:
Після додавання файлів у вашу тему, вам потрібно буде "підключити" ці стилі та скрипти до WordPress, щоб вони коректно працювали на вашому сайті. Це робиться шляхом додавання відповідних функцій до файла functions.php вашої теми, які "enqueue" або реєструють ваші CSS та JavaScript файли. Опис цього процесу буде в наступних кроках.
Розміщення коду відеоплеєра безпосередньо у темі WordPress забезпечує більшу гнучкість та контроль над тим, як і де відеоплеєр відображається на вашому сайті, а також дозволяє легко вносити зміни та оновлення.
Крок 2: Підключення стилів та скриптів у WordPress
Використовуйте functions.php файл вашої теми для того, щоб підключити CSS та JavaScript файли, використовуючи функцію wp_enqueue_script та wp_enqueue_style.
Крок 3: Вставка HTML коду відеоплеєра
Вставте HTML код вашого відеоплеєра безпосередньо у редактор WordPress у місці, де ви хочете, щоб відеоплеєр з'явився.
Крок 4: Кастомізація та тестування
Після інтеграції власного відеоплеєра у WordPress, настав час адаптувати його під ваші потреби та протестувати на різних пристроях та у різних браузерах.
Зручний хостинг для ваших сайтів на WordPress
Шукаєте хороший хостинг для ваших сайтів на WordPress? Зверніть увагу на Host4Biz. Це надійний хостинг з сучасними серверами в Європі та українською командою.
А за промокодом MYHOST10 ви отримаєте знижку в 10% на першу оплату. Для цього реєструйтесь за посиланням та введіть код перед оплатою.
Висновок
Створення власного відеоплеєра з HTML5 та JavaScript не тільки підвищує якість користувацького досвіду, але й дає розробникам контроль над візуальним представленням та функціональністю відеоконтенту. Використовуючи наведені вище кроки, ви зможете інтегрувати власний відеоплеєр у WordPress, забезпечуючи високий рівень індивідуалізації та інтерактивності вашого сайту.
