What I Have?
I have simple HTML code which play a video
<video src="">
<video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg"
width="540" height="360">
</video>
What I Want?
I want to hide src attribute of video tag when someone open inspector/inspect element of browser.
That is simply not possible.
If you want the browser to play the video, you have to tell him the url.
If you've send the url to the client, the user can grab it.
even if you obfuscate the url, and decode it in JS, as soon as my browser requests the video, I can grab the url in the network-logs of my dev-tools.
If you actually want to protect your files from being downloaded you should consider using a streaming service and not http delivery. With HLS or MPEG-DASH you can DRM your content with encryption keys.
Otherwise there is no way, think how Youtube and Vimeo can't stop people from downloading their files...
Related
My team and I are making a custom html video player and I'm working on a setting panel
And the first option we are mainly worried about so I'm adding first is the video quality option.
<video id="video" class="nm" poster="the poster url">
<source src="video source url of the video at 480p" type="video/mp4" size="480">
<source src="video source url of the video at 720p" type="video/mp4" size="720">
<source src="video source url of the video at 1080p" type="video/mp4" size="1080">
</video>
And now what we want to do is when the user toggles on an option it will change the video source to the source that has the quality specified by the size attribute
Image reference here
PS: We are making a video player from scratch as It is on its own built with no APIs (e.g. Video.js, JWPlayer, Plyr) We are making all the things needed from scratch with pure javascript and html... and as we're making a website for streaming, and my team and I want to make a video player made by us for the website, and "maybe" later for distribution but for now we want to make a brand new video player and were just been putting this part off as we aren't sure of the best way to do this!
Edit
Also, we want the video to pause and change the quality and pick up off where it was paused
Note that for the native video the browser will decide which <source> to show and choose the first element it supports/understands (e.g. the first supported video file format): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Usage_notes
To circumvent that and force the browser to show a certain video source url, put in only one <source> element and manipulate the source property with javascript.
To pause and play the video in the native HTML5 video player you may use the API of the HTMLMediaElement: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
It has the play and pause functions you're looking for.
I'm making a custom scrub bar in HTML video player. I'm creating a HTML5 video player and take a currentTime from video and it is working good, but seting currentTime after moving a scrub bar dose not working.
Firstly, I want write I've tried several possiblity to resolve this problem. I disable autoplay in video and other things, what can be.
But, one thing puzzles me. I can not have a directly URL to the video, I have a URL to JSP code on the server, and this code return to me this file. What can be a problem with it? Because, if I downloaded this movie file and set URL to directly to this movie file - with extension .mp4 - all starts working good.
Maybe it's problem with it I can not have a directly url to movie file?
I don't have any ideas to resolve this porblem. I'm counting on your help
if the video stored as an .mp4 or .ogg or .webm video file format, It would play. Here is how your html may look like.
<video controls preload="metadata">
<source src="http://www.example.com/waterfall-video.mp4" type="video/mp4"/>
<source src="http://www.example.com/waterfall-video.ogg" type="video/ogg">
Video not supported.
</video>
I recently upgraded my account on Vimeo to be able to get my direct source file on a MP4 extension. Vimeo showed me several quality available for each of my videos.
I was wondering if there is a way to serve the user a specific quality based on its connexion?
By default I serve a SD quality video.
In the same response as the MP4 video file direct links, you should see an .m3u8 link. This link is an HLS manifest file that is used for adaptive streaming. You'll need to check if the player you're using supports HLS.
HLS documentation can be found here: https://developer.apple.com/streaming/
Thank you Tommy.
I was able to finally combine videojs + http-streaming and my .m3u8 link from VIMEO.
Note: It's important for people to have a VIMEO pro account if you want to be able to get your video source URL. Also the type must be ="application/x-mpegURL" and not the default "video/mp4".
<video-js id=vid1 width=600 height=300 class="vjs-default-skin" controls>
<source src="https://example.com/index.m3u8" type="application/x-mpegURL">
</video-js>
<script src="video.js"></script>
<script src="videojs-http-streaming.min.js"></script>
<script>
var player = videojs('vid1');
player.play();
</script>
I want to make a Web page that has a video on it, but I only want the users to be able to see the video if they are logged in. The content requires a subscription, so I'll need to make a custom video player with HTML5 because the built-in video player on some browsers has a download button, and I don't want the user to be able to save the video on their device and put it on the Web so that everyone can see it for free. However, even if I do this, the user can still just open up developer tools, expand the video element, and see all of the URLs to the video.
<video>
<source src="./video.mp4" type="video/mp4">
<source src="./video.ogg" type="video/ogg">
<source src="./video.webm" type="video/webm">
</video>
Then, the user can just navigate to one of those URLs, effectively bypassing anything that I set up. Actually, I might be able to prevent the user from navigating to one of those URLs, kind of like YouTube, but that doesn't mean that the user won't be able to use something like https://www.onlinevideoconverter.com/ to download the video.
I need a way to play the video without exposing the URLs in my frontend code. A solution with HTML5, CSS, and JavaScript without any additional libraries is preferred.
Serve the videos from a node.js express.js route that requires authentication and / or authorization to see. Take a look at https://github.com/deitch/cansecurity e.g.
The content requires a subscription, so I'll need to make a custom video player with HTML5 because the built-in video player on some browsers has a download button
Just turn off controls.
and I don't want the user to be able to download the video and put it on the Web so that everyone can see it for free
You can't do anything to prevent this. The content is trivially downloaded. The best you can do is implement DRM via Widevine or similar, but this is definitely not foolproof.
I have a page hosted on my computer with Apache through XAMPP. I am using the HTML5 video tag to insert a video into the page as follows:
<video id="video1" width="480">
<source src="ad1.mp4" type="video/mp4">
Your browser doesn't support the video tag
</video>
However, when the page loads, it doesn't load the video. It also does not display the line showing lack of compatibility.
I checked the mime-types file to make sure video/mp4 was indeed in there, and it was. I also created a .htaccess file and used AddType to add in the file extensions, but to no avail.
I am able to get a different mp4 (of larger filesize) to play and display properly even though both are in the same directory. I don't have any JS code affecting the load of the video and the name of the file that should be playing is indeed "ad1.mp4".
The list of files in the htdocs folder are as follows:
video.html (the page displaying the video)
ad1.mp4 (The video in question)
content.mp4 (The video that plays properly)
If any more information is needed, don't hesitate to ask!
Any help is appreciated! Thank you very much!
I'd recommend you to read http://goo.gl/4NwNP7 and use flash as fallback option always.
You can't achieve 100% cross-browser solution with only using HTML5 video tag.
Also in your case, one of solutions is https://stackoverflow.com/a/9349984/800639