Мы очень усердно работали над выпуском новой версии Video.js и недавно released v10.0.0! Поэтому на выходных я решил немного расслабиться за сторонним проектом: изучением веб-API, к которым у нас будет доступ на iPhone Duo.
Знаю-знаю, подобные раскладные штуки уже много лет существуют на Android. Но я пользуюсь iOS с тех пор, как мой любимый HTC One умер более десяти лет назад. И вот теперь Тим Джон Эппл наконец соизволил разрешить мне сложить телефон пополам.
И я рад этой возможности. Не только из-за радости снова подержать в руках маленький телефон (iPhone mini, я скучаю 🥺). Но и из-за того, что это значит для разработчиков. Apple выпустила шесть видеороликов о создании отличных приложений для iPhone Duo. В этих видео рассказывается об API, которые сообщают о физических характеристиках и состоянии устройства, и они полны вдохновения для создания приложений и взаимодействий нового типа.
Но ведь это Apple. Оставила ли она хоть какие-то крохи для нас, веб-разработчиков?
LinkКакие веб-API доступны для iPhone Duo?
Скачав Xcode 27.1 beta, я сразу же задействовал симулятор Device Hub, запустил iPhone Duo, направился прямиком в настройки и углубился в флаги функций.
Я обожаю флаги функций. Этот список — настоящая сокровищница будущего интернета; классных возможностей, с которыми мы, возможно, когда-нибудь сможем поиграть. Я делаю паузу и заглядываю в некоторые по пути. Например, что за черт такой эти CSS Rhythmic Sizing??
Но нет. Я должен сосредоточиться. Я здесь ради двух конкретных вещей. И после небольшой прокрутки я нахожу их. Device Posture API и Viewport Segment API.
LinkAPI ориентации устройства (Device Posture API)
Device Posture API по сути говорит вам, является ли дисплей непрерывным (например, ваш обычный экран, плоский или изогнутый, такой банальный для 2018 года) или согнутым (например, складной телефон в частично сложенном виде, как ноутбук). Это работает в JavaScript — navigator.devicePosture — или в CSS — @media (device-posture: folded).
LinkAPI сегментов области просмотра (Viewport Segments API)
Viewport Segments API сообщает вам об отдельных областях вашего дисплея. В JavaScript window.viewport.segments возвращает массив объектов DOMRects, содержащих информацию о размере, форме и расположении сегментов.
В CSS вы можете узнать о сегментах двумя способами. Во-первых, @media (horizontal-viewport-segments: n) и @media (vertical-viewport-segments: n) позволяют реагировать на количество (вы угадали) горизонтальных и вертикальных сегментов области просмотра. Во-вторых, вы можете получить доступ к позиции и размеру любого сегмента с помощью переменных среды CSS. Хотите узнать ширину верхнего правого сегмента? env(viewport-segment-width 1 0) поможет вам в этом. (Первый номер — горизонтальный индекс, второй — вертикальный).
Допустим, у вас есть двухколоночный макет на весь экран, который вы хотите привязать к сегментам при складывании экрана, чтобы ваш контент не попадал на сгиб. Вы можете написать что-то вроде этого...
css
Что создаст эффект вроде этого
LinkСоздание веб-видеоплеера для складных телефонов
Хорошо, это все прекрасно, но позвольте мне рассказать, зачем мы здесь на самом деле. После медиамероприятия Apple я видел, как несколько человек тестировали новое приложение Netflix для iPhone Duo, и плеер в сложенном виде выглядел просто потрясающе. Видео в верхней половине, элементы управления внизу и тонкий эффект отражения видео на нижнем экране.
Потратив год на работу над Video.js, моей первой мыслью, очевидно, было: «А сможем ли мы так сделать?»
Короткий ответ: «нет». Несмотря на то, что открытый Duo в целом похож на iPad, Apple по-прежнему не разрешает выводить наши элементы в полноэкранный режим. Мы заперты с нативными элементами управления.
Но это скучный конец для поста в блоге. И по какой-то причине Fullscreen API доступен в качестве флага функций. Так что я захожу и включаю его... и...
О боже, неужели это элементы управления Video.js на весь экран на iPhone Duo?! Не думаю, что требуется много воображения, чтобы догадаться, что будет дальше.
Давайте проверим, смогу ли я воссоздать интерфейс Netflix с помощью компонентов Video.js и CSS.
LinkРазмещение элементов управления на нижнем экране
Я начинаю с того, что беру Video.js skin with the shadcn CLI и добавляю в него совершенно новый раздел.
components
/videojs
/video
/skin.html
Мне также нужны некоторые дополнительные элементы управления и значки, чтобы соответствовать интерфейсу Netflix, поэтому я добавляю еще немного JS:
duo-controls.ts
И что дальше? Если вы были внимательны, этот CSS не должен вызывать у вас сильного удивления. Мы проверяем, находимся ли мы в вертикальном сложенном состоянии, и позиционируем видео и элементы управления. (Сноска: Раскрываю карты. Не все работало так, как я ожидал. При позиционировании верхнего контента свойство bottom: env(viewport-segment-bottom 0 0) поместило видео прямо на стык. Между тем, при позиционировании элементов управления высота height: env(viewport-segment-height 0 1) заставила контент улететь далеко за нижнюю границу экрана. Не уверен почему. Если вы знаете, что я упустил, дайте мне знать!)
duo-controls.css
И вуаля! Если не обращать внимания на пользовательские элементы управления полноэкранным режимом, которые Apple рисует наверху, можно почти представить, что это нативное приложение.
LinkОтражение видео на нижнем экране
Раз уж мы здесь, давайте зайдем еще дальше. Видео Netflix «отражается» на нижний экран. Можем ли мы сделать то же самое?
Сначала я пробую -webkit-box-reflect, который с радостью отражает обычные DOM-элементы, но, к сожалению, не <video>. По крайней мере, не в iOS Safari. Затем я вспоминаю, что один из моих коллег создал версию Mux Player, которая имитирует окружающий режим (Ambient Mode) YouTube.
Суть в следующем. Сначала мы копируем каждый кадр на крошечный холст (canvas):
javascript
Затем мы переворачиваем этот холст, размываем его и делаем плавное затухание:
javascript
И вот оно. Мягкое свечение позади элементов управления.
LinkИ на этой сенсационной ноте...
Примерно в этот момент я вспоминаю, что мне пришлось включить три флага функций, чтобы добраться сюда. И хотя я могу представить, что Apple включит Viewport Segments API и Device Posture API, гораздо труднее представить появление Fullscreen API, учитывая эргономические проблемы и проблемы с энергопотреблением, которые, вероятно, волнуют Apple.
Конечно, как бы фанаты (вроде меня, честно говоря) ни хотели делать вид, что это не так, существует целая экосистема фантастических складных телефонов на Android. Так что давайте попробуем запустить это на эмуляторе Pixel 9 Pro Fold, который у меня валяется... Под управлением Chromium 157...
Нет. Несмотря на то, что медиазапрос CSS сообщает о правильной ориентации и сегментах, Chromium отображает полноэкранный контент только в верхней половине. Нижняя часть обрезается, intentionally.
Итак. И на iPhone Duo, и на Pixel Fold интерфейс Netflix остается лишь мечтой.
Ну и ладно. Я все равно рад, что мы подобрались довольно близко. И в конце концов, это все равно превратилось в пост о запуске Video.js v10. Мне нравится, что наша новая компоруемая архитектура позволила мне представить видеоплеер и просто собрать его с помощью простого HTML/CSS. Довольно круто.
