How to add text on video player while video is playing

Haider Zaman

• August 17, 2021 07:38

Hey, I want to display the username on the ziggeo player screen while the video is playing, how can add that text field in my ziggeo player

0

• 

  Bane

  • August 19, 2021 17:26

  Hi Haider,

  I would suggest using CSS on the field you are using for that.

  If you are using JS SDK that would be quite simple to do.

  For example:

  <div class="placeholder">    <ziggeoplayer></ziggeoplayer>
      <span class="username">Haider</span>
  </div>

  could easily be added to be over player by doing something as simple as:

  .placeholder {
      position: relative;
  }
  .username {
      position: absolute;
      bottom: 100px;
      right: 20px;
  }

  Of course exact location would be completely up to you, the above should place the username somewhere in the bottom right corner of your player, somewhere above the controls.

  If you are not using JS SDK then it might require some other way of setting it up.

  0
• 

  Haider Zaman

  • October 07, 2021 07:01

  Hi Bane,
  I've tried this but it's not working, i want to add the text overlay over video like displaying watermark that is inside the player and shown over the video. Is there any way to add the text overlay on video?

   

  0
• 

  Bane

  • January 08, 2022 01:16

  Hi Haider,

  I apologize for delay once again, and want to again thank you for your understanding.

  The above should work, however it is possible that this looks different on your website depending on the other CSS that could be affecting text overlay. I do also see one change that I would make to make sure it works better.

  Of course adding it this way will not really add the text to the video itself, just to the player making it seem as if it is over the video.

  You can see a simple example on the following video, where I added "Watermark Message" text above the video: https://ziggeo.io/h/support/text-as-watermark

  I did make few changes just so you can see few more things you could do.

  This is the entire code related to the message and the player:

  <div class="placeholder">
    <ziggeoplayer ziggeo-width="640"
      ziggeo-height="480"
      ziggeo-theme="modern"
      ziggeo-themecolor="red"
      ziggeo-video="f9d9bfb9e5a5f89193f397be02eb75fb">
    </ziggeoplayer>
    <span class="text_watermark">Watermark Message</span>
  </div>

  You would replace the video token with your own, and you could add anything in place of "Watermark Message" text.

  Now, for styles we have this:

  <style>
    .placeholder {
      position: relative;
      margin: 0 auto;
      width: 640px;
    }
    .text_watermark {
      position: absolute;
      bottom: 20px;
      right: 20px;
      color: white;
      text-shadow: 0px 0px 4px black;
      z-index: 2;
      transition: 100ms all ease-in-out 5.2s;
    }
    ziggeoplayer:hover + .text_watermark {
      z-index: 0;
      transition-delay: 0s;
    }
  </style>

  The code in this rule: ".placeholder" is not as important. The only important part is the position:relative within it. This allows us to set the position of the text. The other values can be changed as you need to.

  The code in the rule: ".text_watermark" can also be changed any way you like. It will change the placement of the text over the video. If you want to have it shown all the time, you would just remove the "transition: 100ms all ease-in-out 5.2s;" part of it.

  The last - "ziggeoplayer:hover + .text_watermark" is just to have the text hidden if the mouse is over. This is of course a very simple demo that hides it while the controls are shown, however with some JavaScript or by raising the text higher, you can avoid the need for the same.

  Hope that this helps :) Do let us know how it goes.

  0

Please sign in to leave a comment.