В Chrome 55 не показывать кнопку «Загрузить» для видео HTML 5 [дубликаты]

139

Я получаю эту кнопку загрузки с тегами <video> в Chrome 55, но не на Chrome 54: Изображение 382

Как удалить это, чтобы никто не мог видеть кнопку загрузки в Chrome 55?

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

Вот мой текущий код:

<video width="512" height="380"  controls>
    <source data-src="mov_bbb.ogg" type="video/mp4">
</video>
  • 0
    @ Макен, я не могу найти решение в интернете. это выглядит как что-то новое
  • 0
    @Makyen проверьте эту ссылку, если вы используете Chrome 55, вы увидите его w3schools.com/html/html5_video.asp
Показать ещё 4 комментария
Теги:
google-chrome
html5-video

8 ответов

131
Лучший ответ

Это решение (из этого поста)

video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}

Обновление 2: новое решение от @Remo

<video width="512" height="380" controls controlsList="nodownload">
    <source data-src="mov_bbb.ogg" type="video/mp4">
</video>
  • 1
    Это может быть решением, но похоже, что оно может изменить больше вещей, чем ожидалось (например, в Safari). См. «Официальный» ответ Chrome: productforums.google.com/forum/#!topic/chrome/1WXSi6BzK9M (надеюсь, что-нибудь они скажут ...)
  • 0
    Приведенный выше код работает точно так же для аудиоэлемента и содержит меньше кода, чем ответ ниже. Хорошо сделано!
Показать ещё 9 комментариев
261

Google добавила новую функцию, поскольку последний ответ был отправлен здесь. Теперь вы можете добавить атрибут controlList, как показано ниже:

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

Здесь вы можете найти все параметры атрибута controllist:

https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist

  • 2
    Здорово, что действительно требовалось
  • 0
    Это должен быть принятый / лучший ответ. Простое и законное решение.
Показать ещё 6 комментариев
56

Начиная с Chrome58 теперь вы можете использовать controlList для удаления элементов управления, которые вы не хотите показывать. Это доступно для тегов <audio> и <video>.

Если вы хотите удалить кнопку загрузки в элементах управления, выполните следующие действия:

<audio controls controlsList="nodownload">
  • 2
    Пользователи могут щелкнуть правой кнопкой мыши ссылку на аудиофайл, чтобы скачать аудиофайл в любом случае. А поскольку скрытая кнопка и скрытый URL кажутся синонимами, было бы полезно, если controlsList="nodownload" также скрывал URL источника аудио. Но сдерживающий эффект этого решения остается.
  • 2
    @noobninja - Вы правы, это решение не запрещает загрузку, а только удаляет загрузку из элементов управления. Предотвращение загрузки всего вместе - это отдельная тема. Я полагаю, что есть вопросы, относящиеся именно к этому, как, например, это .
Показать ещё 4 комментария
12

Это может скрыть кнопку загрузки в Chrome, когда используется HTML5 Audio.

 #aPlayer > audio { width: 100% }
/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
     /* HIDE DOWNLOAD AUDIO BUTTON */
     #aPlayer {
           overflow: hidden;width: 390px; 
    }

    #aPlayer > audio { 
      width: 420px; 
    }
}

/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
    
      #aPlayer {
           overflow: hidden;width: 390px; 
        }

    #aPlayer > audio { width: 420px; }
}
<div id="aPlayer">
 <audio autoplay="autoplay" controls="controls">
  <source src="http://www.stephaniequinn.com/Music/Commercial%20DEMO%20-%2012.mp3" type="audio/mpeg" />
 </audio>
</div>

Изображение 5054

  • 0
    отличный ответ ...
  • 0
    Вопрос был о «видео», а это «аудио». Близко, но на самом деле следует подчеркнуть это или лучше, просто измените это. Кроме того, этот ответ требует от пользователя обернуть аудио в отдельный div или сделать неловкий обходной путь, почему бы просто не заставить его работать для всех аудио и сделать его намного проще в использовании?
3

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

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

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

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

1

Что касается текущей версии Chrome (56), вы еще не можете ее удалить. Решение, предоставленное в других сообщениях, приводит к переполнению некоторой части видео.

Я нашел другое решение - вы можете сделать предыдущую кнопку для перекрытия кнопки загрузки и просто накрыть ее, используя эту технику:

video::-webkit-media-controls-fullscreen-button {
   margin-right: -48px;
   z-index: 10;
   position: relative;
   background: #fafafa;
   background-image: url(https://image.flaticon.com/icons/svg/151/151926.svg);
   background-size: 35%;
   background-position: 50% 50%;
   background-repeat: no-repeat;
}

Пример: https://jsfiddle.net/dk4q6hh2/

PS Вы можете настроить значок, поскольку он, например, только.

  • 0
    По моей настройке ваше решение перекрывает панель управления, а в текущей версии Chrome (также 56) решение с первого ответа работает без нареканий без наложения видео.
  • 0
    Спасибо за отзыв. Я протестировал его в Chrome 56 на Windows, Mac и Android, и он отлично работает. Для экранов с более высокой плотностью может потребоваться небольшая настройка, поскольку размер кнопки на мобильном телефоне составляет 48 пикселей, а на рабочем столе - 32 пикселя.
0

Лучшим способом использования кнопки "загрузить" является использование JavaScript-плееров, таких как Videojs (http://docs.videojs.com/) или MediaElement.js(http://www.mediaelementjs.com/)

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

0

Я решил проблему, закрыв кнопку загрузки аудиоконтроллера прозрачным div, который изменяет символ курсора мыши на "недопустимый".

Div блокирует активацию кнопки загрузки.

Высота: 50 пикселей, Ширина: 35 пикселей, Влево: (document-right -60), Верх: (то же, что и аудиоконтроллер).

Вы должны установить стиль z-индекса для div над z-индексом аудио-контроллера.

См. sapplic.com/jive66 для примера, который работает для chrome на win7 и на win8.

  • 0
    Почему бы просто не сделать ваш div белым, чтобы он скрывал значок загрузки
  • 0
    Я специально выбрал «недопустимый» курсор мыши, чтобы указать, что загрузка запрещена. Простой белый div должен работать одинаково.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню