it-swarm-eu.dev

V prohlížeči Chrome 55 zabraňte zobrazení tlačítka pro stahování videa ve formátu HTML 5

V prohlížeči Chrome 55 dostávám toto tlačítko ke stažení se značkami <video>, nikoli však v prohlížeči Chrome 54:  enter image description here

Jak to mohu odstranit, aby nikdo v prohlížeči Chrome 55 neviděl tlačítko pro stažení?

Použil jsem značku <video> k vložení tohoto videa na svou webovou stránku. Tak, chci nějaký druh kódu odstranit tuto možnost stahování.

Zde je můj aktuální kód:

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

Toto je řešení (z tento příspěvek )

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

Aktualizace 2: Nové řešení @Remo

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

Google přidal novou funkci, protože poslední odpověď byla zveřejněna zde. Nyní můžete přidat atribut controlList, jak je zobrazeno zde:

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

Zde naleznete všechny možnosti atributu controllist:

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

266
Remo

Jako Chrome58 můžete nyní použít controlsList k odstranění ovládacích prvků, které nechcete zobrazit. Toto je dostupné jak pro <audio>, tak pro <video> tagy.

Chcete-li v ovládacích prvcích odebrat tlačítko pro stažení, postupujte takto:

<audio controls controlsList="nodownload">
61
Nithin Girish

Pokud je používán jazyk HTML5 Audio, můžete toto tlačítko skrýt v prohlížeči Chrome.

 #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

12
Alper Ebicoglu

Hej, našel jsem trvalé řešení, které by mělo fungovat v každém případě!

Pro normální vývoj webových stránek 

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

HTML5 videa, která mají preload na 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 videa, která mají preload na false

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

Dejte mi vědět, jestli vám to pomohlo!

3
Chris Kroon

Pokud jde o aktuální verzi prohlížeče Chrome (56), nelze ji odstranit. Řešení poskytované v jiných příspěvcích vede k přetékání části videa.

Našel jsem jiné řešení - předcházející tlačítko můžete překrýt tlačítkem pro stahování a jednoduše jej pokrýt pomocí této techniky:

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

Příklad: https://jsfiddle.net/dk4q6hh2/

PS Možná budete chtít přizpůsobit ikonu, protože je to například.

2
pwkc

Může být nejlepším způsobem, jak využít tlačítko "download", je použít JavaScript hráče, jako jsou Videojs ( http://docs.videojs.com/ ) nebo MediaElement.js ( http: //www.mediaelementjs .com/ )

Standardně nemají tlačítko ke stažení a navíc umožňují přizpůsobit viditelná ovládací tlačítka přehrávače.

0
Andrey Tzar