Skip to content
Seamlift

Showcase

Seamplayer in production, and ready-made setups you can copy into your app.

In production

Seamlift

Seamplayer is the video player inside Seamlift. This is Seamlift’s brand film with every media tool on: three sizes, the filmstrip, chapters, captions, downloads, and links to a moment.

0:29

Recipes

Common setups built from the same demo film. Open the code to copy a complete component.

Minimal

One file and a poster, in your page’s own font. Nothing to set up beyond the source.

0:29
Show code
React
"use client";

import { SeamPlayer, type SeamPlayerProps } from "seamplayer";

const options = {
  "src": "/demo/film.mp4",
  "title": "Creators around the world",
  "fps": 24,
  "theme": {
    "accent": "#e0115f",
    "accentText": "#ffffff",
    "radius": "8px",
    "font": "system-ui, sans-serif",
    "monoFont": "ui-monospace, monospace"
  },
  "duration": 29,
  "poster": "/demo/poster.jpg"
} satisfies SeamPlayerProps;

export default function PlayerExample() {
  return (
    <div id="playground">
      <SeamPlayer
        {...options}
      />
    </div>
  );
}

Editorial

Square corners and the Sun accent, with the filmstrip and chapters for scanning a long cut.

0:29
Show code
React
"use client";

import { SeamPlayer, type SeamPlayerProps } from "seamplayer";

const options = {
  "src": [
    {
      "src": "/demo/film.mp4",
      "height": 720
    },
    {
      "src": "/demo/film-480.mp4",
      "height": 480
    },
    {
      "src": "/demo/film-360.mp4",
      "height": 360
    }
  ],
  "title": "Creators around the world",
  "fps": 24,
  "theme": {
    "accent": "#ffd23f",
    "accentText": "#1a0b14",
    "radius": "0px",
    "font": "\"Instrument Sans\", sans-serif",
    "monoFont": "\"JetBrains Mono\", monospace"
  },
  "duration": 29,
  "poster": "/demo/poster.jpg",
  "thumbnails": {
    "url": "/demo/scrub.jpg",
    "width": 320,
    "height": 180,
    "columns": 10,
    "count": 29,
    "interval": 1
  },
  "chapters": [
    {
      "start": 0,
      "title": "Lisbon"
    },
    {
      "start": 4,
      "title": "Western Norway"
    },
    {
      "start": 9,
      "title": "Mumbai"
    },
    {
      "start": 13,
      "title": "Goa"
    },
    {
      "start": 17,
      "title": "Lagos"
    },
    {
      "start": 21,
      "title": "Mexico City"
    },
    {
      "start": 25,
      "title": "Tokyo"
    }
  ],
  "shareUrl": "/seamplayer"
} satisfies SeamPlayerProps;

export default function PlayerExample() {
  return (
    <div id="playground">
      <SeamPlayer
        {...options}
      />
    </div>
  );
}

Course lesson

Captions, chapters, resume where each learner stopped, and a button to the next lesson at the end.

0:29
Show code
React
"use client";

import { SeamPlayer, type SeamPlayerProps } from "seamplayer";

const options = {
  "src": [
    {
      "src": "/demo/film.mp4",
      "height": 720
    },
    {
      "src": "/demo/film-480.mp4",
      "height": 480
    },
    {
      "src": "/demo/film-360.mp4",
      "height": 360
    }
  ],
  "title": "Creators around the world",
  "fps": 24,
  "theme": {
    "accent": "#e0115f",
    "accentText": "#ffffff",
    "radius": "24px",
    "font": "\"Instrument Sans\", sans-serif",
    "monoFont": "\"JetBrains Mono\", monospace"
  },
  "duration": 29,
  "poster": "/demo/poster.jpg",
  "thumbnails": {
    "url": "/demo/scrub.jpg",
    "width": 320,
    "height": 180,
    "columns": 10,
    "count": 29,
    "interval": 1
  },
  "chapters": [
    {
      "start": 0,
      "title": "Lisbon"
    },
    {
      "start": 4,
      "title": "Western Norway"
    },
    {
      "start": 9,
      "title": "Mumbai"
    },
    {
      "start": 13,
      "title": "Goa"
    },
    {
      "start": 17,
      "title": "Lagos"
    },
    {
      "start": 21,
      "title": "Mexico City"
    },
    {
      "start": 25,
      "title": "Tokyo"
    }
  ],
  "captions": [
    {
      "src": "/demo/places.vtt",
      "lang": "en",
      "label": "English"
    }
  ],
  "resumeKey": "showcase-course-lesson",
  "endAction": {
    "label": "Next lesson",
    "href": "/seamplayer/showcase"
  }
} satisfies SeamPlayerProps;

export default function PlayerExample() {
  return (
    <div id="playground">
      <SeamPlayer
        {...options}
      />
    </div>
  );
}

Add yours

Using Seamplayer in production? Open a pull request on GitHub to add it here.