'Is there any way to add watermark on html5/html 5 video element, which user can not remove by going into the browser console/inspect mode?

I want to create a video watermark, which end user can not remove by manipulating DOM. Currently I tried adding watermark by using css and overlays, which is pretty easy to remove if user has even a little knowledge about DOM and browser elements.

javascripthtmlvideohtml5-videowatermark


Solution 1:[1]

You can try one trick, but this is just a theory - instead of displaying all images directly, create an SVG wrapper that will be displaying actual video, something like this.

Then on your main page, display this SVG control using img or iframe.

Sample.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <text x="0" y="0">Some watermark goes here</text>
  <foreignObject x="0" y="0" width="300" height="100">
    <video xmlns="http://www.w3.org/1999/xhtml" width="300" height="100">
      <source src="some-video.mp4" type="video/mp4" />
    </video>
  </foreignObject>
</svg>

Main page

<img src="sample.svg" />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Garbage Collector

Related Questions