1. ホーム
  2. Web制作
  3. HTML/Xhtml

ダウンロードボタン機能を非表示にするHTMLページネイティブVIDEOタグ

2022-01-08 16:33:05

Web プロジェクトを作成しているときに、プロフィール動画が 1 つだけあるプロフィール ページに遭遇しました。この短い動画は 1 つだけだったので、動画コンポーネントを使用せず、ネイティブの video タグを使用して問題を解決しました。

プロフィール動画は非課金ですが、ダウンロードボタンや動画の名前を付けて保存する機能はいらないので、ダウンロード機能がないように見せる方法を考え、メモを取りました。

上記のダウンロードボタンを非表示にしたい、3つのスタイルが行う、無意味な直接の郵便番号:。

video::-internal-media-controls-download-button {
    display:none;
}
video::-webkit-media-controls-enclosure {
    overflow:hidden;
}
video::-webkit-media-controls-panel {
    width: calc(100% + 50px); 
}

はっきり言って、ダウンロードボタンをビューポートの外に移動しただけなのですが、このCSSを見つけるのに時間がかかりましたよ。

この方法は、実際にビデオのダウンロードを止めるわけではなく、quot;mindful" ユーザーはまだキャッシュファイル内で読み込んだビデオファイルを見つけることができるので、タイトルにあるように、それはただ隠されているだけです。

動画のダウンロードを真にブロックするには、サーバー側で動画のアドレスを暗号化する必要があります。

要約すると

上記は、ダウンロードボタン機能を隠すためのHTMLページネイティブVIDEOタグの小さな導入であり、私はそれがあなたの助けになることを願って、あなたが何か質問がある場合は、私にメッセージを与えてください、私は速やかに皆に返信されます。ここでも非常にスクリプトハウスのウェブサイトのサポートをありがとうございます