Empêcher le téléchargement de la vidéo HTML5 (clic droit enregistré)?


173

Comment puis-je désactiver "Enregistrer la vidéo sous ..." dans le menu contextuel d'un navigateur pour empêcher les clients de télécharger une vidéo?

Existe-t-il des solutions plus complètes qui empêchent le client d'accéder directement à un chemin de fichier?


3
J'ai voté à la hausse pour cette question car elle ne demande absolument comment "désactiver le clic droit" pour une vidéo HTML5. Je ne sais pas si c'est similaire à la désactivation du clic droit pour les images normales ou s'il existe d'autres astuces de superposition, etc., qui peuvent être appliquées.

3
Même si vous désactivez le clic droit, ils peuvent toujours l'enregistrer à partir du menu du navigateur ( File→Save As). Même si vous pouviez bloquer cela d'une manière ou d'une autre, ils peuvent afficher la source pour trouver l'URL du fichier. Même si vous pouviez obscurcir un peu cela, ils peuvent l'extraire du cache. Même si vous pourriez compliquer cela (par exemple, le flux), ils peuvent capturer le trafic réseau avec un renifleur ou quelque chose. Le fait est que si vous l'envoyez à un utilisateur, il peut l'enregistrer. Pas moyen de contourner cela. La question que vous devez vous poser est de savoir pourquoi vous devez si mal l'arrêter. Est-ce vraiment nécessaire? Vaut-il l'effort et le manque de convivialité?
Synetech

J'aime la réponse TxRegex la meilleure en tant que solution de base rapide.
jsherk

Je vais avoir l'air pédant ici, mais vous surchargez le terme "télécharger". Vous souhaitez bien sûr autoriser le téléchargement de la vidéo.
Johan Boulé

Réponses:


227

Vous ne pouvez pas . C'est parce que c'est ce pour quoi les navigateurs ont été conçus: diffuser du contenu . Mais vous pouvez rendre le téléchargement plus difficile .

Tout d'abord, vous pouvez désactiver l' contextmenuévénement , c'est-à-dire "le clic droit". Cela empêcherait votre skiddie habituel d'extraire de manière flagrante votre vidéo en cliquant avec le bouton droit de la souris et en enregistrant sous. Mais ensuite, ils pourraient simplement désactiver JS et contourner cela ou trouver la source vidéo via le débogueur du navigateur. De plus, c'est une mauvaise UX. Il y a beaucoup de choses légitimes dans un menu contextuel que le simple Enregistrer sous.

Vous pouvez également utiliser des bibliothèques de lecteurs vidéo personnalisées. La plupart d'entre eux implémentent des lecteurs vidéo qui personnalisent le menu contextuel à votre guise. Vous n'obtenez donc pas le menu contextuel par défaut du navigateur. Et si jamais ils servent un élément de menu similaire à Enregistrer sous, vous pouvez le désactiver. Mais encore une fois, c'est une solution de contournement JS. Les faiblesses sont similaires à l'option précédente.

Une autre façon de le faire est de diffuser la vidéo en utilisant HTTP Live Streaming . Ce qu'il fait essentiellement, c'est découper la vidéo en morceaux et la servir les uns après les autres. C'est ainsi que la plupart des sites de streaming diffusent des vidéos. Ainsi, même si vous parvenez à enregistrer sous, vous n'enregistrez qu'un morceau, pas la vidéo entière. Il faudrait un peu plus d'efforts pour rassembler tous les morceaux et les assembler à l'aide d'un logiciel dédié.

Une autre technique consiste à peindre <video>sur<canvas> . Dans cette technique, avec un peu de JavaScript, ce que vous voyez sur la page est un <canvas>élément rendant des cadres à partir d'un caché <video>. Et comme c'est un <canvas>, le menu contextuel utilisera <img>le menu d'un, pas celui d'un <video>. Vous obtiendrez une image Enregistrer sous au lieu d'une vidéo Enregistrer sous.

Vous pouvez également utiliser les 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 diffuser la vidéo ou d'obtenir un HTTP 401 . L'idée est que vous ne pouvez obtenir une vidéo qu'en ayant un jeton que vous ne pouvez obtenir que si vous venez de la page, et non en visitant directement l'URL de la vidéo.

À la fin de la journée, je téléchargerais simplement ma vidéo sur un site vidéo tiers, comme YouTube ou Vimeo. Ils disposent de bons outils de gestion vidéo, optimisent la lecture sur l'appareil et s'efforcent d'éviter que leurs vidéos ne soient extraites sans effort de votre part.


1
merci pour la réponse détaillée, est-il possible au moins de désactiver l'option Enregistrer sous dans le menu contextuel? il couvrira la plupart des cas de connaissances de base
python

2
cela dépend du navigateur. J'ai vu des fois (en particulier Firefox et Chrome) que si la vidéo est complètement chargée, lorsque vous cliquez sur "Enregistrer", ils choisissent simplement la vidéo dans le cache au lieu de la retélécharger (la vidéo est déjà téléchargée dans le cache, pourquoi la télécharger encore?), il n'y a donc pas de deuxième demande. la méthode ci-dessus n'est applicable que lorsque le lien est réutilisé.
Joseph

1
Eh bien, j'ai trouvé un article sur la superposition de la balise vidéo avec un div. a mis à jour ma réponse
Joseph

2
Merci. Je viens de lire craftymind.com/factory/html5video/CanvasVideo.html . L'idée est presque la même que votre réponse.
Trung le

1
@Cupidvogel L '"url d'utilisation unique" est un point de terminaison de serveur qui accepte un jeton généré par le serveur. Le jeton est généré lors de la génération de la page et enregistré dans la base de données. Il est également livré avec la page à partir srcdu <video>. Au moment où votre page est chargée, la base de données a le jeton, la page a le jeton. Une fois le <video>chargement commencé (accède au point de terminaison), le serveur vérifie si le jeton se trouve dans la base de données, le supprime et diffuse le fichier. Si le jeton n'est pas là à la suite d'un deuxième accès , ne diffusez pas le fichier.
Joseph

118

C'est une solution simple pour ceux qui souhaitent simplement supprimer l'option "enregistrer" du clic droit des vidéos html5

$(document).ready(function(){
   $('#videoElementID').bind('contextmenu',function() { return false; });
});

C'est fantastique ! Il fait un excellent travail en empêchant les gens ordinaires de télécharger la vidéo!
Etienne Noël

2
Cela n'aide cependant pas si JavaScript est désactivé dans le navigateur.
mvark

2
Merci, cette solution est suffisante pour 90% de tous nos visiteurs.
Kai Noack

2
Bleh. Inspectez simplement l'élément dans Firebug, voyez l' srcattribut et ouvrez-le dans un autre onglet ou utilisez-le wgetpour le télécharger!
SexyBeast

11
Je pense que l'objectif principal est d'éviter que les utilisateurs "normaux" ne téléchargent la vidéo. C'est une bonne solution pour résoudre cette situation.
Unapedra le

37

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.


À propos, cette réponse s'applique aux vidéos HTML5, aux vidéos flash ou à toute technologie que vous pouvez imaginer à l'avenir. C'est simple: c'est comme ça que ça marche.
Gustavo Rodrigues

Et qu'en est-il de YouTube?, Sur youtube, vous ne pouvez pas facilement découvrir le fichier vidéo. Je veux dire que ok, vous avez raison, nous pouvons, mais il est facile de cacher la source mp4 sur youtube ou un hébergement vidéo similaire que d'héberger un simple mp4 sur notre serveur et d'utiliser le lecteur html5.
dlopezgonzalez

2
Ce n’est pas une réponse à aucune des questions.
Tzshand

1
Les gens peuvent enregistrer l'intégralité de leur écran et de l'audio et tromper toutes les solutions de contournement, c'est pourquoi ils ne peuvent être ralentis.
kintsukuroi

1
@IlanSchemoul Intéressant. Merci d'avoir partagé :)
Starx

33

Oui, vous pouvez le faire en trois étapes:


  1. Placez les fichiers que vous souhaitez protéger dans un sous-répertoire du répertoire dans lequel votre code s'exécute.

    www.foo.com/player.html
    www.foo.com/videos/video.mp4

  2. 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 toujours nous assurer que tout utilisateur qui tente de télécharger le fichier ne peut pas recevoir directement le fichier.

  1. Pour une solution plus complète , diffusez maintenant la vidéo avec un lecteur flash (ou un canevas html) et ne créez jamais de lien direct vers la vidéo. Pour supprimer simplement le menu contextuel, ajoutez à votre 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.

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."


1
Excellente réponse, mais vous avez un `que vous devriez supprimer de votre .htaccesscontenu
MAZux

2
Vous pouvez toujours simuler le référent HTTP, ce qui permettra à une personne de télécharger. Cependant, c'est une solution très intelligente. Si vous associez ceci avec un code à usage unique sur le fichier, vous êtes prêt à partir!
Shiroy

Il semble qu'IDM puisse toujours le télécharger!
PersianMan

@PersianMan Correct - Je vous encourage à lire les premières réponses
Tzshand

1
Si vous désactivez le javascript du navigateur, cette astuce ne fonctionnera pas, car le clic droit est activé. Pour éviter cela également, vous devez récupérer et charger l'élément vidéo de manière dynamique à l'aide de jquery.
Anindya Sankar Dasgupta

23

La meilleure façon que j'utilise habituellement est très simple, je désactive complètement le menu contextuel dans toute la page, pur html + javascript:

 <body oncontextmenu="return false;">

C'est tout! Je fais cela parce que vous pouvez toujours voir la source par un clic droit.
Ok, vous dites: "Je peux utiliser directement la source de la vue du navigateur" et c'est vrai mais nous partons du fait que vous NE POUVEZ PAS arrêter de télécharger des html5vidéos.


Je pense que la solution doit être celle qui ne dérange pas les utilisateurs "normaux", désactiver le clic droit empêchera les utilisateurs de copier et coller du texte, ou de rechercher un mot qui les intéresse, par exemple dans le titre de la vidéo, bien sûr que non tous les utilisateurs le feront probablement, mais cela peut être ennuyeux pour certains d'entre eux
John Balvin Arias

14

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 srcvide et dans JS récupérez 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();
}

Remarque: cette méthode n'est pas recommandée pour les fichiers volumineux

ÉDITER

  • Utilisez le blocage d'origine croisée pour éviter le téléchargement direct

  • si la vidéo est livrée par une API Utilisez une méthode différente (PUT / POST) au lieu de 'GET'


3
YouTube utilise Blob maintenant aussi je pense :)?
C0nw0nk

1
Pouvez-vous expliquer plus clairement ce qui se passe ici et comment configurer le serveur pour cela?
Anthony

1
@nerdofcode comment cela se comporte-t-il lorsque les utilisateurs essaient de transférer la vidéo? Auront-ils besoin d'attendre que tout le téléchargement de la vidéo?
John Balvin Arias

1
@JohnBalvinArias! Je n'ai pas testé cela à 100%, mais je vais dire qu'il n'a besoin que d'un tampon rapide ... Ne me citez pas à ce sujet cependant ...
NerdOfCode

1
Si j'inspecte la page, dans l'onglet Réseau, je reçois une demande de vidéo que je peux simplement ouvrir dans un nouvel onglet.
Simone

10

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 de 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 invité à 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.


J'aime la solution - elle résout la question des OP. Une chose malheureuse est, lorsque le vérifie le code source dans Chrome et fait un clic droit sur le lien. L'utilisateur téléchargera un fichier html, qui sera en fait le fichier vidéo.
user1252280

5

Vous pouvez au moins empêcher les non-experts en technologie d'utiliser le menu contextuel du clic droit pour télécharger votre vidéo. Vous pouvez désactiver le menu contextuel pour n'importe quel élément à l'aide de l'attribut oncontextmenu.

oncontextmenu="return false;"

Cela fonctionne pour l'élément body (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>

5

Nous avons fini par utiliser AWS CloudFront avec des URL expirant. La vidéo se chargera, mais au moment où l'utilisateur cliquera avec le bouton droit de la souris et choisit Enregistrer sous, l'URL de la vidéo initialement reçue 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 qui peut être créée dans l'AWS CLI. FYI 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>';

1
Commentaire très sous-estimé. Je conseillerais cependant d'utiliser docs.aws.amazon.com/sdk-for-php/v3/developer-guide/… de nos jours.
Zmart

Si le jeton expire, cela signifie-t-il qu'ils ne peuvent pas non plus naviguer dans la vidéo? Comme cela semble contacter à nouveau l'URL de la vidéo.
Chud37

4

Nous pourrions rendre cela pas si facile en masquant le menu contextuel, comme ceci:

<video oncontextmenu="return false;"  controls>
  <source src="https://yoursite.com/yourvideo.mp4" >
</video>

3

+1 manière simple et multi-navigateurs: vous pouvez également mettre une image transparente sur la vidéo avec un z-index et une opacité css. Ainsi, les utilisateurs verront «enregistrer l'image sous» au lieu de «enregistrer la vidéo» dans le menu contextuel.


2
pourquoi pic il faudra du temps à charger alors ne mettez que la balise div et ils obtiendront un grand menu de chrome comme le rechargement arrière, etc.
Waqas Tahir

Je ne suis pas sûr, mais la vidéo peut être téléchargée via Fichier> Enregistrer sous
Arun Kumar

3

le

<body oncontextmenu="return false;"> 

ne fonctionne plus. Chrome et Opera à partir de juin 2018 ont un sous-menu sur la chronologie pour permettre un téléchargement direct, donc l'utilisateur n'a pas besoin de cliquer avec le bouton droit pour télécharger cette vidéo. Fait intéressant, Firefox et Edge ne l'ont pas ...


2

À l'aide d'un service tel que Vimeo: connectez-vous Vimeo > Goto Video > Settings > Privacy > Mark as Securedet sélectionnez également les domaines d'intégration. Une fois les domaines d'intégration 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 sécurisée sur votre serveur qui charge le lecteur Vimeo dans iframe, cela rend les déplacements assez difficiles.


2

Tout d'abord, sachez qu'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 . Ie vous cachez la source de la vidéo.

Un navigateur Web télécharge temporairement la vidéo dans une mémoire tampon, donc si cela pouvait empêcher le téléchargement, vous empêcheriez également la vidéo d'être visionnée.

Vous devez également savoir que <1% de la population totale du monde sera capable de comprendre le code source, ce qui le rend de toute façon assez sûr. Cela ne signifie pas que vous ne devez pas non plus le cacher dans la source - vous devriez le faire .

Vous ne devez pas désactiver le clic droit et encore moins 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 pourront quand même faire un clic droit et enregistrer.

Voici une astuce 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 réellement désactiver le clic droit. Cependant, un problème est qu'il controlsne peut pas non plus être activé, en d'autres termes, ils doivent être définis sur false. Si vous allez installer votre propre fonction Lecture / Pause ou utiliser une API qui a des boutons séparés de la videobalise, c'est une option réalisable.

controls a également un bouton de téléchargement, donc l'utiliser n'est pas non plus une bonne idée.

Voici un exemple JSFiddle .


Si vous souhaitez désactiver le clic droit à l'aide de JavaScript, stockez également la source de la vidéo dans JavaScript. De cette façon, si l'utilisateur désactive JavaScript (permettant un clic droit), la vidéo ne se chargera pas (elle masque également un peu mieux la source vidéo).

De la 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";

JSFiddle fonctionnel


Une autre façon d'empêcher le clic droit consiste à utiliser la embedbalise. Cela ne fournit cependant pas les contrôles pour exécuter la vidéo, ils devraient donc être intégrés en JavaScript:

<embed src="https://www.w3schools.com/html/mov_bbb.mp4"></embed>

1
L'ajout de l'URL src via JavaScript n'est pas très utile. L'inspection du DOM affichera l'URL à la vue une fois que le script l'a définie.
Simone

@Simone Je suis d'accord, mais c'est mieux que de le montrer directement dans le source html, où quiconque fait un clic droit dessus peut le voir immédiatement. Vous pouvez toujours diviser l'url ou la crypter. Mais rappelez-vous qu'il s'agit d'un traitement supplémentaire
Simon

"CSS ne peut pas être désactivé dans le navigateur" - Techniquement, vous pouvez modifier le CSS dans les outils de développement de navigateur Web pour désactiver certaines règles CSS, afin qu'une personne plus technophile puisse supprimerpointer-events: none;
Phil Gibbins

2

Eh bien, vous ne pouvez pas le protéger à 100%, mais vous pouvez le rendre plus difficile. ces méthodes que j'explique , je les ai affrontées lors de l'étude des méthodes de protection dans PluralSight et BestDotNetTraining . néanmoins, aucune de ces méthodes ne m'a empêché de télécharger ce que je veux, mais j'ai eu du mal à organiser le téléchargeur pour passer sa protection.

En plus d'autres méthodes mentionnées pour désactiver le menu contextuel. l'utilisateur peut toujours utiliser des outils tiers comme InternetDownload Manager ou un autre logiciel similaire pour télécharger les vidéos. la méthode de protection que j'explique ici est d'atténuer ces logiciels tiers.

l'exigence de toutes ces méthodes est de bloquer un utilisateur lorsque vous identifiez quelqu'un qui télécharge vos vidéos. de cette façon, ils ne peuvent télécharger qu'une ou deux vidéos uniquement avant que vous ne leur interdisiez d'accéder à votre site Web.

avertissement

Je n'accepterai aucune responsabilité si quelqu'un abuse de ces méthodes ou les utilise pour nuire à d'autres ou aux sites Web que j'ai mentionnés à titre d'exemple. c'est juste pour partager des connaissances pour vous aider à protéger votre produit intellectuel.

générer des liens avec une expiration

la condition requise pour cela est de créer un lien de téléchargement par utilisateur. celui-ci peut facilement être géré par le stockage blob azure ou amazon s3. vous pouvez créer un lien de téléchargement avec deux fois l'horodatage d'expiration de la durée de la vidéo. Ensuite, vous devez capturer ce lien vidéo et l'heure demandée. cela est nécessaire pour la méthode suivante. le hic pour cette méthode est que vous générez le lien de téléchargement lorsque l'utilisateur clique sur le bouton de lecture.

lors de l'événement du bouton de lecture, vous enverrez une demande au serveur, obtenez le lien et mettez à jour la source.

réduire le taux de demande de vidéo

puis vous surveillez la vitesse à laquelle l'utilisateur demande la deuxième vidéo. si l'utilisateur demande un lien de téléchargement trop rapidement, vous le bloquez immédiatement. vous ne pouvez pas mettre ce seuil trop grand car vous pouvez bloquer par erreur les utilisateurs qui ne font que parcourir ou parcourir les vidéos.

Activer la plage HTTP

utilisez une bibliothèque js comme videojs pour lire votre vidéo, vous devez également renvoyer un AcceptRange dans votre en-tête. Le stockage d'objets blob Azure prend en charge cela par défaut. de cette façon, le navigateur commence à télécharger la vidéo morceau par morceau. généralement, 32 octets par 32 octets. alors vous devez écouter le timeupdatechangement de videojs et mettre à jour votre serveur sur le pourcentage de visionnage de la vidéo. le pourcentage de visionnage de la vidéo ne peut pas être supérieur au pourcentage de diffusion de la vidéo. et si vous diffusez un contenu vidéo sans recevoir de changement de pourcentage, vous pouvez bloquer l'utilisateur. parce que c'est sûr qu'ils téléchargent.

l'implémentation est délicate car l'utilisateur peut sauter la vidéo en avant ou en arrière, alors soyez conscient de cela lorsque vous l'implémentez.

c'est ainsi que BestDotnetTraining gère le timeupdate

myPlayer.ready(function () {
    //var player = this;
    this.src({
        type: "video/mp4",
        src: videoURL
    });
    if (videoId) {
        myPlayer.play();
        this.on('timeupdate', function () {
            var currentPercent = parseInt(100 * myPlayer.currentTime() / myPlayer.duration());//calcualte as percentage
            if (currentPercent % 5 == 0) {
                //send percentage to server 
                SaveVideoDurationWatched(currentPercent, videoId);
            }
        });
    }

});

de toute façon, l'utilisateur est capable de contourner ce problème en utilisant une méthode de téléchargement qui télécharge un fichier via le streaming. presque c # faites-le hors de la boîte et pour nodejs, vous pouvez utiliser requestmodule. Ensuite, vous devez démarrer un chronomètre, écouter un paquet reçu et comparer l'octet total reçu par rapport à la taille totale. de cette façon, vous pouvez calculer un pourcentage et le temps passé pour obtenir ce pourcentage. puis utilisez le Thread.Sleep()ou quelque chose comme ça pour retarder le thread le montant que vous devez attendre si vous regardez la vidéo normalement. également avant la mise en veille, l'utilisateur peut appeler le serveur et mettre à jour le pourcentage reçu. donc le serveur pense que l'utilisateur regarde réellement une vidéo.

le calcul sera quelque chose comme ceci, par exemple, si vous calculez que vous avez reçu 1 pour cent jusqu'à présent, vous pouvez calculer le montant que vous devez attendre pour dormir le fil de téléchargement. de cette façon, vous ne pouvez pas télécharger une vidéo plus rapidement que sa longueur réelle. si une vidéo dure 24 min. il faudra 24 minutes pour le télécharger. (plus le seuil que nous avons mis dans la première méthode)

original video length 24 minute
24 min *60000 = 1,440,000 miliseconds 
1,440,000 % 100 = 14,400 milisecond is needed to download one percent

vérifier l'agent du navigateur

lorsque vous diffusez une page Web et que vous diffusez le lien vidéo ou que vous acceptez la demande de mise à jour de progression, vous pouvez consulter l'agent du navigateur. si c'est différent, bannissez l'utilisateur.

sachez simplement qu'un ancien navigateur ne transmet pas ces informations. vous devez donc l'ignorer lorsqu'il n'y a pas d'agent de navigateur dans la requête vidéo et la requête de page Web. mais si une demande l'a et une autre pas, alors vous devriez bannir l'utilisateur.

pour contourner ce problème, l'utilisateur peut définir manuellement l'en-tête de l'agent du navigateur comme le navigateur sans tête qu'il utilise pour capturer le lien de téléchargement.

vérifier l'en-tête du référent

lorsque le référent est autre chose que votre URL hôte ou l'URL de la page sur laquelle vous diffusez la vidéo, vous pouvez bannir l'utilisateur, car il place le lien de téléchargement dans un autre onglet ou une autre application. même vous pouvez le faire pour la demande de mise à jour de progression.

la condition pour cela est d'avoir un mappage de la vidéo et la page qui montre cette vidéo. vous pouvez créer une convention ou un modèle pour comprendre ce que devrait être l'URL, cela dépend de votre conception.

pour contourner ce problème, l'utilisateur peut définir manuellement l'en-tête du référent égal à l'URL de la page de téléchargement lors du téléchargement des vidéos.

Calculez le temps entre les demandes

si vous recevez tellement de demandes que le temps entre elles est le même, vous devez bloquer l'utilisateur. vous devez mettre cela pour capturer le temps écoulé entre la demande de génération de lien vidéo. s'ils sont identiques (plus / moins un certain seuil) et que cela se produit plus d'un certain nombre de fois, vous pouvez bannir l'utilisateur. car s'il y a un bot qui va explorer votre site Web ou vos vidéos, ils ont généralement le même temps de sommeil entre leur demande. donc si vous recevez chaque demande, par exemple, toutes les 1,3 (plus / min un écart) minutes. puis vous déclenchez une alarme. pour cela, vous pouvez utiliser un calcul statistique pour connaître l'écart entre les demandes.

pour contourner ce problème, l'utilisateur peut mettre un temps de sommeil aléatoire entre les demandes.

exemple de code

J'ai un repo PluralSight-Downloader qui le fait à moitié. J'ai créé ce repo il y a presque 5 ans. parce que je l'ai écrit à des fins d'étude et pour mon usage personnel uniquement, le dépôt n'a pas encore reçu de mise à jour et je ne vais pas le mettre à jour ou le rendre facile à travailler. ce n'est qu'un exemple de la façon dont cela peut être fait.



1

Réponse courte: Cryptez le lien comme le fait YouTube, je ne sais pas comment demander à youtube / google comment ils le font. (Juste au cas où vous voudriez entrer directement dans le vif du sujet.)

Je voudrais faire remarquer à quiconque que cela est possible parce que YouTube le fait et s'ils le peuvent, tout autre site Web le peut et ce n'est pas non plus à partir du navigateur parce que je l'ai testé sur quelques navigateurs tels que Microsoft Edge et Internet Explorer et il y a donc un moyen de le désactiver et de voir que les gens le disent encore ... J'essaie de chercher une réponse parce que si YouTube le peut, il doit y avoir un moyen et le seul moyen de voir comment ils le font est si quelqu'un a regardé les scripts de youtube que je fais maintenant. J'ai également vérifié pour voir 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 s'il était dessus et j'ai regardé et cela ne crée jamais de nouvelle classe et aussi est impossible d'accéder réellement à l'élément inspect avec javascript, donc cela ne peut pas être. Lorsque vous double-cliquez avec le bouton droit de la souris sur une vidéo youtube, vous pouvez dire que le menu contextuel de Chrome s'affiche. De plus ... YouTube n'ajouterait pas cette fonction. Je fais des recherches et je regarde la source de YouTube, donc je reviendrai si je trouve la réponse ... si quelqu'un dit que vous ne pouvez pas, eh bien, ils ne l'ont pas fait ' t faire des recherches comme moi. Le seul moyen de télécharger des vidéos youtube consiste à télécharger une vidéo.

D'accord ... j'ai fait des recherches et mes recherches restent que vous pouvez le désactiver sauf qu'il n'y a pas de javascript ... vous devez être capable de crypter les liens vers la vidéo pour que vous puissiez la désactiver car je pense que tout le navigateur ne l'affichera pas s'il ne le trouve pas et lorsque j'ai ouvert un lien vidéo youtube, il s'affichait sous la forme "blob: https://www.youtube.com/e5c4808e-297e-451f-80da-3e838caa1275"sans guillemets, il le crypte donc il ne peut pas être enregistré ... vous devez connaître php pour cela, mais comme la réponse que vous avez choisie pour rendre les choses plus difficiles, youtube en fait le plus difficile à chiffrer, vous devez être un avancez le programmeur php mais si vous ne le savez pas, prenez la personne que vous avez choisie comme meilleure réponse pour rendre son téléchargement difficile ... mais si vous connaissez php, cryptez lourdement le lien vidéo pour qu'il ne puisse être lu que dessus les vôtres ... Je ne sais pas comment expliquer comment ils le font, mais ils l'ont fait et il y a un moyen. La façon dont youtube chiffre les vidéos est assez intelligente, donc si vous voulez savoir comment, demandez simplement à youtube / google comment ils le font ... j'espère que cela vous aidera bien que vous ayez déjà choisi la meilleure réponse. Donc, crypter le lien est préférable à court terme.


0

Il semble que la diffusion en continu de la vidéo via websocket soit une option viable, comme diffuser les cadres et les dessiner sur une sorte de toile.

Streaming vidéo sur Websockets à l'aide de JavaScript

Je pense que cela fournirait un autre niveau de protection, ce qui rendrait plus difficile pour le client d'acquérir la vidéo et bien sûr de résoudre votre problème avec l'option de menu contextuel "Enregistrer la vidéo sous ..." (exagération?!).


0

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>
Cela fonctionne également pour les images, le texte et à peu près tout. Cependant, vous pouvez toujours accéder aux outils «Inspecter» et «Afficher la source» via des raccourcis clavier. (Comme le dit la réponse en haut, vous ne pouvez pas l'arrêter complètement.) Mais vous pouvez essayer de mettre des barrières en place pour les arrêter.


-1

@ 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 aussi, voici ce que vous mettez 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 se passent au cercle k" (c'est vrai)

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.