发表新帖
发表新帖

Disable download button for Google Chrome?

后端 未结
关注
11 1497
离开以前
离开以前 2020-11-30 20:03

Google Chrome is now shipping with a download button for videos that are just embedded videos (i.e. not MSE):

\"Cana

相关标签:
11条回答
  • Happy的楠姐
    2020-11-30 20:43

    I using following JavaScript snippet which is working very well:

    document.querySelectorAll("video[id^=media-player]").forEach((elem) => elem.controlsList.add("nodownload"));

    Example: www.ring-cafe-finsterwalde.de/archiv/archiv.html#archiv4

    0 讨论(0)
  • 深忆病人
    2020-11-30 20:45

    Hey I found a permanent solution that should work in every case!

    For normal webdevelopment

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

    HTML5 videos that has preload on 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 videos that has preload on false

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

    Let me know if it helped you out!

    0 讨论(0)
  • 感动是毒
    2020-11-30 20:47

    One more control item I was trying to disable, additionally to 'download' - is 'picture-in-picture'.

    Sadly there`s no property, for that purpose to be added in the controlsList. But there is an attribute - disablePictureInPicture you can add to the Element to disable pip.

    Example disabling both download and picture-in-picture:

    <video disablepictureinpicture controlslist="nodownload">...</video>

    Details: https://wicg.github.io/picture-in-picture/#disable-pip

    0 讨论(0)
  • 时光取名叫无心
    2020-11-30 20:48

    The above answer offers a good solution. However, when I was working on this in my project, there were two problems with it.

    1. Download occurs (as if the download button had been pressed) when right margin area of the fullscreen button is touched on Android (mobile or tablet). Applying z-index didn't fix it.

    2. Because of overflow:hidden, the download button is invisible but still exists to the right of the fullscreen button. That means when you press "tab" several times after clicking any control button or bar on PC, you can still reach the download button.

    Additionally, be careful -- some small-width devices (e.g. mobile phones) are small enough to hide the seek bar. It would need many more pixels to hide the download button.

    I hope Google provides the option to adjust this ASAP.

    0 讨论(0)
  • 一个人的身影
    2020-11-30 20:50

    Demmongonis solution does work but be aware it can lead to unwanted results.

    Android/Chrome sometimes, depends in the video I guess and other factors, adds buttons at the right of the download-button. i.e. the casting-button (there is no way to select it). It will make the download-button to remain visible and the last button to get hidden (casting-button)

    Update

    It is posible now to hide the download button using the controlsList attribute: 

    <video controlsList="nodownload" ... />
    0 讨论(0)
  • 情深已故
    2020-11-30 20:51

    In addition to above answers you have to add following code to disable context menu:

    index.html: (globally)

    <body oncontextmenu="return false;">

    OR you can disable context menu for some element:

    element.oncontextmenu = function (e) {
    e.preventDefault();
};
    0 讨论(0)
 看不清?
提交回复
热议问题