Lucid AI Vision API Guide

As one of the leaders in advanced computer vision and AI applications for images and videos, Lucid’s comprehensive AI suite provides many intelligent features with their corresponding APIs which extract, analyze and generate value for our customers’ businesses. Our solutions support both web, app and TV experiences, while enabling web APIs (available for web pages when integrating Lucid’s javascript code), app APIs (used for features on native mobile both Android and iOS) and remote APIs for OTT or Android/Apple TV Apps.

In order to provide our customers with the best technical support and API experience, we strive to keep this developer documentation always up-to-date. And as more features are added added, you will see further updates and instructions in here.

We provide close to 24hrs technical support at, as our team is distributed across the United States and Asia (Taiwan). Our account/sales executives are always available for questions at

Lucid Video Player Tools

1. Get Started

1.1 Add Script Of The Tool To Your Project

You will need to make sure the following script of the tool should be embedded inside the <head> tag of the HTML web page.

1.2 Initialize The Tool

You need to initialize the tool with configs:

<!-- Please make sure to put the script above the </head> tag -->
<script src=""></script>
<script type='text/javascript' src='js/latest/lucidPlayer--modern.min.js' async='async' defer='defer'></script>
<script type='text/javascript' src='js/latest/lucidPlayer.min.js' async='async' defer='defer'></script>
Key Value Type Default Description
hoverTarget String ‘.body’ The target wrapper in web project where the video need to be implemented
mutable Boolean false Determine the video should be mutable or not

2. Preview API

2.1 Embeddable Preview Video Tool

The video’s preview shows the most important frames of the original videos uploaded by the user in Lucid’s AI portal or set in config:


When Lucid’s embedded source code is integrated into your web page, you can enable a demo of the video player tool by initializing the instance of the Lucid player.

In order to use this tool you need to first create a div which our tool will construct the content into. The div can be designed based on your requirements. Then create the tool using:

*  type Video = {
*    keys: number;
*    name: string;
*    thumbUrl: string;
*    videoUrl: string;
*    outerLink: string;
*    title: string;
*    subTitle: string;
*    info: string;
*  }
* @param {String} div - Classname of element to append videos 
* @param {Array<Video>} list - list of video objects 

lucidPlayer.previewsWidget(div, list)



div – any DOM element to insert widget into, mostly the wrapper of videos.

list – Array which indicates the list of videos.

keys – The index of item position. Default: 0

name – video name. Default: “ ”

thumbUrl – Image url of video thumbnail content. Default: “ ”

videoUrl – Url of the source video. Default: “”

outerLink – Redirect url when clicking on the video. Default: “”

title -The main title for the video name. Default: “”

subTitle – The sub title above the title. Default: “”

info – Description located under title section. Default: “”

2.2 Play previews when user hovers over them

Video autoplay is available when the mouse or screen hovers over the video thumbnail.



2.3 Zoom in videos when hovering on them

Video zoom in effect is available when the mouse hovers over the video thumbnail.




Contact Support

If you have any additional questions regarding Lucid’s API or advanced upcoming features, please contact us at or through our Slack support channel. We are here to assist you with any questions and technical challenges.

Sales/Account Support:

AI Video Solution Website: