In Chrome 55, prevent showing Download button for HTML 5 video
This is the solution (from this post)
video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-enclosure {
overflow:hidden;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px); /* Adjust as needed */
}
Update 2 :
New Solution by @Remo
<video width="512" height="380" controls controlsList="nodownload">
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
Disable download button for Google Chrome?
or you can simply add nodownload
in controlsList
<video width="512" height="380" controls controlsList="nodownload">
<source data-src="mov_bbb.ogg" type="video/mp4">
</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.
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.
Hide native play button for video in google chrome
Took a bit of searching, but found it in the comments here and confirmed it works on Chrome for Android.
video::-webkit-media-controls-overlay-play-button {
display: none;
}
Related Topics
How to Prevent Browser from Caching Form Fields
How to Make Clickable Anchor in Contenteditable Div
Flexbox: Align Between Bottom and Center
How to Tell an HTML Element to Ignore Any Stylesheets
<H1>, <H2>, <H3>... Tags, Inline Within Paragraphs (<P>)
Setting Hidden Datalist Option Values
CSS Border on Png Image with Transparent Parts
Best Way to Do Columns in HTML/CSS
How to Achieve a Text Loading Animation Over Multiple Lines
Embed Youtube Code Is Not Working in HTML
Transition for Background-Image in Firefox
Progress Bar Made of Solid Line, with Dots as Steps
Hide Element, But Show CSS Generated Content
Links Not Going Back a Directory
Bootstrap 3 Grid, Does It *Really* Matter How Many Columns Are in a Row
How to Make HTML Open a Hyperlink in Another Window or Tab