Apple выпускает LivePhotos JavaScript SDK


До сих пор Live Photos от Apple в основном ограничивались вашим iPhone 6S, 6S Plus или SE, поэтому вы были ограничены в том, как вы могли ими делиться. Благодаря новому SDK теперь вы можете добавлять LivePhotos на веб-сайт.

Представленные Apple на прошлогодней конференции WWDC (Всемирная конференция разработчиков) «Живые фотографии» представляют собой комбинацию неподвижного изображения и короткого видео в едином файловом формате и позволяют пользователю делать снимки, которые анимируются, как GIF, для воспроизведения.

В этом видео Том Ханиэндс из Trusted Reviews демонстрирует эту функцию с точки зрения пользователя, где он объясняет, как снимаются несколько секунд видео примерно в тот момент, когда вы делаете снимок:

Воспроизведение на iPhone 6S, 6S Plus или SE использует их поддержку Force Touch. Изначально изображения остаются неподвижными, но когда вы нажимаете на них, дополнительный материал до и после фото воспроизводится вместе со звуком из видео.

Недавно выпущенная библиотека LivePhotoKit JS теперь позволяет разработчикам воспроизводить Live Photos на веб-страницах:

JavaScript API представляет проигрыватель в форме элемента DOM, очень похожего на изображение или видеотег, который может быть настроен с фото- и видеоресурсами и другими параметрами, а его воспроизведение может управляться программно разработчиком-потребителем или через предварительную настройку. предоставленные элементы управления просматривающим конечным пользователем.

Чтобы использовать его, вы сначала встраиваете LivePhotosKit JS, который также доступен через NPM, на свою веб-страницу и включаете строгий режим JavaScript.

После этого вы можете создавать плееры, просто добавляя декларативную разметку в свой HTML. По мере загрузки страницы LivePhotosKit JS определит, какие экземпляры проигрывателя находятся на странице, и инициализирует их. Вы можете использовать любой HTML-тег, поддерживающий дочерние узлы. Затем вы можете указать расположение компонентов фото и видео, установив атрибуты data-photo-src и data-video-src соответственно.

Проигрыватель LivePhotosKit JS поддерживается в следующих браузерах:


Добавить комментарий