web-dev-qa-db-ja.com

Chrome 55では、HTML 5ビデオのダウンロードボタンを表示しない

Chrome 55ではこのダウンロードボタンに<video>タグが付いていますが、Chrome 54にはありません： enter image description here

Chrome 55でダウンロードボタンが見えないようにするには、どうすればこれを削除できますか。

この動画を私のWebページに埋め込むために<video>タグを使用しました。そのため、このダウンロードオプションを削除するためのコードが必要です。

これが私の現在のコードです：

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

これが解決策です（ この投稿から ）

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>
143
Muhammad Zeeshan

最後の回答がここに掲載されて以来、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

266
Remo

Chrome 58では、表示したくないコントロールを削除するために controlsList を使用できるようになりました。これは<audio>タグと<video>タグの両方に使用できます。

コントロール内のダウンロードボタンを削除したい場合は、次の操作を行います。

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

HTML5オーディオが使用されている場合、これは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

ちょっと私はすべてのケースで動作するはずです恒久的な解決策を見つけました！

通常のWeb開発用 

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

事前ロードがfalseのHTML5ビデオ

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

$は信じられない？ - >デバッグモード 

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

事前ロードがfalseのHTML5ビデオ

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

それはあなたを助けたかどうか私に知らせて！

3
Chris Kroon

現在の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あなたはアイコンをカスタマイズしたいと思うかもしれません。

2
pwkc

「ダウンロード」ボタンを利用する最良の方法は、Videojs（ http://docs.videojs.com/ /）やMediaElement.js（ http：//www.mediaelementjs）などのJavaScriptプレーヤーを使用することです。 .com/ ）

彼らは原則としてダウンロードボタンをデフォルトで持っていないし、さらにあなたがプレーヤーの目に見えるコントロールボタンをカスタマイズすることを可能にします。

0
Andrey Tzar