CODEWITHSUNDEEP
html
KiranD
KiranD

Reputation: 451

Can we add logo to HTML5 Video?

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.

Upvotes: 0

Views: 10406

Answers (4)

Miika OK
Miika OK

Reputation: 60

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.

Upvotes: 1

Ali Maqsood
Ali Maqsood

Reputation: 1

<!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

Upvotes: 0

KiranD
KiranD

Reputation: 451

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.

Upvotes: 5

Devin
Devin

Reputation: 7720

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

Upvotes: 0

Related Questions