В Chrome 55 запретить показ кнопки загрузки для видео HTML 5

Ответ 1

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

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>

Ответ 2

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

Ответ 3

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

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

<audio controls controlsList="nodownload">

Ответ 4

Это может скрыть кнопку загрузки в 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>

Ответ 5

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

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

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

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

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

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

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

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

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