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

этот вопрос уже есть ответ здесь:

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

Я получаю эту кнопку Скачать с <video> теги в Chrome 55, но не на Chrome 54:

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

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

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

<video width="512" height="380"  controls>
    <source data-src="mov_bbb.ogg" type="video/mp4">
</video>
8 130
html google-chrome html5 html5-video

8 ответов:

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

226

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

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 */
}
135

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

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

<audio controls controlsList="nodownload">
50

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

 #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>

Click here to see the screenshot

11

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

для нормальной 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();
  });
});

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

3

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

1

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

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

0

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

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

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

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

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

-1