Предотвратить загрузку видео в формате HTML5 (щелчок правой кнопкой мыши сохранен)? - PullRequest
Новая
       99

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

148 голосов
/ 18 марта 2012

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

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

Ответы [ 18 ]

200 голосов
/ 18 марта 2012

Вы не можете .Это потому, что браузеры предназначены для этого: Обслуживание контента .Но вы можете усложнить загрузку .

Во-первых, вы могли бы отключить contextmenu событие , иначе "право"нажмите».Это помешает вашему обычному заносу нагло копировать видео, щелкнув правой кнопкой мыши и сохрани как.Но тогда они могли бы просто отключить JS и обойти это или найти источник видео через отладчик браузера.Плюс это плохой UX.В контекстном меню есть много законных вещей, кроме «Сохранить как».

Вы также можете использовать пользовательские библиотеки видеопроигрывателей.В большинстве из них реализованы видеоплееры, которые настраивают контекстное меню по вашему вкусу.Таким образом, вы не получите контекстное меню браузера по умолчанию.И если когда-либо они будут обслуживать пункт меню, похожий на «Сохранить как», вы можете отключить его.Но опять же, это обходной путь JS.Недостатки аналогичны предыдущему варианту.

Еще один способ сделать это - показать видео с использованием HTTP Live Streaming .По сути, он нарезает видео на куски и подает их один за другим.Именно так большинство потоковых сайтов обслуживают видео.Таким образом, даже если вам удастся сохранить как, вы сохраните только фрагмент, а не все видео.Потребовалось бы немного больше усилий, чтобы собрать все куски и сшить их с помощью специального программного обеспечения.

Другой метод - рисовать <video> на <canvas>.В этом методе, с небольшим количеством JavaScript, вы видите на странице <canvas> элемент рендеринга кадров из скрытого <video>.И поскольку это <canvas>, контекстное меню будет использовать меню <img>, а не <video>.Вы получите «Сохранить изображение как» вместо «Сохранить видео как».

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

В конце дня яПросто загрузите мое видео на сторонний видео-сайт, например, YouTube или Vimeo.У них есть хорошие инструменты для управления видео, которые оптимизируют воспроизведение на устройстве, и они прилагают усилия для предотвращения копирования их видео без каких-либо усилий с вашей стороны.

107 голосов
/ 06 февраля 2013

Это простое решение для тех, кто хочет просто удалить правую кнопку «сохранить» из видео html5 

$(document).ready(function(){
   $('#videoElementID').bind('contextmenu',function() { return false; });
});
34 голосов
/ 18 марта 2012

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

ВЫ НЕ МОЖЕТЕ

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

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

25 голосов
/ 26 декабря 2016

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

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

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

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

    www.foo.com / видео / .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, хотлинкинга, назовите его.

Это полный ответ на два заданных вопроса, а не ответ на вопрос: «Могу ли я запретить пользователю загружать уже загруженное видео?»

22 голосов
/ 17 июля 2014

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

 <body oncontextmenu="return false;">

Вот и все!Я делаю это потому, что вы всегда можете увидеть источник, щелкнув правой кнопкой мыши.
Хорошо, вы говорите: «Я могу напрямую использовать источник просмотра браузера», и это правда, но мы начнем с того, что вы НЕ МОЖЕТЕ прекратить скачивать html5 видео.

12 голосов
/ 18 января 2017

Как разработчик на стороне клиента, я рекомендую использовать URL-адрес BLOB-объекта, URL-адрес BLOB-объекта - это 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();
}

Примечание. Этот метод не рекомендуется для большого файла

РЕДАКТИРОВАТЬ

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

  • , если видео доставляется с помощью API. Использовать другой метод (PUT/ POST) вместо 'GET'

10 голосов
/ 04 ноября 2014

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

5 голосов
/ 02 июня 2016

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

oncontextmenu="return false;"

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

<video oncontextmenu="return false;" controls>...</video>
4 голосов
/ 28 сентября 2016

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

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

$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>';
3 голосов
/ 18 июня 2018 

<body oncontextmenu="return false;">

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...