Reputation: 6572
I want to remove the download option in my Angular project's videos. AFAIU you do this by doing 2 things:
(event)=>event.preventDefault()
.This removes "download video" option from menu and removes the possibility that someone right clicks the video and does a "Save as".
Now the problem is that I use Clappr player in some parts of my site. Clappr is a player which is constructed programatically, I mean it doesn't have a tag. It attaches to an element, say a <div>
with a specific id that you inform in the constructor. The documentation doesn't list any option to customize the controlsList attribute in the video html element and also there is no documented event for contextmenu.
I'm setting the events in the constructor like this:
(...)
events: {
onError: this.myOnErrorMethod.bind(this),
onStop: this.myOnStopMethod.bind(this),
onPlay: this.myOnPlayMethod.bind(this),
onSeek: this.myOnSeek.bind(this),
}
(...)
I tried to include a onContextmenu: this.onVideoRightClick.bind(this)
but it doesn't work (doesn't call the method).
I found a way to do this, by following the Clappr player construction, with the following (horrible, terrible) code:
let tmrVideoElement: ReturnType<typeof setInterval> ; let cnt = 0;
new Promise((res, rej)=>{
tmrVideoElement = setInterval(()=>{
let videoElement = <HTMLVideoElement>document.querySelector('[data-html5-video]');
cnt++;
if (videoElement)
res(videoElement);
if (cnt > 20)
res(undefined)
}, 500);
}).then((videoElement: HTMLVideoElement | undefined)=>{
clearInterval(tmrVideoElement);
if (videoElement) {
videoElement.setAttribute('controlslist', 'nodownload');
videoElement.oncontextmenu = this.onVideoRightClick.bind(this);
}
})
I even opened an issue in the project page on Github, but no one answered: https://github.com/clappr/clappr/issues/2178
There should be a better way than this messy workaround... anyone has a better solution ?
Upvotes: 1
Views: 134