Videechy

Videechy Documentation

A comprehensive guide to creating, managing, and embedding interactive video compositions

Contents

Introduction to Videechy

Videechy is a powerful web application that allows you to create dynamic, interactive video compositions by layering multiple videos in a single canvas. Whether you're creating presentations, interactive displays, or rich media content, Videechy provides the tools you need to bring your vision to life.

Multiple Video Layers

Layer videos with independent controls for position, size, and transparency.

Intuitive Controls

Drag, resize, and customize videos with an easy-to-use interface.

Embeddable Components

Export your compositions as web components for use in any website.

Videechy operates in two primary modes: Composer Mode for creating and editing your video compositions, and Publish Mode for presenting your finished work. Additionally, the Export as Web Component feature allows you to share your compositions across the web.

Getting Started

1Creating Your First Composition

To begin creating a video composition, navigate to the Composer page and follow these steps:

  1. Select your desired canvas aspect ratio (16:9, 4:3, etc.)
  2. Add a background video by uploading a file, using a URL, or selecting a demo video
  3. Add video overlays using the buttons at the bottom of the screen
  4. Position and resize your overlays by dragging them or using the grid system
  5. Adjust transparency, playback settings, and other properties as needed

Video Sources

Videechy supports multiple video sources for both background and overlay videos:

  • Local Files: Upload videos directly from your device
  • Direct URLs: Link to videos hosted online
  • YouTube: Embed YouTube videos directly
  • Demo Videos: Use our pre-loaded demo videos to get started quickly

Composer Mode

Composer Mode is where you create and edit your video compositions. This mode provides all the tools and controls you need to arrange videos, adjust settings, and prepare your composition for publishing.

Background Video Controls

The background video serves as the base layer of your composition. You can control various aspects of the background video:

  • •
    Playback Controls: Play, pause, and adjust volume
  • •
    Autoplay: Set the video to play automatically when loaded
  • •
    Loop: Enable or disable video looping
  • •
    Start Delay: Set a delay before the video begins playing

Working with Overlays

Positioning & Resizing

  • •
    Drag to Position: Click and drag the overlay's header to move it
  • •
    Grid Snapping: Enable grid snapping for precise alignment
  • •
    Resize: Use the resize handle or grid selector to adjust size

Overlay Settings

  • •
    Transparency: Adjust overlay opacity
  • •
    Playback: Control play/pause and volume independently
  • •
    Visible on Hover: Make overlays appear only when hovered
  • •
    Set as Background: Swap an overlay with the background

Grid System

Videechy includes a powerful grid system to help you align and size your video overlays with precision:

  • •
    Show/Hide Grid: Toggle grid visibility
  • •
    Snap to Grid: Enable automatic snapping to grid cells
  • •
    Grid Resize: Resize overlays to span multiple grid cells
  • •
    Adaptive Grid: Grid dimensions adjust based on your selected aspect ratio

Publish Mode

Publish Mode transforms your composition into a clean, presentation-ready view by hiding all editing controls while maintaining the functionality of your videos.

Entering Publish Mode

To enter Publish Mode:

  1. Complete your composition in Composer Mode
  2. Click the "Publish Mode" button at the bottom of the screen
  3. Optionally set a password to protect your composition from unauthorized editing
  4. Your composition will enter full-screen presentation mode

Password Protection

Password protection adds a layer of security to your published compositions:

  • •
    Setting a Password: When entering Publish Mode, you'll be prompted to set a password (optional)
  • •
    Password Required: If set, the password will be required to exit Publish Mode and return to editing
  • •
    Security: Prevents unauthorized users from modifying your composition

Interacting in Publish Mode

While in Publish Mode, you can still interact with your videos:

  • •
    Video Controls: Hover over videos to reveal playback controls
  • •
    Hover Overlays: If enabled, overlay videos will appear when hovered
  • •
    Background Swap: Use the "Set as Background" button on overlays to swap with the background

Exiting Publish Mode

To return to Composer Mode:

  1. Move your mouse to reveal the settings icon in the top-right corner
  2. Click the settings icon
  3. If password-protected, enter your password when prompted
  4. Your composition will return to Composer Mode with all editing controls restored

Export as Web Component

New Feature

The Export as Web Component feature allows you to package your entire video composition as a standalone, embeddable component that can be used on any website. This powerful feature maintains all the functionality of your composition while making it portable and easy to share.

How to Export Your Composition

  1. Create your composition in Composer Mode

    Ensure your composition is complete and functioning as expected

  2. Click the "Export" button in the bottom toolbar

    This will open the Export as Web Component dialog

  3. Configure export settings
    • Project Name: Set a unique identifier for your project
    • Edit Password: Optionally set a password to protect editing
    • Advanced Options: Configure additional settings if needed
  4. Copy the embed code or download the config file

    The embed code can be pasted directly into any website

Export Options Explained

Project Name

The project name serves as a unique identifier for your composition. It's used in:

  • •
    The generated embed code
  • •
    The downloaded configuration file name
  • •
    Server-side storage (if applicable)

Edit Password

Setting an edit password protects your composition from unauthorized changes:

  • •
    Anyone can view and interact with your composition
  • •
    Only those with the password can edit it
  • •
    Leave empty for no password protection

Advanced Export Options

Custom API Endpoint

For advanced users, you can specify a custom API endpoint for the web component script:

  • •
    Default: Uses the standard CDN (https://cdn.videocomposer.app)
  • •
    Custom: Specify your own endpoint for self-hosting or custom implementations
  • •
    Use Case: Useful for enterprise deployments or when integrating with your own infrastructure

Embed Code & Config File

Embed Code

The embed code is a snippet of HTML that you can paste into any website to include your composition:

  • •
    Includes the necessary script to load the web component
  • •
    Contains your composition's unique identifier
  • •
    Can be customized with additional attributes
<script src="https://cdn.videocomposer.app/embed.js"></script>
<video-composer project-id="my-project" style="width: 100%;"></video-composer>

Config File

The configuration file contains all the data needed to recreate your composition:

  • •
    JSON format with complete composition state
  • •
    Useful for backup and self-hosting
  • •
    Can be loaded via the config-url attribute

Embedding Guide

Once you've exported your composition as a web component, you can embed it in any website. This section provides detailed instructions for different scenarios.

Basic Embedding

To embed your composition in any HTML page:

  1. Copy the embed code from the export dialog
  2. Paste it into your HTML where you want the composition to appear
  3. Adjust the width and height as needed using CSS
<!-- Add the VideoComposer script -->
<script src="https://cdn.videocomposer.app/embed.js"></script>

<!-- Place the component where you want it to appear -->
<video-composer
  project-id="my-awesome-composition"
  style="width: 100%; aspect-ratio: 16/9;"></video-composer>

Customization Options

The web component supports several attributes for customization:

AttributeDescriptionExample
project-idUnique identifier for your compositionproject-id="my-project"
editableEnable editing capabilitieseditable="true"
config-urlURL to a JSON configuration fileconfig-url="https://example.com/config.json"
autoplayControl initial autoplay behaviorautoplay="false"

Enabling Editing

To allow users to edit the embedded composition:

  1. Add the editable="true" attribute to the component
  2. An edit button will appear in the component
  3. If password-protected, users will need to enter the password to make changes
<video-composer
  project-id="my-composition"
  editable="true"
  style="width: 100%; aspect-ratio: 16/9;"></video-composer>

Self-Hosting

For complete control, you can self-host your composition:

  1. Download the configuration file from the export dialog
  2. Host the file on your own server
  3. Use the config-url attribute to point to your hosted file
<script src="https://cdn.videocomposer.app/embed.js"></script>
<video-composer
  config-url="https://example.com/my-composition.json"
  style="width: 100%; aspect-ratio: 16/9;"></video-composer>

Advanced Features

Videechy includes several advanced features for power users who want to create more complex and interactive video compositions, including Hover-Activated Overlays, Hot Spot Grid, and JavaScript API integration.

Hover-Activated Overlays

Hover-Activated Overlays & Hot Spots

Create interactive compositions where video overlays appear only when specific areas are hovered:

  • Select a video overlay in Composer Mode
  • Click the Settings icon to open Advanced Settings
  • Enable the "Visible On Hover" option to make the overlay appear only when hovered
  • For more precise control, enable "Hot Spot Activation" and assign a specific hot spot ID
  • When using hot spots, the overlay will only appear when hovering over the assigned hot spot, not the overlay itself
  • Optionally enable "Set As Background On Hover" for interactive background swapping

This feature is particularly useful for creating interactive presentations, product showcases, or educational content where users can explore different video elements by hovering over specific regions.

Hot Spot Grid System

The Hot Spot Grid system provides precise control over where overlay videos appear when hovered:

  1. Enable the Hot Spot Grid

    In Composer Mode, click the "Show Hot Spots" button in the top toolbar to display the 10×10 grid of hot spots

  2. Configure an overlay to use hot spots

    Select an overlay, open Advanced Settings, enable "Visible On Hover", then enable "Hot Spot Activation"

  3. Assign a specific hot spot

    Enter the ID number (0-99) of the hot spot you want to trigger the overlay

  4. Test in Publish Mode

    In Publish Mode, the overlay will only appear when hovering over its assigned hot spot, not when hovering the overlay itself

Key Benefits

  • •
    Precision Triggering: Activate overlays from specific areas of your background video
  • •
    Interactive Hotspots: Create interactive regions that reveal content only when hovered
  • •
    Clean Interface: Overlays remain hidden until the user interacts with the designated hot spot
  • •
    Multiple Triggers: Assign different overlays to different hot spots for complex interactions

JavaScript API for Embedded Components

When embedding a Videechy composition, you can interact with it programmatically using JavaScript:

// Get a reference to the component
const videoComposer = document.querySelector('video-composer');

// Play all videos
videoComposer.playAll();

// Pause all videos
videoComposer.pauseAll();

// Listen for events
videoComposer.addEventListener('videoSwap', (event) => {
  console.log('Video swapped:', event.detail);
})

The fullJavaScript API documentation is available for developers who want to create more interactive integrations with their websites.

Custom Styling

You can customize the appearance of embedded compositions using CSS:

/* Custom styles for video-composer */
video-composer {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Style the controls that appear on hover */
video-composer::part(controls) {
  background: rgba(0, 0, 0, 0.7);
}

/* Style the play button */
video-composer::part(play-button) {
  color: #3b82f6;
}

The web component exposes several parts that can be styled using the ::part() CSS selector, allowing for deep customization while maintaining functionality.

Using the Hot Spot Grid

Understanding the Hot Spot Grid

The Hot Spot Grid divides your canvas into a 10×10 grid (100 hot spots) for precise interaction control:

  • Each hot spot has a unique ID number from 0 to 99
  • Hot spots are numbered from left to right, top to bottom
  • The grid is invisible in Publish Mode but controls where overlays appear
  • Multiple overlays can be assigned to the same hot spot if desired

Setting Up Hot Spot Activation

Configure overlays to respond to hot spot hovering:

  1. In Composer Mode, click "Show Hot Spots" in the top toolbar
  2. Hover over the grid to see hot spot IDs (0-99)
  3. Select an overlay you want to activate via a hot spot
  4. Open Advanced Settings by clicking the Settings icon
  5. Enable "Visible On Hover" option
  6. Enable "Hot Spot Activation" option
  7. Enter the ID of the hot spot you want to assign (e.g., 16, 42, 75)
  8. The overlay will now be linked to that specific hot spot

Testing Hot Spot Activation

Verify your hot spot configuration works correctly:

  • Enter Publish Mode to test your hot spot configuration
  • Hover over the area where your assigned hot spot is located
  • The overlay should appear only when hovering over the hot spot
  • Moving away from the hot spot should hide the overlay
  • Hovering directly over the overlay itself should not make it appear

Creative Uses for Hot Spots

  • •
    Interactive Product Tours: Assign different product feature videos to hot spots on a main product image
  • •
    Educational Content: Create interactive diagrams where hovering over different parts reveals explanatory videos
  • •
    Multi-Angle Views: Show different camera angles of a scene when hovering over different regions
  • •
    Interactive Maps: Reveal location-specific videos when hovering over different areas of a map

Troubleshooting

Common Issues

Videos Not Playing

  • Check if the video URL is still valid and accessible
  • Ensure the video format is supported by the browser (MP4, WebM, etc.)
  • For YouTube videos, make sure they allow embedding
  • Some browsers require user interaction before videos can autoplay

Embedding Issues

  • Verify that the embed script is loaded before the component tag
  • Check for JavaScript errors in the browser console
  • Ensure the project ID matches the one from your export
  • For self-hosted configs, check CORS settings on your server

Performance Issues

  • Reduce the number of simultaneous video overlays
  • Use lower resolution videos for better performance
  • Consider using the "Visible On Hover" feature to load videos only when needed
  • Ensure videos are properly compressed and optimized

Getting Help

If you're experiencing issues that aren't covered in this documentation, there are several ways to get help:

Community Forum

Join our community forum to ask questions and share your experiences with other Videechy users.

Support Ticket

For technical issues or bugs, submit a support ticket and our team will assist you.

Ready to Create Amazing Video Compositions?

Jump into Videechy now and start building interactive, engaging video experiences that will captivate your audience.