Атрибут crossorigin тега <video>

Описание

Атрибут crossorigin определяет, как браузер должен обрабатывать запросы видеофайлов с других доменов (CORS-запросы). Этот атрибут особенно важен, когда видео загружается с другого источника.

Пример использования:
<video crossorigin="anonymous" src="https://example.com/video.mp4" controls> Ваш браузер не поддерживает видео тег. </video>

Значения атрибута:

Значение Описание Когда использовать
anonymous Запросы отправляются без учетных данных Для общедоступных видеоресурсов
use-credentials Запросы отправляются с учетными данными Для защищенных видеоресурсов
(не указан) CORS-запросы не отправляются Когда видео с того же источника

Особенности работы:

  • Влияет на возможность чтения метаданных видео
  • Требуется правильная настройка CORS на сервере
  • Необходим для работы с canvas и WebGL
  • Может влиять на кэширование видео

Пример с разными источниками:

<video crossorigin="anonymous" controls> <source src="https://cdn.example.com/video.mp4" type="video/mp4"> <source src="https://backup.example.com/video.webm" type="video/webm"> </video>

Рекомендации:

  • Всегда используйте для видео с других доменов
  • Для CDN используйте anonymous
  • Проверяйте настройки CORS на сервере
  • Тестируйте в разных браузерах

Ограничения:

  • Требуется поддержка со стороны сервера
  • Может блокироваться политиками безопасности
  • Не решает проблему с autoplay на кросс-доменах

Пример ошибки CORS:

<!-- Без crossorigin или с неправильными настройками сервера --> <video src="https://other-domain.com/video.mp4" controls> Видео не загрузится - CORS ошибка </video>
Важно: Для корректной работы:
  • Сервер должен отправлять правильные CORS-заголовки
  • Для use-credentials нужны специальные настройки
  • Все источники (включая субтитры) должны поддерживать CORS

Настройка сервера (пример для Apache):

# .htaccess <IfModule mod_headers.c> <FilesMatch "\.(mp4|webm)$"> Header set Access-Control-Allow-Origin "*" </FilesMatch> </IfModule>