Я получаю эту кнопку загрузки с тегами <video>
в Chrome 55, но не на Chrome 54:
Как удалить это, чтобы никто не мог видеть кнопку загрузки в Chrome 55?
Я использовал тег <video>
, чтобы вставить это видео на мою веб-страницу. Итак, я хочу, чтобы какой-то код удалял этот вариант загрузки.
Вот мой текущий код:
<video width="512" height="380" controls>
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
Это решение (из этого поста)
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>
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
Начиная с Chrome58 теперь вы можете использовать controlList для удаления элементов управления, которые вы не хотите показывать. Это доступно для тегов <audio>
и <video>
.
Если вы хотите удалить кнопку загрузки в элементах управления, выполните следующие действия:
<audio controls controlsList="nodownload">
controlsList="nodownload"
также скрывал URL источника аудио. Но сдерживающий эффект этого решения остается.
Это может скрыть кнопку загрузки в 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>
Привет, я нашел постоянное решение, которое должно работать в каждом случае!
Для нормального веб-разработки
<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();
});
});
Сообщите мне, помогло ли вам!
Что касается текущей версии 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 Вы можете настроить значок, поскольку он, например, только.
Лучшим способом использования кнопки "загрузить" является использование JavaScript-плееров, таких как Videojs (http://docs.videojs.com/) или MediaElement.js(http://www.mediaelementjs.com/)
У них нет кнопки загрузки по умолчанию, как правило, и, кроме того, вы можете настраивать видимые кнопки управления проигрывателя.
Я решил проблему, закрыв кнопку загрузки аудиоконтроллера прозрачным div, который изменяет символ курсора мыши на "недопустимый".
Div блокирует активацию кнопки загрузки.
Высота: 50 пикселей, Ширина: 35 пикселей, Влево: (document-right -60), Верх: (то же, что и аудиоконтроллер).
Вы должны установить стиль z-индекса для div над z-индексом аудио-контроллера.
См. sapplic.com/jive66 для примера, который работает для chrome на win7 и на win8.