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

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

Canary Controls

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

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

спасибо!

42
google-chrome html5-video

9 ответов

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

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

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

45

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

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

casting button in Android 4.4 Chrome 55

обновление

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

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

Да, это возможно, по крайней мере на момент написания статьи, вы можете использовать :

<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

разработчики теперь могут настроить элементы управления мультимедиа, такие как кнопки загрузки, полноэкранный режим и remoteplayback. Использование в HTML-код:

<video controls controlsList="nofullscreen nodownload noremote foobar"></video>

существует даже официальный образец страницы:https://googlechrome.github.io/samples/media/controlslist.html

8

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

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

.HTML-код: (глобально)

<body oncontextmenu="return false;">

или вы можете отключить контекстное меню для некоторых элемент:

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

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

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

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

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

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

0

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

для нормального webdevelopment

<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? --> Отладка модус!

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

Дайте мне знать, если это помогло вам!

0

держать его простым.. Вам нужно добавить атрибут controlslist (нижний регистр, непосредственно после элементов управления), и вам нужно установить его значение ="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>

0