Adding HTML Overlays

overview html overlays, which might be static images or dynamic widgets showing such things as news headlines, stock prices, sports scores, or local weather, can be added as overlays on streaming videos during transcoding zixi uses the chromium embedded framework (cef) to embed the html overlay into each frame of the video note that this process is separate from the processing of the video frames, and depending on the cpu load, might run more slowly that means that while a snapshot from the html overlay will be added to every frame, some images may repeat for a static overlay this makes no difference, but for a dynamic overlay, there might be small discrepancies between what is seen in the video stream and what is seen in overlay viewed separately requirements the broadcaster must have a license key that enables transcoding as well as a transcoder (software, gpu, or vpu) installed docid\ lgq7l9suyqop2etabv1ul the html overlay plugin docid 1svyta7p777nbtqpn8yt8 must also be installed adding the overlay to a transcoded source in zen master, html overlays can only be added to transcoded source docid\ lnaua wktttul4xktbido the process is very simple put the html overlay on public url add the url to the html overlay url field, which appears in the advanced section of the screen for creating a transcoded source html overlay url field note that there is an option to use the audio track from the html overlay for the video audio track, which requires entering the audio pid number creating html overlays html overlays can be created as static content that sits on top of other content, such as a logo or an ad banner they can also be dynamic, pulling content such as current weather conditions or news headlines in from another source via javascript before looking at the details of creating overlays, it's worth pointing out that there are several platforms there are several platforms available that will help you do so easily the one we find best for video overlays is singular live https //singular live creating static html overlays creating a static overlay is straightforward add a basic overlay element to your html place whatever content you want here style it with css so it covers the whole viewport and sits on top of the page you can drop that into a bare html file and see it work, then adapt the css (color, opacity, z‑index) and what you place inside #overlay for your use case (logo, tutorial, modal, etc ) creating dynamic html overlays you can treat the overlay as a floating “info panel” that your javascript keeps updating with live data (weather, headlines, or both) basic idea you create a fixed position overlay element, style it so it sits on top of the page (but not full‑screen, unless you want that), and use fetch on an interval to pull in json from whatever api you like then you render that data into the overlay example dynamic overlay with weather + headlines dynamic overlay weather & news × weather loading weather… headlines loading news… this gives you a small, dismissible overlay in the top‑right that keeps pulling in fresh weather and headlines you can easily adapt it to a bottom bar or a ticker‑style strip by changing the css if you prefer not to deal with apis at all, you can also embed existing widgets inside an overlay container like this—for example a news ticker widget for \[headlines]  ( https //www commoninja com/widgets/news ticker https //www commoninja com/widgets/news ticker ) or a configurable \[weather widget panel for current conditions and forecast] ⁠ ( https //weatherwidget io/ https //weatherwidget io/ )—and let them handle the live data while your overlay just positions them