Отключить кнопку загрузки для Google Chrome?

Google Chrome теперь отправляется с кнопкой загрузки для видео, которые являются только встроенными видео (то есть не MSE):

Canary Controls

Мне сложно найти документацию по внедрению Chrome тега <video>. Кто-нибудь знает, есть ли способ - отключение "элементов управления" и создание собственных элементов управления проигрывателем - отключение этой функции?

Я понимаю, что, если это показывается, он уже легко загружает видео, я просто хочу отключить эту функциональность, появляясь как часть элементов управления.

Спасибо!

Ответ 1

или вы можете просто добавить nodownload в controlList

<video width="512" height="380" controls controlsList="nodownload">
    <source data-src="mov_bbb.ogg" type="video/mp4">
</video>

Ответ 2

Вы можете проверить элементы управления собственного видеопроигрывателя Chrome, активировав теневую DOM в Settings|Preferences -> Elements -> Show user agent shadow DOM

shadow dom

После этого вы можете проверить кнопки игроков.

Player 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 скоро устранит эту проблему, потому что большинство контент-провайдеров не будут довольны этим...

Ответ 3

Решение Demmongonis работает, но помните, что это может привести к нежелательным результатам.

Иногда Android/Chrome зависит от видео, которое я предполагаю, и других факторов, добавляет кнопки справа от кнопки загрузки. т.е. кнопку каста (нет возможности выбрать ее). Он заставит кнопку загрузки оставаться видимой, а последняя кнопка будет скрыта (кнопка каста)

casting button in Android 4.4 Chrome 55

Обновить

Теперь можно скрыть кнопку загрузки с помощью атрибута controlList:

<video controlsList="nodownload" ... />

Ответ 4

Да, это возможно сейчас, по крайней мере, на момент написания, вы можете использовать атрибут 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

Ответ 5

Еще один элемент управления, который я пытался отключить, кроме " скачать " - это "картинка в картинке".

К сожалению, нет никакого свойства для этой цели, которое должно быть добавлено в controlList. Но есть атрибут - disablePictureInPicture, который вы можете добавить к элементу, чтобы отключить пип.

Пример отключения как загрузки, так и изображения в картинке:

<video disablepictureinpicture controlslist="nodownload">...</video>

Подробности: https://wicg.github.io/picture-in-picture/#disable-pip

Ответ 6

Привет, я нашел постоянное решение, которое должно работать в каждом случае!

Для нормального веб-разработки

<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();
  });
});

Сообщите мне, помогло ли вам!

Ответ 7

Добавьте этот код 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 */
}

Ответ 8

В дополнение к вышеприведенным ответам вы должны добавить следующий код для отключения контекстного меню:

index.html: (глобально)

<body oncontextmenu="return false;">

ИЛИ вы можете отключить контекстное меню для элемента :

element.oncontextmenu = function (e) {
    e.preventDefault();
};

Ответ 9

Вышеприведенный ответ предлагает хорошее решение. Однако, когда я работал над этим в своем проекте, у него было две проблемы.

  • Загрузка происходит (как если бы кнопка загрузки была нажата), когда область правого поля полноэкранной кнопки касается Android (мобильный или планшет). Применение z-индекса не исправило его.

  • Из-за переполнения: скрытый, кнопка загрузки невидима, но все еще существует справа от полноэкранной кнопки. Это означает, что когда вы нажимаете "вкладку" несколько раз после нажатия любой кнопки или панели управления на ПК, вы все равно можете нажать кнопку загрузки.

Кроме того, будьте осторожны - некоторые устройства малой ширины (например, мобильные телефоны) достаточно малы, чтобы скрыть строку поиска. Для скрытия кнопки загрузки потребуется гораздо больше пикселей.

Надеюсь, Google предоставит возможность настроить этот вариант как можно скорее.

Ответ 10

Чтобы это было просто. Вам нужно добавить атрибут под названием 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>

Ответ 11

Обычный JavaScript, чтобы отключить кнопку "Загрузить" из видео на вашей странице:

<script>
    window.onload = function() {
        video = document.querySelector('video');
        if (video) {
           video.setAttribute("controlsList", "nodownload");
        }
    };
</script>

Если вы хотите, вы также можете с помощью querySelectorAll и удалить каждое видео. В моем примере у меня только одно видео на страницу.