> ## Documentation Index
> Fetch the complete documentation index at: /llms.txt
> Use this file to discover all available pages before exploring further.

# Short-Form Video Clips

> Build a TikTok-style clip feed — upload videos, create clip posts, display a scrollable clip reel, and track engagement.

> [!NOTE]
>
> **SDK v7.x** · Last verified March 2026 · iOS · Android · Web · Flutter

> **Speed run — just the code**
>
> ```typescript theme={null}
> // 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.getPosts(
>   { targetType: 'community', targetId: 'communityId', dataTypes: ['video'] },
>   ({ data }) => { renderClipReel(data); }
> );
> ```
>
> Full walkthrough below ↓

> [!TIP]
>
> **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.

```mermaid theme={null}
graph TD
    A[User picks a video] --> B[Upload to File Repository]
    B --> C{Upload status}
    C -->|transcoding| D[Show progress indicator]
    C -->|transcoded| E[fileId ready]
    E --> F[Create clip post]
    F --> G[Post appears in feed]
    G --> H[Viewer scrolls past clip]
    H --> I[markAsViewed called]
    I --> J[Impression + reach count updated]
    G --> K[Viewer reacts / comments]

    classDef action fill:#e1f5fe,stroke:#0288d1,color:#01579b
    classDef decision fill:#fff8e1,stroke:#f9a825,color:#f57f17
    classDef process fill:#f3e5f5,stroke:#7b1fa2,color:#4a148c
    classDef outcome fill:#e8f5e9,stroke:#388e3c,color:#1b5e20

    class A,H,K action
    class C decision
    class B,D,E,F,I process
    class G,J outcome
```

## Limits at a Glance

| Property | Limit |
| - | - |
| Max file size | 2 GB |
| Max duration | 15 minutes |
| Supported formats | 3gp, avi, f4v, flv, m4v, mov, mp4, ogv, 3g2, wmv, vob, webm, mkv |
| Caption length | 10,000 characters |

> [!NOTE]
>
> **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 TypeScript theme={null}
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](/social-plus-sdk/social/content-management/posts/creation/clip-post.md)

***

## 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 TypeScript theme={null}
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](/social-plus-sdk/core-concepts/content-handling/files-images-and-videos/video-handling.md)

**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 TypeScript theme={null}
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](/social-plus-sdk/social/content-management/posts/creation/clip-post.md)

**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 TypeScript theme={null}
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](/social-plus-sdk/social/content-management/posts/retrieval/query-posts.md)

**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 TypeScript theme={null}
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](/social-plus-sdk/social/content-management/posts/analytics/post-impressions.md)

**5. Add reactions and comments**

Clip posts support the same reactions and comments as any other post type — no additional setup required.

```typescript TypeScript theme={null}
import { ReactionRepository } from '@amityco/ts-sdk';

// Add a heart reaction to a clip post
await ReactionRepository.addReaction('post', post.postId, 'heart');
```

Full reference → [Reactions](/social-plus-sdk/core-concepts/content-handling/reactions.md)

***

## Connect to Moderation & Analytics

> **Impression analytics in the console**
>
> Impression and reach data rolls up to **Admin Console → Analytics → Content**. Filter by post type to see clip-specific engagement trends across communities.

> **Flag inappropriate clips**
>
> 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 TypeScript theme={null}
> import { PostRepository } from '@amityco/ts-sdk';
> await PostRepository.flagPost(post.postId);
> ```
>
> Full reference → [Content Moderation Pipeline](/use-cases/social/content-moderation-pipeline.md)

> **Webhook: clip post events**
>
> 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](/analytics-and-moderation/social+-apis-and-services/webhook-event.md)

***

## Common Mistakes

> [!WARNING]
>
> **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.

> [!WARNING]
>
> **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.

> [!WARNING]
>
> **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

> **Upload UX**
>
> * 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

> **Clip reel UX**
>
> * 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

> **Performance**
>
> * 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

***

> [!TIP]
>
> **Dive deeper**: [Posts API Reference](/social-plus-sdk/social/content-management/posts/overview.md) 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](/use-cases/social/post-impressions-and-creator-analytics.md)**
>
> Clips are publishing — now track views, reach, and engagement for your creators.

Or explore related guides:

> **[Post Impressions & Creator Analytics](/use-cases/social/post-impressions-and-creator-analytics.md)**
>
> Build a creator dashboard with per-post impression, reach, and viewed-users data

> **[Rich Content Creation](/use-cases/social/rich-content-creation.md)**
>
> Other post types — images, text, polls, files — in one guide

> **[Comments & Reactions](/use-cases/social/comments-and-reactions.md)**
>
> Add threaded comments and emoji reactions to clip posts


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.