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

Question

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

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

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

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

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

Answer 1

Это решение (от this post)

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

Answer 2

Эта кнопка загрузки на 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>

Click here to see the screenshot

Answer 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 Вы могли бы хотеть для настройки значка, поскольку это, например, только.

Answer 4

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

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

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

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

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

Answer 5

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

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

Answer 6

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

Answer 7

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

Для нормальной веб-программирования

<script type="text/javascript"> 
$("video").each(function(){jQuery(this).append('controlsList="nodownload"')}); 
</script> 

HTML5 видео, которое преднагрузка на ложном

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

$ undevinded? -> Отладка modus!

<script type="text/javascript"> 
jQuery("video").each(function(){jQuery(this).append('controlsList="nodownload"')}); 
</script> 

HTML5 видео, которое преднагрузка на ложном

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

Позволь мне знать, если это поможет вам!

Answer 8

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

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

<audio controls controlsList="nodownload">