Empêcher la vidéo HTML5 d'être téléchargée (clic droit enregistré)?
Comment puis-je désactiver "Enregistrer la Vidéo sous..."à partir du menu de clic droit d'un navigateur pour empêcher les clients de télécharger une vidéo?
y a-t-il des solutions plus complètes qui empêchent le client d'accéder directement à un chemin de fichier?
16 réponses
en réalité, vous ne pouvez pas . Mais vous pouvez le rendre plus difficile à télécharger .
les navigateurs rendent l'accaparement trop facile
parce que c'est ce que les navigateurs ont été conçus pour faire: servir contenu - qui signifie donner le contenu à l'utilisateur . Pour vous montrer comment il est facile, voici comment je prends habituellement des vidéos sur virtuellement toutes les vidéo streaming de site :
préparez l'onglet Réseau de votre débogueur de navigateur préféré et laissez la vidéo se charger. Rechercher dans le chargement des ressources. Les vidéos sont généralement transmises .flv ou .mp4 et audio .mp3. Lorsque vous repérez l'url, ouvrir un nouvel onglet/fenêtre et ouvrir le lien. Le navigateur téléchargera alors le fichier.
, ce qui rend plus difficile
Voici des méthodes pour rendre la vie d'un grabber plus dure. Comme je l'ai dit plus tôt, ces méthodes ne sont pas infaillibles, mais peuvent au moins prévenir les dérapages.
Vidéo sur la Toile technique
récemment je suis tombé sur cet article de HTML5Doctor tout en recherchant la détection de mouvement dans JS. Cela implique de diffuser votre vidéo en streaming via un <video> , puis avec quelques JS, littéralement copier la vidéo dans un <canvas> . voici un exemple où la vidéo est à l'avant, tandis que la toile à l'arrière est alimentée avec les données de cette même vidéo.
essentiellement, ce que vous faites est:
- Prédéfinir sur le code HTML ou insérer dynamiquement un
<canvas>pour les DOM. C'est le "joueur" que voit l'utilisateur. - crée dynamiquement une balise vidéo via JS, l'ajoute au DOM caché et lui donne une url à stream. Ce sera la source vidéo de la toile.
- puis avec JS, vous récupérez périodiquement les données du
<video>que vous venez de créer et vous les dessinez sur le<canvas>. Avec cette étape, la vidéo est transmise à la toile.
C'est la base de toute la routine. Puisque votre lecteur est maintenant la toile et la vraie vidéo cachée, vous pouvez essayer le clic droit tout ce que vous voulez et enregistrer. Depuis le canevas agit comme une image sur la page, vous pouvez enregistrer uniquement un plan d'un cadre qui a été affiché sur toile. En ce qui concerne les contrôles, JS a une API pour contrôler <video> afin que vous puissiez créer des boutons personnalisés et des curseurs.
Cependant, si ils savent que vous faites cela, ils trouveront votre cachés élément vidéo, et vous êtes foutus. Cela nous amène à la méthode suivante qui complète cette technique front-end seulement, avec l'aide du côté du serveur.
URLs des ressources temporaires
une chose à faire empêcher cette méthode est de empêcher le lien d'être réutilisable . Faire le lien jetable, temporaire, utilisation unique seulement. Une fois que le lecteur se charge à l'aide de l'url jetable, disposez-en. De le rendre inutilisable.
similaire à prévention CSRF , quand un navigateur demande une page avec votre vidéo, lui faire générer un jeton aléatoire et le stocker dans un certain stockage du côté du serveur pour référence ultérieure. En même temps, ajouter à l'url de votre vidéo , quelque chose comme:
//we load some video with id 1234324 from your site using this url
//and the token generated on page load is appended as sid
http://yoursite.com/media.php?video_id=1234324&sid=a0s9d8a98a0d98asd09809wq0e9
maintenant que votre lecteur charge la vidéo, il utilisera cette url qui porte le token. Le serveur de valider le jeton.
si c'est bon, diffusez la vidéo et détruisez le jeton du serveur pour éviter la réutilisation. Cela rend essentiellement l'url "usage unique seulement". Si un jeton non valide est utilisé, renvoie le code approprié headers comme la réponse , comme un 403 peut-être.
pour ajouter un peu plus de sécurité, imposez une expiration de l'url en stockant son timestamp avec le token. Comparez ensuite l'horodatage de la requête avec l'horodatage stocké s'il est toujours dans la "fenêtre d'utilisation". Faites en sorte que cette "fenêtre d'utilisation" soit assez courte pour être utilisée par le lecteur sur la page, mais pas assez longtemps pour qu'un dérapeur puisse saisir cette url et la coller dans un autre onglet/Fenêtre/downloader.
il s'agit d'une solution simple pour ceux qui souhaitent simplement supprimer l'option de clic droit "enregistrer" des vidéos 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 ne pouvez pas les arrêter.
la meilleure façon que j'utilise habituellement est très simple, j'ai complètement désactivé le menu contextuel dans toute la page, pur html+javascript:
<body oncontextmenu="return false;">
C'est ça! Je fais cela parce que vous pouvez toujours voir la source par clic droit.
Ok, vous dites: "je peux utiliser directement la source de vue de navigateur" et c'est vrai, mais nous commençons par le fait que vous ne peut pas arrêter de télécharger html5 vidéos.
Oui, vous pouvez le faire en trois étapes:
- placez les fichiers que vous voulez protéger dans un sous-répertoire du répertoire où votre code est en cours d'exécution.
www.foo.com/player.html
www.foo.com/videos/video.mp4
-
enregistrer un fichier dans ce sous-répertoire nommé".htaccess " et ajouter les lignes 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 toujours nous assurer que tout utilisateur essayant de télécharger le fichier ne peut pas être directement servi le fichier.
-
pour une solution plus complète , maintenant servir la vidéo avec un lecteur flash (ou une toile html) et ne jamais lier directement à la vidéo. Pour supprimer le menu de clic droit, ajouter à votre HTML:
<body oncontextmenu="return false;">
Le Résultat:
www.foo.com/player.html jouera 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 l'appelez.
il s'agit d'une réponse complète aux deux questions posées et non d'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."
PHP envoie la balise 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, PHP est demandé 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 de copier l'url dans un nouvel onglet ou utiliser le menu contextuel, il n'aura aucune chance.
OUI, VOUS POUVEZ :
en tant que développeur côté client je recommande d'utiliser L'URL blob, Blob URL est une URL côté client qui réfèrent un objet binaire
<video id="id" width="320" height="240" type='video/mp4' controls > </video>
en html laissez votre vidéo src en blanc,
et dans JS fetch le fichier vidéo en utilisant 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();
}
vous pouvez au moins empêcher les personnes non-tech savvy d'utiliser le menu contextuel de clic droit pour télécharger votre vidéo. Vous pouvez désactiver le menu contextuel pour n'importe quel élément en utilisant l'attribut oncontextmenu.
oncontextmenu="return false;"
cela fonctionne pour l'élément de corps (page entière) ou juste une seule vidéo en l'utilisant à l'intérieur de la balise vidéo.
<video oncontextmenu="return false;" controls>...</video>
+1 simple et cross-browser way: Vous pouvez également placer l'image transparente sur la vidéo avec CSS z-index et opacité. Ainsi, les utilisateurs verront "save picture as" au lieu de "save video" dans le menu contextuel.
en utilisant un service tel que Vimeo: inscrivez Vimeo > Goto Video > Settings > Privacy > Mark as Secured , et sélectionnez également les domaines embed. Une fois que les domaines embed sont définis, il ne permettra à personne 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 qui est sécurisée sur votre serveur qui charge le lecteur Vimeo dans iframe, cela rend assez difficile de se déplacer.
nous avons fini par utiliser AWS CloudFront avec des URLs expirantes. La vidéo se chargera, mais au moment où le droit de l'utilisateur clique et choisit enregistrer que l'url de la vidéo qu'ils ont initialement reçu a expiré. Faites une recherche D'identité D'accès CloudFront Origin.
la production de l'url vidéo nécessite une paire de clés qui peut être créée dans le clip AWS. Pour info ce n'est pas mon code mais ça marche très bien!
$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>';
tout d'abord réaliser il est impossible d'empêcher complètement une vidéo d'être téléchargé, tout ce que vous pouvez faire est de le rendre plus difficile . I. e. vous masquer la source de la vidéo.
un navigateur Web télécharge temporairement la vidéo dans un tampon, donc si vous pouviez empêcher le téléchargement, vous empêcheriez aussi la vidéo d'être vue.
, Vous devez également savoir que <1% de la population totale du monde sera capable de comprendre le code source le rendant de toute façon assez sûr. Cela ne signifie pas que vous ne devriez pas le cacher dans la source aussi bien - vous devriez .
Vous devriez pas désactiver le clic droit, et encore moins de vous devrait 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. En outre, s'ils désactivent JavaScript sur leur navigateur, ils sera être en mesure de droit cliquer et enregistrer de toute façon.
voici un truc CSS que vous pouvez utiliser:
video {
pointer-events: none;
}
CSS ne peut pas être désactivé dans le navigateur, la protection de votre vidéo sans effectivement désactiver le clic droit. Toutefois, un problème est que controls ne peut pas non plus être activé, en d'autres termes, ils doivent être définis à false . Si vous allez à inplament votre propre fonction Play / Pause ou utiliser une API qui a des boutons séparés de la balise video alors c'est une option réalisable.
controls a aussi un bouton de téléchargement donc l'utiliser n'est pas une bonne idée non plus.
voici un exemple de JSFiddle .
si vous voulez désactiver le clic droit en utilisant JavaScript, alors aussi stocker la source de la vidéo en JavaScript comme bien. De cette façon, si L'utilisateur désactive JavaScript (permettant le clic droit) la vidéo ne se chargera pas (il cache également la source vidéo un peu mieux).
à Partir de TxRegex réponse :
<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
une autre façon d'empêcher le clic droit implique en utilisant la balise embed . Cela ne fournit toutefois pas les contrôles pour exécuter la vidéo de sorte qu'ils devraient être intégrés dans JavaScript:
<embed src="https://www.w3schools.com/html/mov_bbb.mp4"></embed>
le
<body oncontextmenu="return false;">
ne fonctionne plus. Chrome et Opera à partir de juin 2018 a un sous-menu sur la ligne de temps pour permettre le téléchargement direct, de sorte que l'utilisateur n'a pas besoin de clic droit pour télécharger cette vidéo. Il est intéressant de noter que Firefox et Edge n'ont pas ceci ...
il semble que le streaming de la vidéo à travers websocket est une option viable, comme dans stream les cadres et les dessiner sur une toile sorte de chose.
vidéo en continu sur des websockets en utilisant JavaScript
je pense que cela fournirait un autre niveau de protection rendant plus difficile pour le client d'acquérir la vidéo et bien sûr résoudre votre problème avec" Save video as..."option de menu contextuel clic droit (overkill ?! ).
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>@Clayton-Graul avait ce que je cherchais, sauf que j'avais besoin de la version CoffeeScript pour un site utilisant AngularJS. Juste au cas où vous en auriez besoin, voici ce que vous avez mis dans le contrôleur AngularJS en question:
# This is how to we do JQuery ready() dom stuff
$ ->
# let's hide those annoying download video options.
# of course anyone who knows how can still download
# the video, but hey... more power to 'em.
$('#my-video').bind 'contextmenu', ->
false
"des choses étranges sont à pied au cercle k" (c'est vrai)