Skip to main content

Short Video Player

The Short Video Player is a component from the @streamscloud/embeddable package that provides an immersive, full-screen video viewing experience for short-form content.

Installation​

npm install @streamscloud/embeddable

Basic Usage​

Import the openShortVideosPlayer function from the embeddable package:

import { openShortVideosPlayer } from '@streamscloud/embeddable/short-videos-player';

Opening the Player​

The Short Video Player is opened programmatically using the openShortVideosPlayer function:

openShortVideosPlayer({
  ids: ['id1','id2','...'],
  graphqlUrl: 'https://api.streamscloud.com/graphql',
  initialId: 'id1', //optional
});

Complete Example​

Here's a complete example showing how to implement the Short Video Player:

import { openShortVideosPlayer } from '@streamscloud/embeddable/short-videos-player';

// Sample video data

// Function to open the player
function playVideo() {
openShortVideosPlayer({
  ids: ['id1','id2','...'],
  graphqlUrl: 'https://api.streamscloud.com/graphql',
  initialId: 'id1', //optional
});
}

// Trigger the player (e.g., on button click)
document.getElementById('play-button').addEventListener('click', playVideo);

Configuration Options​

shortVideosProvider​

The main configuration object that controls the player behavior:

  • initialData: Object containing the starting configuration

    • startIndex: Number indicating which video to start with (0-based index)
    • prefetchedItems: Array of ShortVideoViewerModel objects to display initially

  • loadMore: Async function that should return additional videos when the user scrolls through the content

Best Practices​

  1. Preload Content: Always provide at least one video in the prefetchedItems array
  2. Implement loadMore: For a seamless experience, implement the loadMore function to fetch additional content
  3. Optimize Media: Ensure video files are optimized for mobile viewing
  4. Handle Errors: Implement error handling for failed video loads
  5. Accessibility: Ensure proper alt text and accessibility features are in place

Integration with Streams Platform​

When integrating with the Streams platform, the Short Video Player works seamlessly with:

  • Short Video content from Media Pages
  • Community contributions
  • Organization content

The player automatically handles user interactions and provides analytics tracking when properly configured with your Streams organization.

Troubleshooting​

Common Issues​

Player doesn't open: Ensure you're calling openShortVideosPlayer in response to a user interaction (click, tap, etc.)

Videos don't load: Check that your video URLs are accessible and in a supported format (MP4 recommended)

loadMore not working: Verify that your loadMore function returns an array of properly formatted ShortVideoViewerModel objects