Search code examples
javascripthtml5-videovideo.js

How to overlay custom text on video while it is running on browser?

Thanks for taking time. I am new to web-development.

I need to display custom text on the video while it is playing for an user. These are the following certain criteria:

  1. User has to login and their name should be displayed on video while it is running on browser.
  2. Custom text should appear within certain time interval, let say, every 10 secs
  3. Test for Smith should be displayed as "Hello Smith!" and text for Roger should be displayed as "Hello Roger.i.e. for different login name should be changed.

What should I use? HTML5, Javascrit, Videojs etc.? and How this scenarios can be achieved? I have no idea of which language will help me achieve this goal.

Any pointers are welcome.

Solution

  • You can just position the text element and the video element in the same container and then put a higher z-index on the text element and position it correctly.

    Example: https://jsfiddle.net/w12n8hxy/

    You can achieve your goals using JavaScript and manipulate the DOM to your needs.