Allowing Video to Be Played in <Video> Element from My Website, But Not Allowing It Through Direct Link

Allowing video to be played in video element from my website, but not allowing it through direct link

This is possible.

Your .htaccess solution is a good idea, to get it to work, your .htaccess needs to be in a sub-directory with the source videos, and nothing else. Update it so that it looks like this:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^http://example.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.example.com/.*$ [NC]
RewriteRule .(mp4|mp3|avi)$ - [F]`

Alternatively this should work too (to completley block access to your video conent)

RewriteEngine On
RewriteCond %{REQUEST_URI} \.(mp4|mp3|avi)$ [NC]
RewriteRule ^.* - [F,L]

It is required to include both codes together:

RewriteEngine On
RewriteCond %{REQUEST_URI} \.(mp4|mp3|avi)$ [NC]
RewriteCond %{HTTP_REFERER} !^http://sample.com/.*$ [NC]
RewriteRule ^.* - [F,L]

---

On a side-note, while we're talking about .htaccess, check out this tool for writing and testing your file: http://htaccess.mwl.be/ . It lets you see which conditions will meet which URL patterns and what the outcome will be, much faster than deploying to your server each time you make a change ;)

How to make video play on web by using url, but can not access by direct link?

Ok, I understand you want to serve the video file to the script, but you don't want users being able to navigate to the video url and download/view it from there.

A quick example using PHP

Change your code to:

<script type="text/javascript">
                    jwplayer("mediaplayer1889082201").setup({
                            flashplayer: "jwplayer/jwplayer.flash.swf",
                            file: "video.php?file=coursecreeklruprr4nags7ee1codeschool_756.mp4",
                            image: "http://testhost.com/myproject/files/1/video/coursecreeklruprr4nags7ee1codeschool_756.jpg",
                            width: "800",
                            height: "510",
                            stretching: "uniform",
                            skin: "jwplayer/jwplayer-skins-free/six.xml",
                            abouttext: "myproject",
                            aboutlink: "myproject",
                    });
            </script>

As you can see, we are sending a file request to video.php, then we'll create that file serving the video only when the referrer is your webpage which will be able to show it.

Go ahead and create video.php in the same folder.

First we need to check if a file has been given in the url, like this:

<?php
if(isset($_GET['file']) {
}

Then we check if the referrer is your page, like this:

if (strpos($ref,'testhost.com/myproject/files/1') !== 0){
}

If it's your page we can start serving your file, like this:

$path = 'video/' . $_GET['file'];
header("X-Sendfile: $path");

So the whole thing together:

<?php
if(isset($_GET['file']) {
    if (strpos($ref,'testhost.com/myproject/files/1') !== 0){
        $path = 'video/' . $_GET['file'];
        header("X-Sendfile: $path");
    }
}

Look out; this is a very quick EXAMPLE, not a safe-and-ready-to-use-script! Their has to be security checks build in, and you're serving a file even when it's not existing, so that kind of checks still has to be made to make it ready for use.

Good luck with your project.

Show Youtube video source into HTML5 video tag?

Step 1: add &html5=True to your favorite youtube url

Step 2: Find <video/> tag in source

Step 3: Add controls="controls" to video tag: <video controls="controls"..../>

Example:

<video controls="controls" class="video-stream" x-webkit-airplay="allow" data-youtube-id="N9oxmRT2YWw" src="http://v20.lscache8.c.youtube.com/videoplayback?sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Cratebypass%2Coc%3AU0hPRVRMVV9FSkNOOV9MRllD&itag=43&ipbits=0&signature=D2BCBE2F115E68C5FF97673F1D797F3C3E3BFB99.59252109C7D2B995A8D51A461FF9A6264879948E&sver=3&ratebypass=yes&expire=1300417200&key=yt1&ip=0.0.0.0&id=37da319914f6616c"></video>

Prevent HTML5 video from being downloaded (right-click saved)?

---

You can't.

That's because that's what browsers were designed to do: Serve content. But you can make it harder to download.

---

Convenient "Solution"

I'd just upload my video to a third-party video site, like YouTube or Vimeo. They have good video management tools, optimizes playback to the device, and they make efforts in preventing their videos from being ripped with zero effort on your end.

---

Workaround 1, Disabling "The Right Click"

You could disable the contextmenu event, aka "the right click". That would prevent your regular skiddie from blatantly ripping your video by right clicking and Save As. But then they could just disable JS and get around this or find the video source via the browser's debugger. Plus this is bad UX. There are lots of legitimate things in a context menu than just Save As.

---

Workaround 2, Video Player Libraries

Use custom video player libraries. Most of them implement video players that customize the context menu to your liking. So you don't get the default browser context menu. And if ever they do serve a menu item similar to Save As, you can disable it. But again, this is a JS workaround. Weaknesses are similar to Workaround 1.

---

Workaround 3, HTTP Live Streaming

Another way to do it is to serve the video using HTTP Live Streaming. What it essentially does is chop up the video into chunks and serve it one after the other. This is how most streaming sites serve video. So even if you manage to Save As, you only save a chunk, not the whole video. It would take a bit more effort to gather all the chunks and stitch them using some dedicated software.

---

Workaround 4, Painting on Canvas

Another technique is to paint <video> on <canvas>. In this technique, with a bit of JavaScript, what you see on the page is a <canvas> element rendering frames from a hidden <video>. And because it's a <canvas>, the context menu will use an <img>'s menu, not a <video>'s. You'll get a Save Image As instead of a Save Video As.

---

Workaround 5, CSRF Tokens

You could also use CSRF tokens to your advantage. You'd have your sever send down a token on the page. You then use that token to fetch your video. Your server checks to see if it's a valid token before it serves the video, or get an HTTP 401. The idea is that you can only ever get a video by having a token which you can only ever get if you came from the page, not directly visiting the video url.

---

---

Related Topics