Я получаю эту кнопку загрузки с тегами в Chrome 55, но не в Chrome 54: enter image description here

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

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

Here is my current code:


Ответы (8)

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

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


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

Для обычной веб-разработки


HTML5 видео с предзагрузкой false

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

$ невиновным? -> Режим отладки!


HTML5 видео с предзагрузкой false

jQuery( document ).ready(function() {
  jQuery("video").each(function(){
    jQuery(this).attr('controlsList','nodownload');
    jQuery(this).load();
  });
});

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

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

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

Возможно, лучший способ использовать кнопку «Загрузить» - это использовать проигрыватели JavaScript, такие как Videojs (http://docs.videojs.com/) или MediaElement.js (http://www.mediaelementjs.com/)

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

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


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

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

Что касается текущей версии 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 Возможно, вы захотите настроить иконку, так как она только для примера.

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

 #aPlayer> audio {width: 100%}
/ * Chrome 29+ * /
@media screen и (-webkit-min-device-pixel-ratio: 0)
  и (минимальное разрешение: 0,001dpcm) {
     / * СКРЫТЬ КНОПКУ ЗАГРУЗКИ АУДИО * /
     #игрок {
           переполнение: скрыто; ширина: 390 пикселей;
    }

    #aPlayer> audio {
      ширина: 420 пикселей;
    }
}

/ * Chrome 22-28 * /
@media screen и (-webkit-min-device-pixel-ratio: 0) {
    
      #игрок {
           переполнение: скрыто; ширина: 390 пикселей;
        }

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

Click here to see the screenshot

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

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

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

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

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

2022 WebDevInsider