W Chrome 55, zapobiec wyświetlaniu przycisku pobierania dla wideo HTML 5 [duplikat]

Google dodał nową funkcję od czasu ostatniej odpowiedzi został opublikowany tutaj. Możesz teraz dodać atrybut controlList Jak pokazano tutaj:

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

Wszystkie opcje atrybutu controllist znajdziesz tutaj:

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

Począwszy od Chrome58 możesz teraz użyć controlsList , aby usunąć elementy sterujące, których nie chcesz pokazywać. Jest to dostępne zarówno dla tagów <audio>, jak i <video>.

Jeśli chcesz usunąć przycisk pobierania w kontrolkach, zrób to:

<audio controls controlsList="nodownload">

To może ukryć przycisk pobierania w Chrome, gdy używany jest dźwięk 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>

Hej znalazłem stałe rozwiązanie, które powinno działać w każdym przypadku!

Dla normalnego webdevelopment

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

Filmy HTML5, które mają preload na false

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

$ niezachwiana? -- >Debug modus!

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

Filmy HTML5, które mają preload na false

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

Jeśli chodzi o aktualną wersję Chrome (56), nie można jej jeszcze usunąć. Rozwiązanie podane w innych postach prowadzi do przepełnienia pewnej części filmu.

Znalazłem inne rozwiązanie - możesz sprawić, że poprzedni przycisk będzie nakładał się na przycisk pobierania i po prostu go zakryj, używając tej techniki:

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

Przykład: https://jsfiddle.net/dk4q6hh2/

PS możesz chcieć dostosować ikonę, ponieważ jest tylko na przykład.

Może być najlepszym sposobem na użycie przycisku "Pobierz" jest użycie odtwarzaczy JavaScript, takich jak Videojs ( http://docs.videojs.com / ) lub MediaElement.js ( http://www.mediaelementjs.com/)

Nie mają domyślnie przycisku pobierania z reguły, a ponadto pozwalają dostosować widoczne przyciski sterujące odtwarzacza.

Rozwiązałem problem, pokrywając przycisk pobierania kontrolera audio przezroczystym div, który zmienia symbol kursora myszy na "niedozwolony".

Div blokuje aktywację przycisku pobierania.

Height: 50px, Width: 35px, Left: (document-right -60), Top: (to samo co kontroler audio).

Musisz ustawić styl z-index div nad indeksem z kontrolera audio.

Zobacz sapplic.com/jive66 na przykład, że działa dla chrome na win7 i win8.