HTMLページのネイティブVIDEOタグはダウンロードボタン機能を隠します

HTMLページのネイティブVIDEOタグはダウンロードボタン機能を隠します

Web プロジェクトを作成しているときに、紹介ビデオが別にある紹介ページに遭遇しました。この短いビデオのみだったので、ビデオ コンポーネントは使用されていませんでした。そこで、ネイティブ ビデオ タグを使用してこの問題を解決したいと考えました。

紹介動画は無料ですが、ダウンロードボタンや動画保存機能は欲しくないので、ダウンロード機能が無いように見せる方法を見つけてメモしました。

上記のダウンロード ボタンを非表示にしたい場合は、3 つのスタイルで十分です。これ以上何もせずに、コードを直接貼り付けてみましょう。

ビデオ::-内部メディアコントロールダウンロードボタン{
    表示:なし;
}
ビデオ::-webkit-メディアコントロールエンクロージャ {
    オーバーフロー:非表示;
}
ビデオ::-webkit-メディアコントロールパネル{
    幅: calc(100% + 50px); 
}

簡単に言うと、ダウンロード ボタンをウィンドウの外に移動するのですが、これらの CSS を見つけるのにかなり時間がかかりました。 !

この方法では、ビデオのダウンロードを実際に防ぐことはできません。「注意深い」ユーザーは、ロードされたビデオ ファイルをキャッシュ ファイル内で見つけることができるため、タイトルのとおり、単に隠されているだけです。

ビデオのダウンロードを完全に防止するには、ビデオのアドレスを暗号化し、サーバー側で検証する必要があります。

要約する

以上は、ダウンロードボタン機能を非表示にする HTML ページのネイティブ VIDEO タグについての編集者による紹介です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  子要素の margin-top によって親要素が移動する問題の解決方法

>>:  MySQLで現在の時間間隔の前日のデータをクエリする

推薦する

Node.jsとDenoの比較

目次序文Denoとは何ですか? Node.jsとの比較建築ESモジュール依存関係の管理TypeScr...

Linuxのtimeコマンドの使い方の詳しい説明

1. コマンドの紹介時間は、コマンドの実行に費やされた時間や関連するシステム リソース、その他の情報...

Vueはシンプルな虫眼鏡効果を実装します

この記事では、参考までに、簡単な虫眼鏡効果を実現するためのVueの具体的なコードを紹介します。具体的...

CSS レイアウト チュートリアル: 垂直方向の中央揃えを実現する方法

序文最近、フロントエンドの知識をまとめており、いくつかのインタビューにも参加しました。インタビュー中...

vuexプロジェクトにおけるログインステータス管理の実践プロセス

目次道具:ログインシナリオ:練習する:シナリオ1: 思考と実践シナリオ2: 思考と実践要約する道具:...

React+TS を使用したシンプルな Jira プロジェクトを実装するためのベスト プラクティス

トレーニングのための一連のプロジェクト反応+ts内容は少ないですが、フックのカプセル化、ts ジェネ...

音声キューイングシステムを実装するためのJavaScript

目次導入主な特徴エフェクト表示キーコード導入音声キューイングシステムは、銀行、レストラン、病院などの...

CSS スタイルの導入方法とその長所と短所の紹介

CSSを導入する3つの方法1. インラインスタイル利点: 書きやすく、重みがある 欠点: 構造とスタ...

MySQLの数値型自動増分における落とし穴

テーブル構造を設計する場合、数値型は最も一般的な型の 1 つですが、数値型をうまく使用するのは想像す...

CSSテキストシャドウの徐々にぼやける効果の実装

テキストシャドウテキストに影を追加します。テキストとテキスト装飾に複数のシャドウを追加することができ...

JS での矢印関数と this の記述と理解

目次序文1. JSで関数を書く方法1. 通常の関数の書き方2. 矢印関数の書き方2. 通常の関数でこ...

sqlmap インジェクションの詳細なグラフィック説明

目次1. この Web サイトには SQL インジェクションの脆弱性がある可能性があることが判明しま...

MySQL テーブル名の大文字と小文字の選択

目次1. 大文字と小文字の区別を決定するパラメータ2. パラメータ変更に関する注意事項要約: 1. ...

Docker ベースの Redis マスタースレーブ クラスタの実装

目次1. Redisイメージを取得する2. 6つのRedisコンテナを作成する3. Redisコンテ...

CSS で 3 列レイアウトを実装するいくつかの方法と利点と欠点

序文3 列レイアウトは、その名前が示すように、両側が固定され、中央が適応します。実際の開発では、3 ...