Empêcher le téléchargement de vidéos HTML5 (clic droit enregistré)?
Comment désactiver "Enregistrer la vidéo sous ..." dans le menu contextuel du navigateur pour empêcher les clients de télécharger une vidéo?
Existe-t-il des solutions plus complètes empêchant le client d’accéder directement à un chemin de fichier?
Vous ne pouvez pas. C'est parce que c'est ce que les navigateurs ont été conçus pour faire: Servir le contenu} _. Mais vous pouvez rendre le téléchargement plus difficile.
Tout d'abord, vous pouvez désactiver le contextmenu événement , aussi appelé "clic droit". Cela empêcherait votre skiddie habituel de déchirer votre vidéo de façon flagrante en cliquant avec le bouton droit de la souris et enregistrez sous. Mais ensuite, ils pourraient simplement désactiver JS et contourner ce problème ou trouver la source vidéo via le débogueur du navigateur. De plus, c'est mauvais UX. Dans un menu contextuel, il y a beaucoup d'éléments légitimes autres que Enregistrer sous.
Vous pouvez également utiliser des bibliothèques de lecteur vidéo personnalisées. La plupart d'entre eux implémentent des lecteurs vidéo qui personnalisent le menu contextuel à votre goût. Donc, vous n'obtenez pas le menu contextuel du navigateur par défaut. Et si jamais ils servent un élément de menu similaire à Enregistrer sous, vous pouvez le désactiver. Mais encore une fois, ceci est une solution de contournement JS. Les faiblesses sont similaires à l'option précédente.
Une autre façon de le faire est de servir la vidéo en utilisant HTTP Live Streaming . En gros, la vidéo est découpée en morceaux et diffusée l'un après l'autre. C'est ainsi que la plupart des sites de diffusion en continu servent la vidéo. Ainsi, même si vous parvenez à enregistrer sous, vous enregistrez uniquement un bloc, pas la vidéo entière. Il faudrait un peu plus d'effort pour rassembler tous les morceaux et les assembler à l'aide d'un logiciel dédié.
Une autre technique consiste à Paint <video> sur <canvas> . Dans cette technique, avec un peu de JavaScript, ce que vous voyez sur la page est un élément <canvas> qui rend des images à partir d'un <video> caché. Et comme c'est un <canvas>, le menu contextuel utilisera un menu de <img>, pas un <video>. Vous obtiendrez une image de sauvegarde sous au lieu d’une vidéo de sauvegarde sous.
Vous pouvez également utiliser jetons CSRF à votre avantage. Votre serveur enverrait un jeton sur la page. Vous utilisez ensuite ce jeton pour récupérer votre vidéo. Votre serveur vérifie s’il s’agit d’un jeton valide avant de servir la vidéo ou d’obtenir un HTTP 401 . L'idée est que vous ne pouvez jamais obtenir une vidéo en ayant un jeton que vous ne pouvez obtenir que si vous venez de la page, sans visiter directement l'URL de la vidéo.
À la fin de la journée, je ne fais que télécharger ma vidéo sur un site tiers, comme YouTube ou Vimeo. Ils disposent de bons outils de gestion vidéo, optimisent la lecture sur le périphérique et s'efforcent d'empêcher l'extraction de leurs vidéos sans effort.
C'est une solution simple pour ceux qui souhaitent simplement supprimer l'option "enregistrer" du clic droit de la vidéo html5.
$(document).ready(function(){
$('#videoElementID').bind('contextmenu',function() { return false; });
});
Réponse simple,
VOUS NE POUVEZ PAS
S'ils regardent votre vidéo, ils l'ont déjà
Vous pouvez les ralentir mais vous ne pouvez pas les arrêter.
La meilleure façon que j'utilise habituellement est très simple, je désactive complètement le menu contextuel de la page entière, pure html + javascript:
<body oncontextmenu="return false;">
C'est tout! Je le fais parce que vous pouvez toujours voir la source par un clic droit.
Ok, vous dites: "Je peux utiliser directement la source d'affichage du navigateur" et c'est vrai, mais nous partons du fait que vous NE PEUX PAS arrêter de télécharger des vidéos html5.
Oui, vous pouvez le faire en trois étapes:
- Placez les fichiers que vous souhaitez protéger dans un sous-répertoire du répertoire où votre code est exécuté .
www.foo.com/player.html
www.foo.com/videos/video.mp4 Enregistrez un fichier dans ce sous-répertoire nommé ".htaccess" et ajoutez les lignes ci-dessous.
www.foo.com/videos/.htaccess
#Contents of .htaccess RewriteEngine on RewriteCond %{HTTP_REFERER} !^http://foo.com/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://www.foo.com/.*$ [NC] RewriteRule .(mp4|mp3|avi)$ - [F]
Maintenant, le lien source est inutile , mais nous devons tout de même nous assurer que les utilisateurs qui tentent de télécharger le fichier ne peuvent pas recevoir directement le fichier .
Pour une solution plus complète , présentez maintenant la vidéo avec un lecteur flash (ou une toile html) et ne créez jamais de lien direct avec la vidéo. Pour simplement supprimer le menu contextuel, ajoutez à votre code HTML:
<body oncontextmenu="return false;">
Le résultat:
www.foo.com/player.html lira correctement la vidéo , mais si vous visitez www.foo.com/videos/video.mp4:
Code d'erreur 403: INTERDIT
Cela fonctionnera pour le téléchargement direct, cURL, hotlinking, vous le nommez.
C’est une réponse complète aux deux questions posées et non une réponse à la question: "puis-je empêcher un utilisateur de télécharger une vidéo qu’il a déjà téléchargée?"
OUI, VOUS POUVEZ :
En tant que développeur côté client, je recommande d'utiliser l'URL blob, L'URL blob est une URL côté client qui fait référence à un objet binaire.
<video id="id" width="320" height="240" type='video/mp4' controls > </video>
en html, laissez votre vidéo src vierge, et en JS récupérez le fichier vidéo avec AJAX, assurez-vous que le type de réponse est blob
window.onload = function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'mov_bbb.mp4', true);
xhr.responseType = 'blob'; //important
xhr.onload = function(e) {
if (this.status == 200) {
console.log("loaded");
var blob = this.response;
var video = document.getElementById('id');
video.oncanplaythrough = function() {
console.log("Can play through video without stopping");
URL.revokeObjectURL(this.src);
};
video.src = URL.createObjectURL(blob);
video.load();
}
};
xhr.send();
}
PHP envoie le tag vidéo html5 avec une session où la clé est une chaîne aléatoire et la valeur est le nom du fichier.
ini_set('session.use_cookies',1);
session_start();
$ogv=uniqid();
$_SESSION[$ogv]='myVideo.ogv';
$webm=uniqid();
$_SESSION[$webm]='myVideo.webm';
echo '<video autoplay="autoplay">'
.'<source src="video.php?video='.$ogv.' type="video/ogg">'
.'<source src="video.php?video='.$webm.' type="video/webm">'
.'</video>';
Maintenant, il est demandé à PHP d'envoyer la vidéo. PHP récupère le nom du fichier; supprime la session et envoie la vidéo instantanément. De plus, tous les en-têtes 'no cache' et de type mime doivent être présents.
ini_set('session.use_cookies',1);
session_start();
$file='myhiddenvideos/'.$_SESSION[$_GET['video']];
$_SESSION=array();
$params = session_get_cookie_params();
setcookie(session_name(),'', time()-42000,$params["path"],$params["domain"],
$params["secure"], $params["httponly"]);
if(!file_exists($file) or $file==='' or !is_readable($file)){
header('HTTP/1.1 404 File not found',true);
exit;
}
readfile($file);
exit:
Maintenant, si l'utilisateur copie l'URL dans un nouvel onglet ou utilise le menu contextuel, il n'aura aucune chance.
Vous pouvez au moins empêcher les non-initiés d'utiliser le menu contextuel contextuel pour télécharger votre vidéo. Vous pouvez désactiver le menu contextuel de tout élément à l'aide de l'attribut oncontextmenu.
oncontextmenu="return false;"
Cela fonctionne pour l'élément body (page entière) ou pour une seule vidéo l'utilisant à l'intérieur de la balise video.
<video oncontextmenu="return false;" controls>...</video>
+1 manière simple et inter-navigateur: Vous pouvez également placer une image transparente sur la vidéo avec css z-index et opacité . Ainsi, les utilisateurs verront "enregistrer l'image sous" au lieu de "enregistrer la vidéo" dans le menu contextuel. .
Nous avons fini par utiliser AWS CloudFront avec des URL expirées. La vidéo se chargera, mais au moment où l'utilisateur clique avec le bouton droit de la souris et choisit Enregistrer sous, l'URL de la vidéo reçue initialement a expiré. Effectuez une recherche sur CloudFront Origin Access Identity.
La production de l'URL de la vidéo nécessite une paire de clés pouvant être créée dans l'AWS CLI. Pour info ce n'est pas mon code mais ça marche super!
$resource = 'http://cdn.yourwebsite.com/videos/yourvideourl.mp4';
$timeout = 4;
//This comes from key pair you generated for cloudfront
$keyPairId = "AKAJSDHFKASWERASDF";
$expires = time() + $timeout; //Time out in seconds
$json = '{"Statement":[{"Resource":"'.$resource.'","Condition" {"DateLessThan":{"AWS:EpochTime":'.$expires.'}}}]}';
//Read Cloudfront Private Key Pair
$fp=fopen("/absolute/path/to/your/cloudfront_privatekey.pem","r");
$priv_key=fread($fp,8192);
fclose($fp);
//Create the private key
$key = openssl_get_privatekey($priv_key);
if(!$key)
{
echo "<p>Failed to load private key!</p>";
return;
}
//Sign the policy with the private key
if(!openssl_sign($json, $signed_policy, $key, OPENSSL_ALGO_SHA1))
{
echo '<p>Failed to sign policy: '.openssl_error_string().'</p>';
return;
}
//Create url safe signed policy
$base64_signed_policy = base64_encode($signed_policy);
$signature = str_replace(array('+','=','/'), array('-','_','~'), $base64_signed_policy);
//Construct the URL
$url = $resource.'?Expires='.$expires.'&Signature='.$signature.'&Key-Pair-Id='.$keyPairId;
return '<div class="videowrapper" ><video autoplay controls style="width:100%!important;height:auto!important;"><source src="'.$url.'" type="video/mp4">Your browser does not support the video tag.</video></div>';
Le
<body oncontextmenu="return false;">
ne fonctionne plus. Chrome et Opera à compter de juin 2018 ont un sous-menu sur la timeline pour permettre le téléchargement direct. L'utilisateur n'a donc pas besoin de cliquer avec le bouton droit pour télécharger cette vidéo. Fait intéressant, Firefox et Edge n'ont pas cela ...
Utilisation d'un service tel que Vimeo: Connectez-vous Vimeo > Goto Video > Settings > Privacy > Mark as Secured et sélectionnez également les domaines intégrés. Une fois les domaines incorporés définis, il ne sera plus permis à quiconque d’intégrer la vidéo ou de l’afficher à partir du navigateur, à moins de se connecter à partir des domaines spécifiés. Donc, si vous avez une page sécurisée sur votre serveur qui charge le lecteur Vimeo dans iframe, il est très difficile de se déplacer.
Tout d'abord, réalisez que il est impossible d'empêcher complètement le téléchargement d'une vidéo, tout ce que vous pouvez faire est de le rendre plus difficile. C'est à dire. vous cachez la source de la vidéo.
Un navigateur Web télécharge temporairement la vidéo dans une mémoire tampon. Par conséquent, si vous pouviez empêcher le téléchargement, vous empêcheriez également l'affichage de la vidéo.
Vous devez également savoir que <1% de la population totale du monde sera capable de comprendre le code source, le rendant plutôt sûr de toute façon. Cela ne signifie pas que vous ne devriez pas non plus le cacher dans le source - vous devriez.
Vous devriez pas désactiver le clic droit, et encore moins vous devriez afficher un message disant "You cannot save this video for copyright reasons. Sorry about that.". Comme suggéré dans cette réponse .
Cela peut être très ennuyeux et déroutant pour l'utilisateur. Mis à part cela; S'ils désactivent JavaScript sur leur navigateur, ils seront pourront faire un clic droit et enregistrer quand même.
Voici un truc CSS que vous pourriez utiliser:
video {
pointer-events: none;
}
CSS ne peut pas être désactivé dans le navigateur, protégeant votre vidéo sans désactiver le clic droit. Cependant, l'un des problèmes est que controls ne peut pas être activé non plus, autrement dit, ils doivent être définis sur false. Si vous souhaitez utiliser votre propre fonction Lecture/Pause ou utiliser une API dotée de boutons distincts de la balise video, cette option est réalisable.
controls a également un bouton de téléchargement, son utilisation n’est donc pas une bonne idée non plus.
Voici un JSFiddle exemple.
Si vous souhaitez désactiver le clic droit à l'aide de JavaScript, stockez également la source de la vidéo en JavaScript. De cette façon, si l'utilisateur désactive JavaScript (permettant un clic droit), la vidéo ne se chargera pas (la source vidéo sera également un peu meilleure).
De réponse TxRegex :
<video oncontextmenu="return false;" controls>
<source type="video/mp4" id="video">
</video>
Maintenant, ajoutez la vidéo via JavaScript:
document.getElementById("video").src = "https://www.w3schools.com/html/mov_bbb.mp4";
Fonctionnel JSFiddle
Un autre moyen d'éviter le clic droit consiste à utiliser la balise embed. Cependant, ceci ne fournit pas les commandes pour exécuter la vidéo, il faudrait donc les déployer en JavaScript:
<embed src="https://www.w3schools.com/html/mov_bbb.mp4"></embed>
Réponse courte: Cryptez le lien comme le fait YouTube, ne savez pas comment demander à youtube/google comment ils le font. (Juste au cas où vous voudriez aller droit au but.)
Je tiens à préciser à tout le monde que cela est possible parce que youtube le fait et s’ils le peuvent de même pour tout autre site Web et que ce n’est pas du navigateur non plus parce que je l’ai testé sur quelques navigateurs tels que Microsoft Edge et Internet Explorer. donc il y a un moyen de le désactiver et vu que les gens le disent encore ... J'essaie de chercher une réponse parce que si youtube le peut, il doit bien y avoir un moyen et le seul moyen de voir comment ils le font est de regarder quelqu'un les scripts de youtube que je fais maintenant. J'ai également vérifié s'il s'agissait d'un menu contextuel personnalisé et ce n'est pas parce que le menu contextuel déborde de l'élément inspecté et je veux dire, comme il est surmonté et j'ai regardé et il ne crée jamais une nouvelle classe et aussi est impossible d'accéder réellement à l'élément inspect avec javascript, donc impossible. Lorsque vous double-cliquez avec le bouton droit de la souris sur une vidéo youtube, vous pouvez voir qu'il apparaît dans le menu contextuel de chrome. De plus ... youtube n’ajouterait pas cette fonction. Je suis en train de faire des recherches et de parcourir la source de YouTube, donc je reviendrai si je trouve la réponse ... si quelqu'un dit que vous ne pouvez pas, vous n’aurez pas pu, alors ils ne l’ont pas fait. Ne fais pas de recherches comme moi. La seule façon de télécharger des vidéos youtube consiste à télécharger une vidéo.
Ok ... j'ai fait des recherches et mes recherches restent que vous pouvez le désactiver sauf qu'il n'y a pas de javascript pour cela ... vous devez être capable de chiffrer les liens vers la vidéo pour que vous puissiez le désactiver car je pense que le navigateur ne l'affichera pas s'il ne le trouve pas et, lorsque j'ai ouvert un lien vidéo youtube, il affichait le blob suivant: https://www.youtube.com/e5c4808e-297e-451f-80da-3e838caa1275 "sans guillemets, il est donc crypté pour ne pas pouvoir être sauvegardé ... vous devez connaître php pour cela, mais comme la réponse que vous avez choisie pour le rendre plus difficile, youtube le rend le plus difficile en cryptage lourd, vous devez être un programmeur php avancé, mais si vous ne le savez pas, prenez la personne que vous avez choisie comme meilleure solution pour le rendre difficile à télécharger ... mais si vous connaissez le php, le cryptage intensif du lien vidéo sera lu uniquement sur le vôtre ... Je ne sais pas comment expliquer comment ils le font mais ils l'ont fait et il y a un moyen. La manière dont youtube chiffre les vidéos est assez intelligente, donc si vous voulez savoir comment demander à youtube/google de savoir comment ils le font ... espérons que cela vous aidera bien que vous ayez déjà choisi la meilleure réponse. Donc, le cryptage du lien est préférable à court terme.
Il semble que le streaming de la vidéo via websocket soit une option viable, comme pour diffuser les images et les dessiner sur un canevas.
Streaming vidéo sur des websockets utilisant JavaScript
Je pense que cela fournirait un autre niveau de protection rendant plus difficile l'acquisition de la vidéo par le client et, bien sûr, résoudrait votre problème avec l'option "Enregistrer la vidéo sous ..." dans le menu contextuel (option excessive!).
Voici ce que j'ai fait:
function noRightClick() {
alert("You cannot save this video for copyright reasons. Sorry about that.");
} <body oncontextmenu="noRightClick();">
<video>
<source src="http://calumchilds.com/videos/big_buck_bunny.mp4" type="video/mp4">
</video>
</body>Nous pourrions rendre cela plus facile en cachant un menu contextuel, comme ceci:
<video oncontextmenu="return false;" controls>
<source src="https://yoursite.com/yourvideo.mp4" >
</video>