It works like a "Streaming gif". Easy to use!
While very convenient, HTML5's <video> tag also has a few limits.
First, it does not handle transparent pixels. This limits video form to rectangular shapes, and is unsuitable for rendering in layers with other elements on the web page.
Also, there is a limit to "Inline and Auto Playback" on smartphones's browser.
In Android the "Inline Playback" feature is available but the "Auto Playback" is not available yet. Because of this limitation, user is required to touch the screen to turn on the video content at the website header for the first view. In iOS version 9 and old ones, both of these features are unavailable. The video contents play only in full screen mode. Both of these features are available for browsers in PC. But as making websites by Responsive Web Design for all devices (Android, iOS and PC), developers have to write separated source code for each of platform.
iPeg video format is a solution for these problems. With iPeg, the "Transparent Background" and "Inline Auto Playback" features can be enable by using only one source code for all platforms. With iPeg you can make impressive websites.
Zip file will be downloaded automatically right after the encoding process is completed.
You can rename the folder's name.
<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.
<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.
Trial Mode | $0 USD |
---|---|
5 Tickets | $50 USD |
60 Tickets | $300 USD |
1 Ticket = 1 Video Encoding.