Как справиться с отсутствием поддержки альфа-видео в Safari на Mac?

Содержание

Вопрос или проблема
Ответ или решение
Шаги для временного отключения видео с альфа-каналом в Safari на macOS:
Завершение:

Вопрос или проблема

У меня есть сайт с видео с альфа-каналом. Это работает отлично во всех браузерах и на всех платформах, кроме устройств Apple с Safari. Это происходит потому, что, по какой-то причине, Apple не удосужился реализовать поддержку видео с альфа-каналом с кодеком VP9 и контейнером WebM, комбинация, которая в остальном поддерживается повсеместно.

Я нашел инструкции в интернете о том, как использовать HEVC (H.265) с поддержкой альфа-канала, чтобы сделать тот же подход работающим в Safari на устройстве Apple, но мне не удалось заставить это работать. В своих тестах я заметил, что независимо от того, что я делаю, он игнорирует видео MOV или MP4 с кодеком hvc1 и вместо этого воспроизводит файл WebM. Без альфа-канала видео закрывает прямоугольную область вместо того, чтобы затрагивать только желаемые пиксели.

На данный момент я хочу временно сделать так, чтобы сайт просто не пытался это делать в Safari на Mac, пока не выясню, как это исправить. Как же мне это сделать? Куда бы я ни пошел, все говорят: “тестируйте на наличие функции, а не браузера” – это все хорошо, но в данном случае “функция” на самом деле представляет собой ошибку браузера, и я не верю, что есть способ протестировать её напрямую из JavaScript. Строки User Agent практически бесполезны, потому что все, что основано на Chrome, кажется, утверждает, что это Safari (и все остальное) – это, похоже, сознательная попытка Google (в основном успешная?) убить возможность определения того, в каком браузере открыта страница.

Как я могу обнаружить конкретно комбинацию Safari на устройстве Apple и избежать включения визуальной композиции, которая дает катастрофические результаты?

В качестве примечания, если кто-то хочет подойти к этому с другой стороны и попробовать просто заставить видео с альфа-каналом работать, у меня есть отдельный вопрос на Video exchange:

https://video.stackexchange.com/questions/37745/how-to-encode-hevc-with-alpha-without-a-mac

Ответ или решение

Для решения проблемы с тем, что Safari на macOS не поддерживает видео с альфа-каналом, можно использовать несколько подходов. Учитывая, что вы хотите временно отключить воспроизведение видео с альфа-каналом для Safari на устройствах Apple, наиболее эффективным будет проверка пользовательского агента и использование функции matchMedia для определения устройства.

Шаги для временного отключения видео с альфа-каналом в Safari на macOS:

Проверка пользовательского агента:
Хотя пользовательские агенты могут быть ненадежными, мы все же можем использовать их для определения, является ли устройство Apple на базе Safari. Пример ниже демонстрирует, как можно проверить это на JavaScript:

function isSafariOnMac() {
   const userAgent = navigator.userAgent;
   const isSafari = /constructor/i.test(window.HTMLElement) || 
                    (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window.safari || (typeof window.safari !== "undefined" && window.safari.pushNotification));
   const isMac = navigator.platform.toLowerCase().indexOf('mac') > -1;
   return isSafari && isMac;
}

if (isSafariOnMac()) {
   // Здесь временно отключаем видео с альфа-каналом
   document.getElementById("alpha-video").style.display = "none"; // Уберите или замените на заглушку
}

Замена видео:
Если у вас есть видео с альфа-каналом и обычное видео для всех остальных браузеров, вы можете использовать простой HTML и JavaScript для отображения правильной версии видео:

<video id="alpha-video" controls>
   <source src="video_with_alpha.webm" type="video/webm">
   <source src="video_without_alpha.mp4" type="video/mp4">
   Ваш браузер не поддерживает видео.
</video>

<script>
   if (isSafariOnMac()) {
       // Прятать видео с альфа-каналом и показывать заглушку
       const alphaVideo = document.getElementById("alpha-video");
       alphaVideo.style.display = "none"; // или alphaVideo.remove(); чтобы удалить его
       // Можете добавить HTML-контент или другое видео без альфа-канала
   }
</script>

Замена видео-элемента:
В качестве альтернативы, вы можете полностью заменить видеоэлемент в коде при обнаружении Safari на Mac:

if (isSafariOnMac()) {
   const videoContainer = document.getElementById("video-container");
   videoContainer.innerHTML = '<video controls><source src="video_without_alpha.mp4" type="video/mp4">Ваш браузер не поддерживает видео.</video>';
}

Завершение:

Эти подходы позволят вам временно предотвратить использование видео с альфа-каналом на устройствах macOS с Safari. На более позднем этапе можно будет разрабатывать решение для поддержки HEVC с альфа-каналом, как вы указали, но для текущих потребностей вышеуказанные рекомендации помогут сохранить функциональность вашего сайта на других платформах.

Если у вас возникнут дополнительные вопросы или сложности с реализацией, не стесняйтесь спрашивать.