Удаление кнопки скачивания в HTML 5 видео в Chrome 55

Быстрый ответ

Чтобы скрыть кнопку скачивания в HTML5 видео в браузере Chrome, можно применить следующий код CSS:

/* Прощайте, кнопка скачивания. */
video::-webkit-media-controls-enclosure {
    overflow: hidden;
}

/* Смещаем кнопку скачивания далее от поля зрения. */
video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Прощайте, 30 пикселей вправо. */
}

Этот метод работает путем вытеснения элементов управления за пределы области видимости на 30 пикселей вправо.

На помощь приходит атрибут controlsList

Со введением Chrome 58 появился атрибут controlsList, который предлагает совершенное решение для скрытия нежелательной кнопки:

<!-- Давайте знакомиться: controlsList, он строг, но справедлив. -->
<video controls controlsList="nodownload">
  <source src="video.mp4" type="video/mp4">
  Ваш браузер не поддерживает видео.
</video>

Кнопка скачивания исчезает благодаря значению "nodownload" атрибута controlsList.

Активация ваших CSS-навыков

Используя псевдоэлементы ::-webkit-media-controls-*, вы можете тонко настроить элементы управления медиаконтентом, привнеся в вид плеера индивидуальность.

Динамическое применение с использованием jQuery

jQuery может быть полезен для динамического добавления атрибута controlsList после полной загрузки страницы:

$(document).ready(function() {
    /* jQuery применяет видео "без скачивания" ко всем доступным. */
    $('video').attr('controlsList', 'nodownload');
});

Этот код обеспечивает единообразие настроек для всех видеофрагментов на сайте.

Участие старых версий браузеров

Узнайте о способах обхода проблем в браузерах типа IE, которые могут не поддерживать предложенные методы.

UX перед UI

Не забывайте, что защита контента от скачивания не должна навредить удобству использования сервиса пользователем.

Визуализация

Давайте взглянем на визуализацию процесса удаления кнопки "Скачать" с помощью CSS:

До: 🎬👀🔽 (Пользователи видят кнопку скачивания и могут скачать видео)

Применение CSS делает процесс скачивания неприступным, словно он происходит на закрытом вечернике:

<video controls>
  <source src="video.mp4" type="video/mp4">
  Ваш браузер не поддерживает видео.
</video>
<style>
  /* Кнопка Скачать в растерянности: "Куда все подевались?" */
  video::-webkit-media-controls-download-button {
    display: none;
  }
</style>

После применения CSS кнопка скачивания становится недоступной:

После: 🎬🚫❌ (Возможен только просмотр видео, скачивание отключено)

Теперь кнопка скачивания скрыта, и видео становится доступно лишь для просмотра.

Список «Что стоит запомнить»

1. Используйте CSS и jQuery как надёжные инструменты для скрытия кнопки скачивания.
2. controlsList помогает обеспечить совместимость с различными браузерами.
3. Удобство использования важнее чем внешний вид элементов управления.
4. Следите за соблюдением авторских прав при использовании новых функций.

Полезные материалы

1. Справочник событий | MDN – Подробное руководство по медиа-событиям для элементов видео.
2. Тег video в HTML – Исчерпывающая документация по тегу video и его настройке.
3. Список политик и управление Chrome Enterprise | Документация – Изучите, как настроить политики браузера Chrome для управления воспроизведением видео.
4. Создание кросс-браузерных ползунков пользовательского интерфейса со стилями CSS | CSS-Tricks – Улучшите элементы видео и их контролы с помощью CSS.