How to disable video/audio downloading in web pages? - javascript

I have a website that I put my videos/audios on it.
I use HTML5 and tag to show videos.
But videos/audios can be downloaded if client opens view source page and then copy the file address.
How can I disable downloading these files, I just want client to see videos/hear audios in the web page.
Many online video/audio services like Youtube disabled downloading videos by this way. How they did that? What is a working way to disable, or at least make this progress much harder?

Youtube encodes their video into the MPEG-DASH format, which plays back through byte streams via the browser's implementation of the Media Source Extensions API. See See more on Wikipedia.
You can do the same by encoding your video into MPEG-DASH files, then playing it back in your code through a library like dash.js. Watch how the dash.js player works live by checking out the DASH Reference Client.
I've encoded MPEG-DASH video using Sorenson Squeeze, but there are other encoders you could use.
And just to clarify... this will make downloading more difficult... but will NOT provide a real DRM solution. For that you need to check out EME.

MPEG-DASH seems like a nice solution but is definitely not perfect. There are many ways to bypass this and still being able to download the video. On the other hand putting a lot of effort in protection might not be worth it since people can always make screen recordings etc.
But if you still want to go for a more secure option you can try using
Encrypted Media Extensions i.e. with Amazon s3 cloud.

Related

Best practices for loading videos on a web page?

Would like to understand how AirBnb is able to load a 20MB background video file so fast on their homepage. After inspecting their homepage on WebPageTest, I noticed that the video did not show up in any of the downloaded resources, which made it score so high. When I've tried this tactic, via loading the video asynchronously via AJAX, the video still shows up on WebPageTest as a downloaded resource, but just after the DOM loads. So I'm really not sure how AirBnb is able to make this work. Does anyone have an idea?
AirBnb isn't doing anything special here. They're just starting playback of media using progressive download, which just means playback starts while the video is still downloading.
On their CDN, they have uploaded some fairly large MP4 files with two important characteristics:
The indexing information (MOOV atom) has been moved to the beginning of the MP4 file
The video is encoded in a format and codec that your browser supports
Because of these characteristics, all the site has to do is tell your browser to begin playing the source URL, and it will do the right thing: it makes a web request to the CDN and begins downloading the file. As soon as enough data has been transferred to start playback, it does so.
Finally, I can't say for sure why WebPageTest doesn't show you the video MP4s that are driving the video, but they are certainly there, and the URLs look like https://a0.muscache.com/airbnb/static/Xxxxx-X1-1.mp4. I suspect they're looking at your User Agent to decide which file to send you, and are not sending any video at all to bots like Google and WebPageTest.
You're not getting the real story through WebPageTest. Instead of relying on a third party to evaluate the page in their environment, you should watch the traffic you are actually being sent using Fiddler or the Network tab on Chrome Developer Tools.

prevent html5 video from being downloaded through inspect element

We have a module in our project where there is an option of uploading mp4 videos , we are using html5 video tag player for playing the videos.
Problem we are facing is the privacy of the videos.At the time its very easy for the user to download our file either through right click save as video or by taking the url from the src of the video tag by inspect element.
To do so I have studied a lot, and got the idea about the blob url through youtube videos which are not accesible through anyway.
I tried to study about the blob-url, created one for my video url but still they are accessible and can be easily downloaded. Like youtube blob-url its not working.
I also studied this ques question first answer, through which i got the idea about youtube mechanism of buffering video and how the blob url shown in inspect element for youtube is a spoof.
Most importantly I want to know how can we spoof our website url so that no one can download it through inspect element. Is it possible for us to do so and how? Any link related to this please share with me.I have tried to study a lot but still missing something.
What mechanism actually youtube follow for creating blob url and to save its videos?
As your video has to arrive at the users device there is effectively no way you can stop a user intercepting and storing the file if they want to.
The typical solution to this problem is to encrypt the file and only share the key to the encrypted video with the people you want to view it. A 'bad' user can still download the video file but will not be able to play it back without the correct key.
How you get the key to the users can be very simple (you tell them it directly via some separate communication channel, like email) or more sophisticated using some sort of DRM approach.
DRM is controversial (see Firefox discussion at link below) but it is being baked into the standards with HTML5 EME (Encrypted Meida Extensions) so is becoming more mainstream. EME essentially allow a browser request a trusted (by the video producer) element in the browser/device to decode and play an encrypted video. See a good overview of EME at the second link below.
https://blog.mozilla.org/blog/2015/05/12/update-on-digital-rights-management-and-firefox/
http://www.html5rocks.com/en/tutorials/eme/basics/

Is it possible to stream from a .m3u source on hover of a div?

I am working on an interactive website about the languages of the world.
Part of the plan is to have a world map which reacts with sound when different countries are hovered. The emphasis is on the sound of a language.
I would like to embed web radio streams from each country. As soon as one hovers over a country, the stream is played. It stops when the cursor leaves the country contour.
Codewise the way to go would be to listen to mouse events, e.g. with jQuery and assign the streams to functions.
I managed to embed mp3 files which lay into a separate directory on my server. How to do this with m3u? As far as I know html5 is not able to handle m3u streams.
I am grateful for any help.
M3U isn't a stream, it's a playlist. If you open up an M3U file in your text editor, you will see that it's just a list of URLs.
#EXTM3U
http://example.com/stream
http://example.com/stream2
For your purposes, throw out any line that starts with a pound sign #, and then use the URLs in the file as your source for your HTML5 audio.
Also note that there is another standard that uses M3U8 (same thing, just UTF-8 encoded) HTTP Live Streaming (HLS) but there isn't wide browser support at this time. For now, if you stumble across an M3U file it's safe to say you're looking at an HTTP progressive stream, typically served from SHOUTcast or Icecast. That will likely change in the future though.

YouTube API Question

What is the best way given the YouTube url to send the audio to a list view like (http://opentape.fm/mixtape/). I would have to it streaming from the YouTube player, rather than downloading and uploading the actual file to the server. Any help would be awesome, thanks!
The big problem you have here is that YouTube does not take mp3 files directly, a video must be created from the mp3 file.
Dynamically creating a video within the browser without any server-side assistance would be near impossible, it is hard enough to get data access to the mp3s (or any image source for the video stream) and writing a codec in JavaScript is not going to be fun.
You could probably do it server-side in a streaming fashion if you can find/write software that can chunk the mp3 audio appropriately and just shove a flat image in to a simple video stream on each key frame, multiplexing as you go.
Should you be able to do all that, the API details for uploading detail the process. You can do this without any metadata at all, simplifying the process somewhat for streaming.
But generally, the answer is no - not easy to do this client-side. You could make an AJAX service out of the server-side idea that takes a URL as a parameter, but that's about the limit.

RTSP stream for QuickTime player does not show movie

Did anybody faced to problem when QuickTime cannot play streaming video and shows blue question mark instead or errors - 400 (Bad Request) and 10060 (Disconnected)? I have already tried to switch getting stream from UFP to HTTP protocol with custom port in QuickTime settings but this did not help.
And does anybody know where can i find streaming video using RTSP protocol just for testing, links to online streams (not downloaded trailers) are appreciating.
These links do not work for me due to issue mentioned above:
http://mac.sillydog.org/qt/mov/embed_stream.php
And here only last one works (among other streaming types) :
http://quicktime.tc.columbia.edu/users/iml/movies/mtest.html
Thanks, for any links and advices.
The best way I've found to get rtsp streams to play in a browser window is using Apple's own javascript. I've tried hard coding tags with exactly the same parameters, and the embed tags won't work, but the js will. The js file itself is called AC_Quicktime.js. Just google it and you should be able to find a link to it easily enough. Use the one from Apple's site to make sure that you're getting unmodified code. Load that in your HTML page, and in your body, insert this:
<script>
QT_WriteOBJECT(*url*,*width*,*height*,*ActiveX Version*,*parameter1*,*value1*,*parameter2*,*value2*,*parameter3*,*value3*);
</script>
This will draw the appropriate code in whatever container you place the script. ActiveX Version can be an empty string (''), and as many parameters as you like can be entered one after the other. Apple has fairly exhaustive documentation on their website for all their stuff.Apple Developer Connection.
Hope that was marginally helpful.
it appears that this was just a security issue and stream was stopped by private policy of Quick Time so to turn on the ability to play RTSP stream in Safari i needed to check some option in browser settings ...
http://www.niehs.nih.gov/news/video/help/

Categories