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

Question

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

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

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

16 128

javascript html5 android-menu right-click html5-video

16 ответов:

Это простое решение для тех, кто хочет просто удалить опцию "Сохранить" Правой Кнопкой Мыши из видео html5
$(document).ready(function(){
   $('#videoElementID').bind('contextmenu',function() { return false; });
});

102

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

ТЫ НЕ МОЖЕШЬ

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

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

31

лучший способ, который я обычно использую, очень прост, я полностью отключаю контекстное меню на всей странице, чистый html + javascript:
 <body oncontextmenu="return false;">
вот именно! Я делаю это, потому что вы всегда можете увидеть источник Правой Кнопкой Мыши.
Хорошо, вы говорите: "Я могу использовать непосредственно источник просмотра браузера", и это правда, но мы начинаем с того, что вы НЕ МОГУ остановить загрузку html5 видео.

21

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

www.foo.com/player.html
www.foo.com/videos/video.mp4
сохраните файл в этом подкаталоге с именем ".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]
теперь исходная ссылка бесполезна, но нам все равно нужно убедиться, что любой пользователь, пытающийся загрузить файл, не может быть непосредственно обслужен файлом.
на более полное решение, теперь подавайте видео с помощью flash-плеера (или 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 извлеките видеофайл с помощью 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-индексом и непрозрачностью. Таким образом, пользователи увидят "сохранить изображение как" вместо "сохранить видео" в контекстном меню.

3

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

1

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

для создания url-адреса видео требуется пара ключей, которая может быть создана в AWS CLI. К вашему сведению это не мой код, но он отлично работает!
$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 тег, то это осуществимый вариант.

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 тег. Это, однако, не предоставляет элементы управления для запуска видео, поэтому они должны быть включены в 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

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

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

@Clayton-Graul было то, что я искал, за исключением того, что мне нужна была версия CoffeeScript для сайта с использованием AngularJS. На всякий случай вам это тоже нужно, вот что вы ставите в контроллер AngularJS в вопросе:
    # 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

Joseph · Accepted Answer · 2014-07-31 05:05:26

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

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

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

подготовьте вкладку Сеть вашего предпочтительный отладчик браузера и пусть видео загружается. Затем поищите его в загруженных ресурсах. Видео обычно передаются в потоковом режиме .flv или .MP4, и аудио .МР3. Если вы заметили URL-адрес, открыть новую вкладку/Окно и откройте ссылку там. Затем браузер загрузит файл.

что делает его сложнее

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

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

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

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

предопределить на HTML или динамически вставить <canvas> в дом. Это "игрок", который видит пользователь.

динамически создать тег видео через JS, добавить его в DOM hidden и дать ему url для потока. Это будет источник видео для холста.

затем с помощью JS, вы периодически захватывать данные из <video> вы только что создали и привлечь его к <canvas>. С помощью этого шага видео поступает на холст.

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

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

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-адрес и вставил его в другую вкладку/Окно/загрузчик.