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

137

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

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

  • 3
    Я проголосовал за этот вопрос, потому что он только абсолютно спрашивает, как «отключить щелчок правой кнопкой мыши» для видео HTML5. Я не уверен, что это похоже на отключение правой кнопкой мыши для обычных изображений или есть другие приемы наложения и т. Д., Которые можно применить.
  • 3
    Даже если вы отключите щелчок правой кнопкой мыши, они все равно смогут сохранить его из меню браузера ( File→Save As ). Даже если вы можете как-то заблокировать это, они могут просмотреть исходный код, чтобы найти URL файла. Даже если вы можете немного это скрыть, они могут вырвать его из кеша. Даже если вы можете усложнить это (например, поток), они могут перехватить сетевой трафик с помощью сниффера или чего-то еще. Дело в том, что если вы отправите это пользователю, они могут его сохранить. Обойти это невозможно. Вопрос, который вам нужно задать, - почему вам нужно так сильно это остановить. Это действительно даже необходимо? Стоит ли усилий и недружественных пользователей?
Показать ещё 2 комментария
Теги:
menu
html5-video
right-click

19 ответов

175
Лучший ответ

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

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

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

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

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

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

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

Поделиться
  • 1
    спасибо за подробный ответ, возможно ли хотя бы отключить опцию сохранить как из меню правой кнопки мыши? он охватит большинство случаев базовых знаний
  • 2
    это зависит от браузера. Я видел времена (особенно Firefox и Chrome), что если видео полностью загружено, когда вы нажимаете «сохранить», они просто выбирают видео из кеша, а не перезагружают (видео уже загружено в кеш, зачем скачивать его снова?), таким образом, нет второго запроса. описанный выше метод применим только тогда, когда ссылка используется повторно.
Показать ещё 15 комментариев
110

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

$(document).ready(function(){
   $('#videoElementID').bind('contextmenu',function() { return false; });
});
Поделиться
  • 0
    Это фантастика ! Это делает большую работу по предотвращению загрузки видео обычными людьми!
  • 2
    Однако это не поможет, если в браузере отключен JavaScript.
Показать ещё 8 комментариев
33

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

ВЫ НЕ МОЖЕТЕ

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

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

Поделиться
  • 0
    Кстати, этот ответ применим к HTML5-видео, флеш-видео или любым технологиям, которые вы можете себе представить в будущем. Все просто: это как это работает.
  • 0
    А как насчет YouTube? На YouTube вы не можете легко найти видеофайл. Я имею в виду, что хорошо, вы правы, мы можем, но легко спрятать источник mp4 на youtube или похожем видеохостинге, чем разместить простой mp4 на нашем сервере и использовать проигрыватель html5.
Показать ещё 3 комментария
23

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

 <body oncontextmenu="return false;">

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

Поделиться
  • 0
    Я думаю, что решение должно быть тем, которое не мешает «обычным» пользователям, отключение правого клика не позволит пользователям копировать и вставлять текст или искать слово, в которое они пересекаются, например, в названии видео, конечно же, нет. все пользователи, вероятно, сделают это, но это может раздражать некоторых из них
20

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

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

    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]

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

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

    <body oncontextmenu="return false;">


Результат:

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

Код ошибки 403: FORBIDDEN


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

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

Поделиться
  • 1
    Отличный ответ, но у вас есть `то, что вы должны удалить его из содержимого .htaccess
  • 1
    Вы все еще можете подделать HTTP Referer, который позволит человеку скачивать. Однако это очень умное решение. Если вы забьете это с одноразовым кодом в файле, вы можете идти!
Показать ещё 3 комментария
10

ДА ВЫ МОЖЕТЕ:

Как разработчик на стороне клиента, я рекомендую использовать 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();
}
Поделиться
  • 3
    YouTube тоже использует Blob, я думаю :)?
  • 1
    Не могли бы вы объяснить, что здесь происходит, и как настроить сервер для этого?
Показать ещё 8 комментариев
10

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 восстанавливает имя файла; удаляет сеанс и мгновенно отправляет видео. Кроме того, должны присутствовать все заголовки "no cache" и mime-type.

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

Поделиться
  • 0
    Мне нравится решение - оно решает вопрос ОП. Одна неприятная вещь, когда проверяет исходный код в Chrome и щелкает правой кнопкой мыши по ссылке. Пользователь загрузит HTML-файл, который фактически будет видеофайлом.
5

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

oncontextmenu="return false;"

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

<video oncontextmenu="return false;" controls>...</video>
Поделиться
3

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

Для создания видеоролика требуется пара ключей, которая может быть создана в CLI AWS. 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>';
Поделиться
3

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

Поделиться
  • 1
    почему рис это займет время, чтобы загрузить, так что только поместите тег div, и они получат большое меню Chrome, как перезагрузка и т. д.
  • 0
    Я не уверен, но видео можно скачать через Файл> Сохранить как
2

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

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

Вы также должны знать, что <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
    Добавление URL src через JavaScript не очень полезно. Проверка DOM покажет URL в поле зрения после того, как скрипт установит его.
  • 0
    @ Я согласен, но это лучше, чем показывать его прямо в html-источнике, где любой, кто щелкнет по нему правой кнопкой мыши, сможет увидеть его немедленно. Вы всегда можете разделить URL или зашифровать его. Но помните, что это дополнительная обработка
1 

<body oncontextmenu="return false;">

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

Поделиться
1

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

Поделиться
0

Мы могли бы сделать это не так просто, скрыв контекстное меню, например так:

<video oncontextmenu="return false;"  controls>
  <source src="https://yoursite.com/yourvideo.mp4" >
</video>
Поделиться
0

Краткий ответ: зашифруйте ссылку, как это делает youtube, не знаю как, чем спросить youtube/google о том, как они это делают. (На всякий случай, если вы хотите, чтобы прямо в точку.)

Я хотел бы указать всем, что это возможно, потому что это делает youtube, и если они могут, то может любой другой веб-сайт, и это не из браузера, потому что я протестировал его на паре браузеров, таких как Microsoft Edge и Internet Explorer и так что есть способ отключить его и увидеть, что люди все еще говорят это... Я пытаюсь найти ответ, потому что если YouTube может, то должен быть способ, и единственный способ увидеть, как они это делают, если кто-то заглянул в сценарии YouTube, которые я делаю сейчас. Я также проверил, было ли это пользовательское контекстное меню, и это не потому, что контекстное меню переполняет элемент inspect, и я имею в виду, что оно поверх него, и я посмотрел, и он никогда не создает новый класс, а также на самом деле невозможно получить доступ к инспектировать элемент с помощью JavaScript, так что это не может быть. Вы можете сказать, когда он дважды щелкнет правой кнопкой мыши на видео YouTube, что он всплывает контекстное меню для Chrome. Кроме того... YouTube не добавил бы эту функцию. Я занимаюсь поиском и изучением источника YouTube, поэтому я вернусь, если найду ответ... если кто-то скажет, что вы не можете, чем, ну, они не сделали " не делаю исследования, как у меня. Единственный способ скачать видео с YouTube - это скачать видео.

Хорошо... Я провел исследование, и мое исследование остается в том, что вы можете отключить его, за исключением того, что нет никакого JavaScript к нему... Вы должны быть в состоянии зашифровать ссылки на видео, чтобы иметь возможность отключить его, потому что я думаю, что любой браузер не покажет его, если не сможет его найти, и когда я открыл ссылку на видео на YouTube, он показывался как "blob: https://www.youtube.com/e5c4808e-297e-451f-80da-3e838caa1275 " без кавычек поэтому он шифрует его, поэтому его нельзя сохранить... вам нужно знать php для этого, но, как и ответ, который вы выбрали, чтобы сделать его сложнее, youtube делает его самым сложным из тяжелого шифрования, вам нужно быть продвинутым программистом php но если вы этого не знаете, то возьмите человека, которого вы выбрали, как лучший ответ, который затруднит его загрузку... но если вы знаете php, чем зашифруйте ссылку на видео, чтобы ее можно было прочитать только на вашем....Я не знаю, как объяснить, как они это делают, но они сделали, и есть способ. Способ, которым YouTube шифрует видео, довольно умен, поэтому, если вы хотите узнать, как это сделать, просто спросите youtube/google о том, как они это делают... надеюсь, это поможет вам, хотя вы уже выбрали лучший ответ. Так что шифрование ссылки лучше всего в короткие сроки.

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

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

Потоковая передача видео по веб-сайтам с помощью JavaScript

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

Поделиться
0

По крайней мере отключит контекстное меню.

Добавьте это в заголовок

<script>
  window.oncontextmenu = function() {
    return false;
  } </script>
Поделиться
0

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

    # This is how to we do JQuery ready() dom stuff
    $ ->
        # let 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" (это правда)

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню