Custom HTML on player

The button "Buy now" is shown at the top-right corner from the 10th second to the 10th minute mark. The display of the button is handle by the page itself and it is not an element of the video player. This is recommended so that the button can match the style of the web page.

The player can display controls on the bottom two corners with a larger containers. With smaller container, some player controls can move to the top-right corner. Hence it is recommended to keep new buttons on the top-left. In other corners, you should keep sufficient padding from the top and bottom edges.

The file src/index.js reads the current time of the video player. The timeupdate event works the same as the one as in the HTML5 video element. When the time is between the required range, the button is displayed and hidden otherwise. This can be modified to use other events to change the visibility of the custom HTML.

This is a demo of using the player API. The player API is used for attaching the event listener and reading the current time. Rest is normal javascript which should be modified as needed for your website.