HTML Overlay

Introduction

HTML overlay let you render an animated HTML page — a lower-third, a subtitle box, an animated logo, or any other CSS-animated graphic — as a transparent video overlay, and composite it on top of your output. Instead of supplying a static image as your logo, you point to an HTML page and Qencode renders it into a transparent overlay for you, animation included.

This is useful any time a plain image logo isn't enough — for example, an animated bug that fades in, a scrolling ticker, or a styled subtitle card that only needs to appear for part of the video.

Adding an HTML overlay

HTML overlay can be created by adding an HTML page as the source of a logo entry within your format. In order to do this, use the /v1/start_encode2 API method to launch a transcoding job with a logo entry whose source param is set to the URL of your HTML page.

Request Example:

{
  "query": {
    "encoder_version": "2",
    "source": "YOUR_VIDEO_URL",
    "format": [
      {
        "output": "mp4",
        "destination": {
          "url": "YOUR_STORAGE_URL",
          "key": "YOUR_KEY",
          "secret": "YOUR_SECRET"
        },
        "duration": 5,
        "logo": [
          {
            "source": "https://nyc3.s3.qencode.com/qencode/subtitles.html",
            "width": 320,
            "height": 200,
            "position": { "align": "bc", "margin_x": 0, "margin_y": 0 },
            "start_time": 1,
            "duration": 3
          }
        ]
      }
    ]
  }
}

In this example, the page at source is rendered as a 320x200 transparent overlay, anchored to the bottom-center of the frame, appearing 1 second into the video and staying visible for 3 seconds.

1. In the Output Settings section, turn on Enable Watermark.
2. Switch the toggle from Image to HTML.
3. Enter the URL of your HTML page in the Watermark URL field.
4. Enter X Position and Y Position to place the top-left corner of the overlay.
5. Enter Width and Height for the overlay size.
6. Enter Start Time and Duration to control when the overlay appears and how long it stays on screen.

Overlay fields

Positioning

Rather than computing pixel coordinates yourself, you can anchor the overlay to a point in the frame using position:

Available align values:

• tl / top_left
• tc / top_center
• tr / top_right
• cl / center_left
• cc / center
• cr / center_right
• bl / bottom_left
• bc / bottom_center
• br / bottom_right

Need More Help?

For additional information, tutorials, or support, visit the Qencode Documentation page or contact Qencode Support at support@qencode.com.