防止HTML5视频被下载(右键保存)?

Mureinikpython提出了一个问题:Prevent HTML5 video from being downloaded (right-click saved)?,或许与您遇到的问题类似。

回答者Joseph给出了该问题的处理方式:

In reality, you can't. But you can make it harder to download.


Browsers make grabbing too easy

Because that's what browsers were designed to do: Serve content - which means give the content to the user. To show you how easy it is, here's how I usually grab videos on virtually any video streaming site:

Prepare the network tab of your preferred browser debugger and let the video load. Then look for it in the loaded resources. Videos are usually streamed in .flv or .mp4, and audio in .mp3. When you spot the url, open a new tab/window and open the link there. The browser will then download the file.


Making it harder

Here are methods on making a grabber's life harder. Like I said earlier, these are not fool-proof methods, but can at least ward off skiddies.

Video to Canvas technique

Recently I came across this article from HTML5Doctor while researching motion detection in JS. This involves streaming your video via a <video>, then with some JS, literally copy the video to a <canvas>. Here's an example where the video is up front, while the canvas at the back get's fed with data from that same video.

Essentially, what you do is:

  • Predefine on the HTML or dynamically insert a <canvas> to the DOM. This is the "player" that the user sees.
  • Dynamically create a video tag via JS, append it to the DOM hidden and give it a url to stream. This will be the video source for the canvas.
  • Then with JS, you periodically grab data from the <video> you just created and draw it to the <canvas>. With this step, the video gets fed to the canvas.

That's the very basic of the entire routine. Since your player is now the canvas and the true video hidden, you can try right-clicking all you want and save. Since the canvas acts like an image on the page, you can only save a shot of a frame that was displayed on the canvas. As for controls, JS has an API for controlling <video> so you can create custom buttons and sliders.

However, if they know you are doing this, they will find your hidden video element, and you are screwed. This leads us to the next method that complements this front-end only technique, with aid from the server side.

Temporary resource urls

One thing you can do to prevent this method is to prevent the link from being reusable. Make the link disposable, temporary, one-time use only. Once the player loads using the disposable url, dispose of it. Make it unusable.

Similar to CSRF prevention, when a browser requests a page with your video, have it generate a random token and store it in some storage on the server side for later reference. At the same time, append it to the url of your video, something like this:

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

Now when your player loads the video, it will use this url that carries the token. Have the server validate the token.

If it's good, stream the video and destroy the token from the server to avoid reuse. This essentially makes the url "one time use only". If an invalid token is used, return the appropriate headers as the response, like a 403 perhaps.

To add a bit more security, impose an expiry of the url by storing it's timestamp along with the token. Then compare the request timestamp with the stored timestamp if it's still within the "use window". Make this "use window" short enough to be used by the player on the page, but not long enough for a skiddie to grab that url and paste it into another tab/window/downloader.

希望本文对你有帮助,欢迎支持JavaScript中文网

原文链接:stackoverflow.com

上一篇:JavaScript的多维数组
下一篇:输入类型=文件只显示按钮

相关推荐

  • 防止对HTML5的浏览器历史popstate滚动

    Alex Malet de Carteret提出了一个问题:Prevent browser scroll on HTML5 History popstate,或许与您遇到的问题类似。

    3 年前
  • 选择移动Web HTML5框架[关闭]

    Andrew BarberSarfraz提出了一个问题:Choosing Mobile Web HTML5 Framework [closed],或许与您遇到的问题类似。

    3 年前
  • 调整HTML5画布大小以适应窗口

    shekhardevyn提出了一个问题:Resize HTML5 canvas to fit window,或许与您遇到的问题类似。 回答者devyn给出了该问题的处理方式: I believe I ...

    3 年前
  • 调整HTML5画布中的图像大小

    Telanor提出了一个问题:Resizing an image in an HTML5 canvas,或许与您遇到的问题类似。 回答者Mikksyockit给出了该问题的处理方式: So what ...

    3 年前
  • 读 《HTML5 揭秘》有感

    最近在补一些 HTML 的书籍,偶尔读到这本书,虽然这本书已经是10年以前的书籍了,不过其中有些有趣的知识点与观点被我提取了出来。 标准创建与技术实现冲突 作者在开始就提出了 Mozilla 开发人员...

    6 个月前
  • 详解HTML5游戏玩家流失原因

    对任何类型的电子游戏来说,玩家流失都是一个无法回避的问题。玩家为什么离开游戏?近日,HTML5游戏设定师纳森·洛维托(Nathan Lovato)在游戏开发者网站Gamasutra撰写文章,解读了玩家...

    5 年前
  • 设置自定义HTML5所需的字段验证消息

    G5WSumit Bijvani提出了一个问题:Set custom HTML5 required field validation message,或许与您遇到的问题类似。

    3 年前
  • 设置HTML5音频位置

    katspaugh提出了一个问题:Setting HTML5 audio position,或许与您遇到的问题类似。 回答者soemarko给出了该问题的处理方式: Works on my chrom...

    3 年前
  • 让HTML5 localStorage键

    Brian Tompsett - 汤莱恩Simone提出了一个问题:Get HTML5 localStorage keys,或许与您遇到的问题类似。 回答者Kevin Ennis给出了该问题的处理方式...

    3 年前
  • 触发HTML5表单验证

    Drew提出了一个问题:Triggering HTML5 Form Validation,或许与您遇到的问题类似。 回答者robertc给出了该问题的处理方式: You can't trigger t...

    2 年前

官方社区

扫码加入 JavaScript 社区