Ответ 1
или вы можете просто добавить nodownload
в controlList
<video width="512" height="380" controls controlsList="nodownload">
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
Google Chrome теперь отправляется с кнопкой загрузки для видео, которые являются только встроенными видео (то есть не MSE):
Мне сложно найти документацию по внедрению Chrome тега <video>
. Кто-нибудь знает, есть ли способ - отключение "элементов управления" и создание собственных элементов управления проигрывателем - отключение этой функции?
Я понимаю, что, если это показывается, он уже легко загружает видео, я просто хочу отключить эту функциональность, появляясь как часть элементов управления.
Спасибо!
или вы можете просто добавить nodownload
в controlList
<video width="512" height="380" controls controlsList="nodownload">
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
Вы можете проверить элементы управления собственного видеопроигрывателя Chrome, активировав теневую 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 зависит от видео, которое я предполагаю, и других факторов, добавляет кнопки справа от кнопки загрузки. т.е. кнопку каста (нет возможности выбрать ее). Он заставит кнопку загрузки оставаться видимой, а последняя кнопка будет скрыта (кнопка каста)
Обновить
Теперь можно скрыть кнопку загрузки с помощью атрибута controlList:
<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#controlslist
Теперь разработчики могут настраивать средства управления мультимедиа, такие как кнопки загрузки, полноэкранного и удаленного воспроизведения. Использование в HTML:
<video controls controlsList="nofullscreen nodownload noremote foobar"></video>
Существует даже официальная примерная страница: https://googlechrome.github.io/samples/media/controlslist.html
Еще один элемент управления, который я пытался отключить, кроме " скачать " - это "картинка в картинке".
К сожалению, нет никакого свойства для этой цели, которое должно быть добавлено в controlList. Но есть атрибут - disablePictureInPicture, который вы можете добавить к элементу, чтобы отключить пип.
Пример отключения как загрузки, так и изображения в картинке:
<video disablepictureinpicture controlslist="nodownload">...</video>
Подробности: https://wicg.github.io/picture-in-picture/#disable-pip
Привет, я нашел постоянное решение, которое должно работать в каждом случае!
Для нормального веб-разработки
<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();
});
});
$undevinded? → Debug modus!
<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 */
}
В дополнение к вышеприведенным ответам вы должны добавить следующий код для отключения контекстного меню:
index.html: (глобально)
<body oncontextmenu="return false;">
ИЛИ вы можете отключить контекстное меню для элемента :
element.oncontextmenu = function (e) {
e.preventDefault();
};
Вышеприведенный ответ предлагает хорошее решение. Однако, когда я работал над этим в своем проекте, у него было две проблемы.
Загрузка происходит (как если бы кнопка загрузки была нажата), когда область правого поля полноэкранной кнопки касается Android (мобильный или планшет). Применение z-индекса не исправило его.
Из-за переполнения: скрытый, кнопка загрузки невидима, но все еще существует справа от полноэкранной кнопки. Это означает, что когда вы нажимаете "вкладку" несколько раз после нажатия любой кнопки или панели управления на ПК, вы все равно можете нажать кнопку загрузки.
Кроме того, будьте осторожны - некоторые устройства малой ширины (например, мобильные телефоны) достаточно малы, чтобы скрыть строку поиска. Для скрытия кнопки загрузки потребуется гораздо больше пикселей.
Надеюсь, Google предоставит возможность настроить этот вариант как можно скорее.
Чтобы это было просто. Вам нужно добавить атрибут под названием controllist (LOWERCASE, непосредственно после элементов управления), и вам нужно установить его value = "nodownload". Кроме того, убедитесь, что ваш файл src (type) и ваше значение типа атрибута совпадают, в отличие от некоторых из приведенных выше примеров; моя ссылка на файл с именем "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>
Обычный JavaScript, чтобы отключить кнопку "Загрузить" из видео на вашей странице:
<script>
window.onload = function() {
video = document.querySelector('video');
if (video) {
video.setAttribute("controlsList", "nodownload");
}
};
</script>
Если вы хотите, вы также можете с помощью querySelectorAll и удалить каждое видео. В моем примере у меня только одно видео на страницу.