HTML Video Element - Post ID 295481

User 2140875 Photo


Registered User
364 posts

Hi,

I am using the HTML5 Video element to display videos and it works quite well. On thing though, on the bottom right side of the bottom menu it has 3 vertical dots. Clicking on that allows the ability to download the video. I know that it is easy to download videos, but I don't want to encourage it by having a menu option to do that. See pictures of what I am talking about.

Is there a way to remove that 3 dot menu, and even the full screen icon to the left of it?

Thanks!

by the way...I am a noncoder.

Attachments:
User 2699991 Photo


Registered User
4,782 posts
Online Now

Galen Garretson wrote:
Hi,

I am using the HTML5 Video element to display videos and it works quite well. On thing though, on the bottom right side of the bottom menu it has 3 vertical dots. Clicking on that allows the ability to download the video. I know that it is easy to download videos, but I don't want to encourage it by having a menu option to do that. See pictures of what I am talking about.

Is there a way to remove that 3 dot menu, and even the full screen icon to the left of it?

Thanks!

by the way...I am a noncoder.


Hi non coder ;)
Where are you hosting your video
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

There are some options that you can do to make it more difficult for a normal (whatever that implies) user to download a video, but you have to understand that it's something that most browsers allow and also the full-screen option is difficult to prevent. some JS stuff could do it but then all a user has to do is disable JS temporarily to enable downloading.

some video hosting sites (hence my asking where the video is hosted) Vimeo AWS for example have things available for you to prevent downloading

some hosting services you can apply the video as streaming, which means that anyone activating a download, will only get a small chunk of it at a time

hosting the video locally to your host service (i:e putting the video into your SD resources) takes away the download and replaces it with a picture within a picture, which isn't a great "user experience"

All in all, unless you really don't want a video to be downloaded for copyright etc there isn't much else you can or should do

Having said all that most of that requires some modecum of CODING :D
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2140875 Photo


Registered User
364 posts

Hi Wayan,

Hosted at webhostinghub.com. I don't put the videos into my SD resources, but upload them and then link to them after inserting the HTML5 Video element.

I know there is no way to keep people from downloading, just did want to have that option available right on the video player interface.

Thanks for your comments and help!
User 2699991 Photo


Registered User
4,782 posts
Online Now

Galen Garretson wrote:
Hi Wayan,

Hosted at webhostinghub.com. I don't put the videos into my SD resources, but upload them and then link to them after inserting the HTML5 Video element.

I know there is no way to keep people from downloading, just did want to have that option available right on the video player interface.

Thanks for your comments and help!


Hmm so there is no difference between having them in your resources or your hosting site then
If the html5 video was in your resources then although the 3 dots are still there it isn't for downloading

You could check with your hosting service if there is a way to prevent downloading a file.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

There maybe a way using js script to a button that the visitor clicks to play the video. Which then means you can disable video controls in the html5 choices bit. But that doesn't stop them right clicking and downloading or saving the video
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 379556 Photo


Registered User
1,533 posts

Could one perhaps just render the buttons inaccessible to mouse control by overlaying them with an empty container? In the Elements Tree it would appear somewhat as follows -

A container set to position:relative and having in it
(a) first a container set to position:absolute in the place where the relevant buttons are (or even covering the whole of the video element);
(b) second the video element.

That would not be a very clever solution, but it might be worth trying. I've just tried it with a Picture Link element rather than a video element, and it effectively prevented the link from working.

Frank
User 2699991 Photo


Registered User
4,782 posts
Online Now

Frank Cook wrote:
Could one perhaps just render the buttons inaccessible to mouse control by overlaying them with an empty container? In the Elements Tree it would appear somewhat as follows -

A container set to position:relative and having in it
(a) first a container set to position:absolute in the place where the relevant buttons are (or even covering the whole of the video element);
(b) second the video element.

That would not be a very clever solution, but it might be worth trying. I've just tried it with a Picture Link element rather than a video element, and it effectively prevented the link from working.

Frank


Tried that already, also tried Cursor=none for both HTML5 and overlay container, it would appear that the video controls thingy, is added on after using the attributes for the video controls (which I can't find for the HTML5 anywhere

The only way I have found to achieve it within Site Designer is to place the video file in the root resources and point to it there as a "Local Video" that removes the "Download option from those 3 small buttons
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

in my hosting service, I can disable users permission to download files, never tried it and not sure I want to
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2140875 Photo


Registered User
364 posts

Thanks for the discussion and comments. I'll talk to my hosting service. Will also give a test to putting the file in resources and see what happens there.

Thanks!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.