1. Drop your video file into "Drop Video Here!" area and wait.
Zip file will be downloaded automatically right after the encoding process is completed.
- The encoding process is available in browsers listed below.
- Google Chrome for PC (RECOMMENDED)
- Firefox for PC
- Internet Explorer 11
- Microsoft Edge
- Supported original video format is H.264 (mp4).
- The encoded video has not audio track.
- On trial mode (when you are not logged in), encoded video length is limited to 10 seconds and a watermark is inserted.
- Your video file is not uploaded. The encoding process is implemented at local machine.
2. Extract the zip file, and upload the extracted folder to your server.
You can rename the folder's name.
3. Copy and paste below source code into the place you want to insert the video.
<script src="/path/to/jquery.js"></script>
<script src="/path/to/video_dir/ipeg.js"></script>
<canvas _ipeg="/path/to/video_dir"></canvas>Replace all "/path/to/" codes by your files path.
"video_dir" means the uploaded folder name on step 2 above.
You can insert multiple videos. Just add <canvas _ipeg="/path/to/video_dir2"></canvas>. Don't need to import "ipeg.js" for the second and the subsequent ones.
Feel free to style the <canvas> tag by CSS.
Transparent Background Option
<canvas _ipeg="/path/to/video_dir" _ipegTransparent="@leftTop"></canvas>By setting the "_ipegTransparent" attribute, you'll be able to carry out transparent background processing.
By setting the attribute value to "@leftTop", the color of the pixel in the top left corner of the first frame will be selected as the background color. That color, along with its approximate colors, will be the target of transparency processing. The "@rightTop", "@leftBottom", and "@rightBottom" attribute values work similarly.
You can also directly specify the pixel coordinates (e.g., "@10,20") or directly set the background color (e.g., "#63cb61") as well.
The range of approximate colors can be set by inputting a space followed by a number between 0 and 255 after the attribute color (e.g., "@leftTop 55"). Default value is 32.