Запретить загрузку видео HTML5 (щелкните правой кнопкой мыши сохранить)?

Как отключить " сохранить видео как..."из меню правой кнопки мыши браузера, чтобы предотвратить загрузку видео клиентами?

существуют ли более полные решения, которые не позволяют клиенту напрямую обращаться к пути к файлу?

128
html5 html5-video javascript menu right-click

16 ответов

на самом деле,вы можете. Но!--10-->вы можете сделать его труднее скачать.

браузеры делают захват слишком легким

потому что именно для этого были разработаны браузеры:содержание - что значит дайте содержание пользователю. Чтобы показать вам, как это легко, вот как я обычно хватаю видео практически любой сайт потокового видео:

подготовить вкладке Сеть предпочтительный отладчик браузера и пусть видео загружается. Тогда ищите его в загруженных ресурсах. Видео обычно транслируются .flv или .mp4, и аудио внутри .mp3. Когда вы обнаружите url, откройте новую вкладку / Окно и откройте ссылку там. Затем браузер загрузит файл.

затрудняя

вот методы, чтобы сделать жизнь граббера сложнее. Как я уже говорил ранее, это не методы защиты от дураков, но могут, по крайней мере, отвратить skiddies.

видео к технике холста

недавно я наткнулся эта статья из HTML5Doctor пока исследующ обнаружение движения в JS. Это включает в себя потоковое видео через <video>, затем с некоторыми JS, буквально скопируйте видео в <canvas>. вот пример где видео находится спереди, в то время как холст сзади получает данные из того же видео.

по существу, что вы делаете есть:

  • Предопределите HTML или динамически вставьте <canvas> к DOM. Это "игрок", который видит пользователь.
  • динамически создайте тег видео через JS, добавьте его в DOM hidden и дайте ему url-адрес для потока. Это будет источником видео для холста.
  • затем с JS вы периодически захватываете данные из <video> вы только что создали и привлечь его к <canvas>. С этим шагом видео будет передано холст.

это самое основное из всей рутины. Поскольку ваш плеер теперь холст и истинное видео скрыты, вы можете попробовать щелкнуть правой кнопкой мыши все, что хотите, и сохранить. Поскольку холст действует как изображение на странице, вы можете сохранить только снимок кадра, который был отображен на холсте. Что касается управления, JS имеет API для управления <video> так что вы можете создавать пользовательские кнопки и ползунки.

однако, если они знают, что вы делаете это, они найдете ваш скрытый видео элемент, и вы облажались. Это приводит нас к следующему методу, который дополняет этот front-end только метод, с помощью со стороны сервера.

url временных ресурсов

одна вещь вы можете сделать, чтобы предотвратить этот метод является предотвратить ссылку от повторного использования. Сделайте ссылку одноразовой, временной, одноразовой. Как только игрок загружает с помощью одноразового url-адреса, утилизируйте его. Сделай это непригодный.

аналогично предотвращение CSRF, когда браузер запрашивает страницу с вашим видео, создайте случайный токен и сохраните его в некотором хранилище на стороне сервера для последующего использования. В то же время, добавьте его к url вашего видео, что-то вроде этого:

//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

теперь, когда ваш плеер загружает видео, он будет использовать этот url, который несет маркер. Сервер проверки маркера.

если это хорошо, поток видео и уничтожить маркер с сервера чтобы избежать повторного использования. Это по существу делает url "только один раз использовать". Если используется недопустимый токен, верните соответствующие заголовки в качестве ответа, как 403 возможно.

чтобы добавить немного больше безопасности, наложите срок действия url-адреса, сохранив его временную метку вместе с токеном. Затем сравните метку времени запроса с сохраненной меткой времени, если она все еще находится в "окне использования". Сделайте это " использовать окно " достаточно короткое, чтобы использовать плеер на странице, но недостаточно длинное для skiddie, чтобы захватить этот url-адрес и вставить его в другую вкладку/Окно/загрузчик.

176

Это простое решение для тех, кто хочет просто удалить опцию "Сохранить" Правой Кнопкой Мыши из видео html5

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

простой ответ,

НЕЛЬЗЯ

Если они смотрят ваше видео, они уже

вы можете замедлить их, но не можете остановить их.

31

лучший способ, который я обычно использую, очень прост, я полностью отключаю контекстное меню на всей странице, чистый html+javascript:

 <body oncontextmenu="return false;">

вот именно! Я делаю это, потому что вы всегда можете увидеть источник Правой Кнопкой Мыши.
Хорошо, вы говорите: "Я могу использовать непосредственно источник просмотра браузера", и это правда, но мы начинаем с того, что вы НЕ МОГУ остановить загрузку html5 видео.

21

Да, вы можете сделать это в три шага:

  1. поместите файлы, которые вы хотите защитить, в подкаталог каталога, в котором выполняется ваш код.

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

  2. сохраните файл в этом подкаталоге с именем ".htaccess " и добавьте строки ниже.

    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]

теперь ссылка на источник бесполезно, но нам все равно нужно убедиться, что любой пользователь, пытающийся загрузить файл, не может быть напрямую обслужен файлом.

  1. на более полное решение, теперь служить видео с флэш-плеер (или HTML-холст), а не ссылку на видео прямо. Чтобы просто удалить меню правой кнопкой мыши, добавьте в HTML-код:

    <body oncontextmenu="return false;">


Результат:

www.foo.com/player.html будет правильно воспроизводить видео, но если вы посетите www.foo.com/videos/video.mp4:

код ошибки 403: запрещено


это будет работать для прямой загрузки, cURL, hotlinking, вы называете его.

это полный ответ на два заданных вопроса, а не ответ на вопрос: "Могу ли я остановить пользователя от загрузки видео, которое они уже загрузили."

18

PHP отправляет тег видео html5 вместе с сеансом, где ключ представляет собой случайную строку, а значение-имя файла. 

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>';

теперь PHP просят отправить видео. PHP восстанавливает имя файла; удаляет сеанс и отправляет видео мгновенно. Кроме того, должны присутствовать все заголовки "нет кэша" и MIME-типа.

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:

теперь, если пользователь скопирует url в новой вкладке или использует контекстное меню, ему не повезет.

10

ДА ВЫ МОЖЕТЕ :

В качестве разработчика на стороне клиента я рекомендую использовать BLOB URL, blob URL-это URL на стороне клиента, который ссылается на двоичный объект 

<video id="id" width="320" height="240"  type='video/mp4' controls  > </video>

в html оставьте свое видео src пустым, и в JS fetch видеофайл с помощью AJAX, убедитесь, что тип ответа 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();
}
9

Вы можете по крайней мере остановить нетехнических подкованных людей от использования контекстного меню правой кнопкой мыши, чтобы загрузить видео. Вы можете отключить контекстное меню для любого элемента, используя атрибут oncontextmenu.

oncontextmenu="return false;"

это работает для элемента body (целая страница) или только одного видео, используя его внутри тега video.

<video oncontextmenu="return false;" controls>...</video>
5

+1 простой и кроссбраузерный способ: Вы также можете поместить прозрачное изображение поверх видео с css z-index и непрозрачностью. Таким образом, пользователи будут видеть "сохранить изображение как" вместо "сохранить видео" в контекстном меню.

3

использование службы, такой как Vimeo: Sign in Vimeo > Goto Video > Settings > Privacy > Mark as Secured, а также выберите внедрить Домены. После того, как Домены embed установлены, он не позволит никому вставлять видео или отображать его из браузера, если подключение из указанных доменов. Итак, если у вас есть страница, защищенная на вашем сервере, которая загружает плеер Vimeo в iframe, это делает его довольно сложным для обхода.

1

в итоге мы использовали AWS CloudFront с истекающими URL-адресами. Видео загрузится, но к тому времени, когда пользователь щелкнет правой кнопкой мыши и выберет Сохранить как url-адрес видео, который они изначально получили, истек. Выполните поиск идентификатора доступа к CloudFront Origin.

для создания url-адреса видео требуется пара ключей, которая может быть создана в AWS CLI. FYI это не мой код, но он отлично работает!

$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

прежде всего осознайте невозможно полностью предотвратить загрузку видео, все, что вы можете сделать, это сделать его более сложным. Т. е. вы скрываете Источник видео.

веб-браузер временно загружает видео в буфер, поэтому, если может предотвратить загрузку, вы также предотвратите просмотр видео.

вы также должны знать, что вы должны.

вы должны не отключить щелчок правой кнопкой мыши, и еще меньше вы должны отобразить сообщение, говорящее "You cannot save this video for copyright reasons. Sorry about that.". Как предложено в ответ.

это может быть очень раздражает и запутывает пользователя. Кроме того, если они отключить JavaScript в своем браузере, они будет уметь щелкните правой кнопкой мыши и сохраните.

вот трюк CSS, который вы можете использовать:

video {
    pointer-events: none;
}

CSS нельзя отключить в браузере, защищая ваше видео без фактического отключения правой кнопки мыши. Однако одна проблема заключается в том, что controls также не может быть включен, другими словами, они должны быть установлены в false. Если вы собираетесь дополнить свою собственную функцию воспроизведения / паузы или использовать API, который имеет кнопки, отдельные для video tag тогда это осуществимый вариант.

controls также есть кнопка Скачать это не такая хорошая идея.

здесь JSFiddle пример.

если вы собираетесь отключить щелчок правой кнопкой мыши с помощью JavaScript, то также сохраните Источник видео в JavaScript. Таким образом, если пользователь отключает JavaScript (позволяет щелкнуть правой кнопкой мыши), видео не загружается (он также скрывает источник видео немного лучше).

С TxRegex ответ: 

<video oncontextmenu="return false;" controls>
    <source type="video/mp4" id="video">
</video>

теперь добавьте видео через JavaScript:

document.getElementById("video").src = "https://www.w3schools.com/html/mov_bbb.mp4";

функциональное JSFiddle

другой способ предотвратить щелчок правой кнопкой мыши включает в себя использование embed тег. Это, однако, не предоставляет элементы управления для запуска видео, поэтому они должны быть inplamented в JavaScript:

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

на

<body oncontextmenu="return false;">

больше не работает. Chrome и Opera по состоянию на июнь 2018 года имеют подменю на временной шкале, чтобы разрешить прямую загрузку, поэтому пользователю не нужно щелкнуть правой кнопкой мыши, чтобы загрузить это видео. Интересно, что Firefox и Edge этого не имеют ...

1

похоже, что потоковое видео через websocket является жизнеспособным вариантом, как в потоке кадров и рисовать их на холсте.

потоковое видео через websockets с помощью JavaScript

Я думаю, что это обеспечит другой уровень защиты, что затруднит для клиента приобретение видео и, конечно, решит вашу проблему с "сохранить видео как..."щелкните правой кнопкой мыши пункт контекстного меню ( overkill ?! ).

0

вот что я сделал:

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>
Это также работает для изображений, текста и почти все. Тем не менее, вы все еще можете получить доступ к инструменту "Inspect" и "View source" с помощью сочетаний клавиш. (Как говорится в ответе наверху, вы не можете полностью остановить его.) Но вы можете попытаться поставить барьеры, чтобы остановить их.
0
    # 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

"странные вещи происходят в круге k" (это правда)

-1