Iframe: псевдо-полноэкранный режим на iOS
На iOS устройствах при переходе в полноэкранный режим браузер использует нативный полноэкранный API, который может конфликтовать с элементами управления плеера Kinescope. Этот скрипт решает проблему: он сохраняет оригинальные элементы управления и корректно работает с динамическими водяными знаками.
Кому подходит эта статья
- Разработчикам веб-приложений — нужно обеспечить корректную работу полноэкранного режима на iOS
- Владельцам контента с водяными знаками — требуется корректное отображение динамических водяных знаков на iOS
- Frontend-разработчикам — нужно настроить поведение плеера на мобильных устройствах
Когда вам нужен псевдо-полноэкранный режим на iOS
Используйте этот код, если:
- Динамические водяные знаки на iOS — нужно, чтобы водяные знаки корректно отображались в полноэкранном режиме
- Сохранение элементов управления — важно, чтобы оригинальные элементы управления плеера оставались доступными
- Корректная работа на iOS — требуется правильное поведение полноэкранного режима на iOS устройствах (Safari, Chrome для iOS)
Как работает скрипт (3 шага)
- Плеер отправляет событие — когда пользователь переходит в полноэкранный режим или выходит из него, плеер отправляет событие
KINESCOPE_PLAYER_FULLSCREEN_CHANGE. - Скрипт обрабатывает событие — сохраняет текущие стили iframe и применяет стили для полноэкранного отображения (или восстанавливает оригинальные).
- Элементы управления сохраняются — оригинальные элементы управления плеера остаются доступными, динамические водяные знаки работают корректно.
Теперь разберём, как это настроить.
Настройка: шаг 1 — добавление скрипта на страницу
Разместите скрипт на странице, где встроен плеер Kinescope, перед закрывающим тегом </body> или в секции <head>. Скрипт автоматически обработает все iframe с плеерами Kinescope на странице.
Пример размещения в HTML:
<!DOCTYPE html>
<html>
<head>
<title>Страница с плеером Kinescope</title>
</head>
<body>
<!-- Ваш контент -->
<iframe src="https://kinescope.io/embed/pcFNnQGsD59CMKte2SQQaz" width="640" height="360" frameborder="0"></iframe>
<!-- Скрипт для iOS полноэкранного режима -->
<script>
// Код скрипта здесь
</script>
</body>
</html>
DOMContentLoaded для инициализации, если размещаете скрипт в <head>.Настройка: шаг 2 — код скрипта
Вот готовый код, который можно использовать на вашей странице:
window.addEventListener('message', (event) => {
if (event.data.type && event.data.type === 'KINESCOPE_PLAYER_FULLSCREEN_CHANGE') {
const frames = document.getElementsByTagName('iframe');
for (let i = 0; i < frames.length; i++) {
if (frames[i].contentWindow === event.source) {
// Сохраняем текущие стили iframe
if (event.data.value) {
// Сохраняем оригинальные стили
if (!frames[i].dataset.originalStyles) {
frames[i].dataset.originalStyles = frames[i].style.cssText;
}
// Применяем стили для полноэкранного режима
frames[i].style.cssText = `
background: #000;
border: none;
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
bottom: 0;
right: 0;
top: 0;
left: 0;`;
} else {
// Возвращаем старые стили, если они были сохранены
if (frames[i].dataset.originalStyles) {
frames[i].style.cssText = frames[i].dataset.originalStyles;
delete frames[i].dataset.originalStyles;
} else {
frames[i].style.cssText = '';
}
}
break;
}
}
}
});
Как это работает (подробнее)
Вот что происходит, когда пользователь открывает страницу с плеером:
- Пользователь заходит на страницу — скрипт начинает отслеживать события от всех iframe на странице.
- Пользователь переходит в полноэкранный режим — плеер Kinescope отправляет событие
KINESCOPE_PLAYER_FULLSCREEN_CHANGEсvalue: true. - Скрипт обрабатывает событие — находит нужный iframe по источнику события, сохраняет его текущие стили и применяет стили для полноэкранного отображения.
- Пользователь выходит из полноэкранного режима — плеер отправляет событие с
value: false, скрипт восстанавливает оригинальные стили iframe.
Событие KINESCOPE_PLAYER_FULLSCREEN_CHANGE
Плеер Kinescope автоматически отправляет это событие через window.postMessage, когда:
- Пользователь переходит в полноэкранный режим (
event.data.value === true) - Пользователь выходит из полноэкранного режима (
event.data.value === false)
Формат события:
{
type: 'KINESCOPE_PLAYER_FULLSCREEN_CHANGE',
value: true // или false
}
Управление стилями iframe
При входе в полноэкранный режим:
- Сохраняются текущие стили iframe в
dataset.originalStyles(чтобы потом восстановить) - Применяются стили для полноэкранного отображения:
- Фиксированная позиция (
position: fixed) — iframe остаётся на месте при прокрутке - Полный размер экрана (
width: 100%,height: 100%) — занимает весь экран - Высокий z-index (
z-index: 9999) — iframe поверх других элементов - Чёрный фон (
background: #000) — для корректного отображения
- Фиксированная позиция (
При выходе из полноэкранного режима:
- Восстанавливаются оригинальные стили iframe из
dataset.originalStyles - Удаляются сохранённые стили из
dataset
Безопасность
Скрипт проверяет, что событие исходит от корректного iframe (event.source совпадает с contentWindow iframe). Это обеспечивает безопасность при работе с несколькими iframe на странице — каждый iframe обрабатывается независимо.
Как это работает:
1. Получаем событие от iframe
2. Проверяем: event.source === iframe.contentWindow
3. Если совпадает — обрабатываем событие
4. Если не совпадает — игнорируем
Примеры использования
Пример 1: Простая интеграция
Если у вас один плеер на странице, код выше будет работать “из коробки”:
<iframe src="https://kinescope.io/embed/pcFNnQGsD59CMKte2SQQaz" width="640" height="360" frameborder="0"></iframe>
<script>
// Код обработки полноэкранного режима
</script>
Пример 2: Несколько плееров на странице
Если на странице несколько плееров, скрипт автоматически обработает каждый из них независимо:
<iframe src="https://kinescope.io/embed/video1" id="player1" width="640" height="360"></iframe>
<iframe src="https://kinescope.io/embed/video2" id="player2" width="640" height="360"></iframe>
<script>
// Код обработает оба плеера независимо
</script>
Пример 3: Использование с фреймворками
Если вы используете React, Vue или другой фреймворк, разместите скрипт в компоненте, который монтируется после загрузки DOM:
React:
import { useEffect } from 'react';
function VideoPlayer() {
useEffect(() => {
// Код обработки полноэкранного режима
// ... (вставьте код из шага 2)
}, []);
return <iframe src="https://kinescope.io/embed/pcFNnQGsD59CMKte2SQQaz" />;
}
Vue:
export default {
mounted() {
// Код обработки полноэкранного режима
// ... (вставьте код из шага 2)
}
}
Всё! Теперь на iOS устройствах полноэкранный режим будет работать корректно, а элементы управления плеера сохранятся.
Что дальше?
После настройки псевдо-полноэкранного режима рекомендуем:
- Встраивание — базовое встраивание плеера
- IFrame Player API — программное управление плеером
- Динамические водяные знаки — настройка водяных знаков для защиты контента
Остались вопросы? Напишите в чат поддержки — специалисты помогут!