Skip to main content
SDK v7.x · Last verified March 2026 · iOS · Android · Web · Flutter
// 1. Upload a video file
const { data: file } = await FileRepository.uploadVideo(videoBlob);

// 2. Create a clip post
await PostRepository.createClipPost({
  targetType: 'community', targetId: 'communityId',
  videoFileId: file.fileId,
  thumbnailFileId: 'thumbnail-id', // optional
});

// 3. Query clip posts in a feed
PostRepository.queryPosts(
  { targetType: 'community', targetId: 'communityId', dataTypes: ['video'] },
  ({ data }) => { renderClipReel(data); }
);
Full walkthrough below ↓
Platform note — code samples below use TypeScript. Every method has an equivalent in the iOS (Swift), Android (Kotlin), and Flutter (Dart) SDKs — see the linked SDK reference in each step.
Clip posts let users share videos up to 15 minutes directly in community and user feeds. They are distinct from livestream posts (live broadcast) and regular video posts — they’re purpose-built for short-form, scrollable video content with full reactions, comments, and impression tracking. This guide walks through uploading a clip, publishing it to a feed, and displaying a clip reel.

​
Limits at a Glance

PropertyLimit
Max file size2 GB
Max duration15 minutes
Supported formats3gp, avi, f4v, flv, m4v, mov, mp4, ogv, 3g2, wmv, vob, webm, mkv
Caption length10,000 characters
After completing this guide you’ll have:
  • Clip post upload flow (video up to 15 min) with progress tracking
  • Auto-play clip reel rendering in the feed with proper display mode
  • Impression tracking firing when clips are visible on screen

​
Quick Start: Create a Clip Post

TypeScript
import { PostRepository, PostContentType } from '@amityco/ts-sdk';

try {
  const { data: post } = await PostRepository.createClipPost({
    data: { text: 'Check out this moment!' },
    attachments: [
      { fileId: 'videoFileId1', type: PostContentType.CLIP, displayMode: 'fill', isMuted: false },
    ],
    targetType: 'community',
    targetId: 'communityId1',
  });
} catch (error) {
  console.error('Failed to create clip post:', error);
}
Full reference → Clip Posts

​
Step-by-Step Implementation

1

Upload the video file

Upload the raw video file before creating the post. The SDK returns a fileId once the upload is complete. Transcoding then happens automatically in the background.
TypeScript
import { FileRepository } from '@amityco/ts-sdk';

// uploadFile accepts a File (web) or file path (native)
const { data: uploadedFile } = await FileRepository.uploadVideo(videoFile, {
  onProgress: (progress) => console.log(`Upload: ${progress}%`),
});

const fileId = uploadedFile.fileId;
Full reference → Video Handling
2

Create the clip post

Pass the fileId as an attachment. Set displayMode to 'fill' for vertical reels (TikTok-style) or 'fit' to letterbox horizontal video.
TypeScript
import { PostRepository, PostContentType } from '@amityco/ts-sdk';

const { data: post } = await PostRepository.createClipPost({
  data: { text: 'Behind the scenes 🎬' },
  attachments: [
    {
      fileId,
      type: PostContentType.CLIP,
      displayMode: 'fill',   // 'fill' crops to container; 'fit' letterboxes
      isMuted: false,         // start unmuted
    },
  ],
  targetType: 'community',   // 'community' or 'user'
  targetId: communityId,
});
Full reference → Clip Posts
3

Display a clip reel

Query clip posts for a community or user feed. Filter by PostContentType.CLIP to build a dedicated clips tab. Render each post as a full-screen vertical video card.
TypeScript
import { PostRepository } from '@amityco/ts-sdk';

const unsubscribe = PostRepository.getPosts(
  {
    targetType: 'community',
    targetId: communityId,
    dataTypes: ['clip'],   // filter to clips only
    limit: 10,
  },
  ({ data: posts, hasNextPage, onNextPage }) => {
    renderClipReel(posts);
    // loadMoreButton.onClick = onNextPage when hasNextPage is true
  },
);
Full reference → Query Posts
4

Track impressions as users scroll

Call markAsViewed() when a clip is at least 50% visible for 1 second. This updates the post’s impression (total views) and reach (unique viewers) counters.
TypeScript
import { PostRepository } from '@amityco/ts-sdk';

// Called from your IntersectionObserver / viewability tracker
function onClipVisible(post: Amity.Post) {
  post.analytics.markAsViewed();
  console.log(`Impressions: ${post.impression}, Reach: ${post.reach}`);
}
Full reference → Post Impressions
5

Add reactions and comments

Clip posts support the same reactions and comments as any other post type — no additional setup required.
TypeScript
import { ReactionRepository } from '@amityco/ts-sdk';

// Add a heart reaction to a clip post
await ReactionRepository.addReaction('post', post.postId, 'heart');
Full reference → Reactions

​
Connect to Moderation & Analytics

Impression and reach data rolls up to Admin Console → Analytics → Content. Filter by post type to see clip-specific engagement trends across communities.
Users can flag clip posts with the same SDK flagging APIs used for other content. Flagged clips surface in Admin Console → Moderation → Flagged Content.
TypeScript
import { PostRepository } from '@amityco/ts-sdk';
await PostRepository.flagPost(post.postId);
Full reference → Content Moderation Pipeline
Receive post.created and post.deleted webhook events filtered to dataType: 'clip' to trigger downstream workflows like CDN pre-warming or notification dispatch.→ Webhook Events

​
Common Mistakes

Uploading uncompressed video — Raw video files can be hundreds of megabytes. Always compress to H.264/MP4 at a reasonable bitrate (2–5 Mbps for 1080p) before uploading.
Skipping thumbnail generation — Without a thumbnailFileId, clip posts render with a blank placeholder in feeds. Extract a frame from the video and upload it as the thumbnail.
Auto-playing clips with audio — Auto-playing with sound is disruptive and violates platform guidelines (iOS/Android). Start clips muted and let users tap for audio.

​
Best Practices

  • Show a progress bar during upload — clip files can be up to 2 GB
  • After upload completes, poll the file’s status field until it reaches transcoded before publishing the post. Show a “Processing…” state in the meantime
  • Validate file size and duration on the client before uploading to give instant feedback
  • Auto-play clips when they scroll into view; pause immediately on scroll away
  • Default to isMuted: true for autoplay in feeds to comply with browser autoplay policies
  • Show a tap-to-unmute affordance visibly on the first clip
  • Use displayMode: 'fill' for portrait clips and 'fit' for landscape
  • Pre-load the next clip in the reel while the current one is playing to eliminate inter-clip buffer
  • Use the 720p transcoded URL for mobile playback — the original resolution is usually excessive
  • Pause and release memory for clips that are more than 2 positions away from the current view
Dive deeper: Posts API Reference has full parameter tables, method signatures, and platform-specific details for every API used in this guide.

​
Next Steps

Your next step → Post Impressions & Creator Analytics

Clips are publishing — now track views, reach, and engagement for your creators.
Or explore related guides:

Post Impressions & Creator Analytics

Build a creator dashboard with per-post impression, reach, and viewed-users data

Rich Content Creation

Other post types — images, text, polls, files — in one guide

Comments & Reactions

Add threaded comments and emoji reactions to clip posts