0

I'm customizing HTML5 video to suit the web application I'm building. Would like to know if there is any chance we can add / embed our own logo to the video control.

Please suggest or send me the reference links.

Sathyajith Bhat
  • 21,321
  • 22
  • 95
  • 134
KiranD
  • 433
  • 2
  • 7
  • 20

4 Answers4

5

Finally, I figured out the solution myself. It could be achieved using videojs library watermark plugin. The source can be downloaded from the below link.

https://github.com/xbgmsharp/videojs-watermark

Customization and beautification of other controls can also be done easily.

KiranD
  • 433
  • 2
  • 7
  • 20
1

If you want to achieve a permanent watermark that can't be removed, you should render the watermark directly to the video file, but that will be really intensive for the GPU. You can of course use HTML, JavaScript or CSS to add a watermark, but it can be removed by modifying the source files.

For example, how easily user can remove the watermark:

Image of "how to remove watermark"

I don't know in what environment you are working but you can render text inside a video using Node.js paired with FFmpeg and Jimp.

Miika OK
  • 60
  • 5
0

yes, there are many ways to achieve it, depending on what you need, but here you have a very nice and easy to follow tutorial explaining EXACTLY what you need (and then some more) see tutorial

Devin
  • 7,690
  • 6
  • 39
  • 54
  • I followed this tutorial.. but it didn't work. Have you tried it before? If so, please share the link so that I can have a look at it. – KiranD Aug 14 '14 at 04:53
  • no, I didn't use that exact example, but something similar of my own and I can't show my work online. Anyway, since you're having issues with this, here's a tip: remember html5 video is basically html5 + css so simply be sure to give a class or id to the container (better if you have the controls in a separate container) and give it a position:relative value. Then add your logo and position it position:absolute and whatever distance you need (like 10px right 5px bottom for right of controls). If you can manage basic CSS, it's really easy – Devin Aug 14 '14 at 06:08
  • I have already tried that too. But, the issue would arise when the video is maximized the logo stays just there. – KiranD Aug 14 '14 at 06:59
  • 1
    just make sure you're adding the logo INSIDE the controls container and it will be always relative to it. For example: #control{position:relative; width:100%; height:30px} .logo{position:absolute; width:40px; height:20px; position:absolute; bottom:5px; right:5px;} and then `
    your controls here....
    `     – Devin Aug 14 '14 at 17:48
0

<!DOCTYPE html>
<html>
<style>
  .video-container {
    position: relative;
  }

  .video {
    width: 100%;
    height: 100%;
  }

  video::-webkit-media-controls-fullscreen-button
  {
    display: none !important;
  }

  .watermark {
    position: absolute;
    left: 3%; top: 3%;
    color: white;
    animation: 15s moving-watermark infinite;
  }
</style>
<body>

  <div id="vid-cont" class="video-container">
    <video class="video" controls>
        <source src="http://media.w3.org/2010`enter code here`/05/sintel/trailer.mp4" type='video/mp4' id='mp4'>
    </video>
    <i class="watermark">My logo[enter image description here][1]</i>
  </div>


</body>
</html>

enter image description here

Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41
Ali Maqsood
  • 1
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 31 '21 at 18:05