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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

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

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

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

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

Ответ 2

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

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

Ответ 3

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

ВЫ НЕ МОЖЕТЕ

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

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

Ответ 4

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

 <body oncontextmenu="return false;">

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

Ответ 5

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

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

    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, вы называете его.

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

Ответ 6

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

Ответ 7

ДА ВЫ МОЖЕТЕ:

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

Ответ 8

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

oncontextmenu="return false;"

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

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

Ответ 9

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

Ответ 10

Мы закончили использование 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>';

Ответ 11

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

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

Вы также должны знать, что <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>

Ответ 12

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

Ответ 13

<body oncontextmenu="return false;">

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

Ответ 14

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

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

<script>
  window.oncontextmenu = function() {
    return false;
  } </script>

Ответ 15

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

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

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

Ответ 16

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

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>

Ответ 17

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

Ответ 18

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

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

Ответ 19

@У 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" (это правда)