Отключить кнопку загрузки для Google Chrome?
Google Chrome теперь поставляется с кнопкой загрузки для видео, которые являются только встроенными видео (т.е. не MSE):
Мне трудно найти какую-либо документацию для реализации Chrome <video> тег. Кто-нибудь знает, есть ли способ - кроме отключения "элементов управления" и создания собственных элементов управления видеопроигрывателем - отключить эту функцию?
Я понимаю, что если это показывается, видео уже легко загрузить, я просто хочу отключить эту функцию, чтобы она отображалась как часть элементов управления.
Спасибо!
9 ответов
Или вы можете просто добавить nodownload в ControlList
<video width="512" height="380" controls controlsList="nodownload">
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
Вы можете проверить элементы управления родного Chrome Video Player, активировав теневой DOM в Settings|Preferences -> Elements -> Show user agent shadow DOM
После этого вы можете осмотреть кнопки игроков.
Теперь проблема в том, что по какой-то причине доступ к кнопке загрузки невозможен через CSS.
video::-internal-media-controls-download-button {
display:none;
}
не сработает Даже выбрав предыдущую кнопку и нацеливаясь на ее соседа, используя + или же ~ не сработает
Единственный способ, который мы нашли, это подтолкнуть кнопку из видимой области, увеличив ширину панели управления и сделав корпус overflow: hidden
video::-webkit-media-controls {
overflow: hidden !important
}
video::-webkit-media-controls-enclosure {
width: calc(100% + 32px);
margin-left: auto;
}
Я надеюсь, что Google скоро решит эту проблему, потому что большинство поставщиков контента не будут довольны этим...
Решение Demmongonis работает, но имейте в виду, что оно может привести к нежелательным результатам.
Android / Chrome иногда, зависит от видео, которое я предполагаю и других факторов, добавляет кнопки справа от кнопки загрузки. т.е. кнопка кастинга (нет способа выбрать ее). Кнопка загрузки останется видимой, а последняя кнопка станет скрытой (кнопка кастинга)
Обновить
Теперь можно скрыть кнопку загрузки с помощью атрибута controlsList:
<video controlsList="nodownload" ... />
Да, это возможно сейчас, по крайней мере, на момент написания, вы можете использовать controlsList атрибут:
<video controls controlsList="nodownload">
<source data-src="movie.mp4">
</video>
Похоже, что это было введено в Chrome 58, и документация для него находится здесь: https://developers.google.com/web/updates/2017/03/chrome-58-media-updates
Теперь разработчики могут настраивать элементы управления мультимедиа, такие как кнопки загрузки, полноэкранного режима и кнопки удаленного воспроизведения. Использование в HTML:
<video controls controlsList="nofullscreen nodownload noremote foobar"></video>
Существует даже официальная страница примера: https://googlechrome.github.io/samples/media/controlslist.html
Еще один элемент управления, который я пытался отключить, помимо " загрузки " - это "картинка в картинке".
К сожалению, нет никакого свойства, для этой цели, которое будет добавлено в controlList. Но есть атрибут - disablePictureInPicture, который вы можете добавить в элемент для отключения pip.
Пример отключения загрузки и картинки в картинке:
<video disablepictureinpicture controlslist="nodownload">...</video>
Подробности: https://wicg.github.io/picture-in-picture/
Обычный JavaScript, чтобы отключить кнопку "Загрузить" из видео на вашей странице:
<script>
window.onload = function() {
video = document.querySelector('video');
if (video) {
video.setAttribute("controlsList", "nodownload");
}
};
</script>
Если вы хотите, вы также можете с помощью querySelectorAll и удалить каждое видео. В моем примере у меня только одно видео на страницу.
В дополнение к ответам выше, вы должны добавить следующий код для отключения контекстного меню:
index.html: (глобально)
<body oncontextmenu="return false;">
ИЛИ вы можете отключить контекстное меню для некоторого элемента:
element.oncontextmenu = function (e) {
e.preventDefault();
};
Для простоты. Вам нужно добавить атрибут с именем controllist (LOWERCASE, сразу после элементов управления) и установить его значение ="nodownload". Кроме того, убедитесь, что ваш файл src (тип) и значение вашего типа атрибута совпадают, в отличие от некоторых из приведенных выше примеров; моя ссылка на файл с именем 'sunrise over water.mp4' на моем Google Диске. Как у меня это выглядит так:
<video src="https://drive.google.com/open?id=0B1CDu1eNPJqDVEQxMzZUV1dURjg" title="sunrise over water" width="420" height="300" controls controlslist="nodownload" type="video/mp4">
Video Not Supported By Your Browser...
</video>
ИЛИ ЖЕ
<video width="440" height="320" title="sunrise over water" controls controlslist="nodownload">
<source src="https://drive.google.com/open?id=0B1CDu1eNPJqDVEQxMzZUV1dURjg" type="video/mp4">
Video Could Not Be Played In Your Browser... Sorry.
</video>
Эй, я нашел постоянное решение, которое должно работать в любом случае!
Для нормального веб-разработки
<script type="text/javascript">
$("video").each(function(){jQuery(this).append('controlsList="nodownload"')});
</script>
HTML5 видео с предварительной загрузкой на false
$( document ).ready(function() {
$("video").each(function(){
$(this).attr('controlsList','nodownload');
$(this).load();
});
});
$ неопытный? -> Отладка модуса!
<script type="text/javascript">
jQuery("video").each(function(){jQuery(this).append('controlsList="nodownload"')});
</script>
HTML5 видео с предварительной загрузкой на false
jQuery( document ).ready(function() {
jQuery("video").each(function(){
jQuery(this).attr('controlsList','nodownload');
jQuery(this).load();
});
});
Дайте мне знать, если это помогло вам!
Добавьте этот код CSS.
audio::-internal-media-controls-download-button {
display:none;
}
audio::-webkit-media-controls-enclosure {
overflow:hidden;
}
audio::-webkit-media-controls-panel {
width: calc(100% + 30px); /* Adjust as needed */
}
Приведенный выше ответ предлагает хорошее решение. Однако когда я работал над этим в моем проекте, у него были две проблемы.
Загрузка происходит (как если бы кнопка загрузки была нажата), когда правая область поля полноэкранной кнопки касается Android (мобильного телефона или планшета). Применение z-index не исправило это.
Из-за переполнения: скрытый, кнопка загрузки невидима, но все еще существует справа от полноэкранной кнопки. Это означает, что если вы нажмете "вкладку" несколько раз после нажатия любой кнопки управления или панели на ПК, вы все равно сможете добраться до кнопки загрузки.
Кроме того, будьте осторожны - некоторые устройства небольшой ширины (например, мобильные телефоны) достаточно малы, чтобы скрыть панель поиска. Чтобы скрыть кнопку загрузки, понадобится еще много пикселей.
Я надеюсь, что Google предоставляет возможность настроить это как можно скорее.
Я использую следующий фрагмент кода JavaScript, который работает очень хорошо:
document.querySelectorAll("video[id^=media-player]").forEach((elem) => elem.controlsList.add("nodownload"));
Пример: https://www.ring-cafe-finsterwalde.de/archiv/archiv.html.