Playback uploaded videos

You can integrate uploaded videos in FP-Player to enriches your application’s media experience. This guide outlines the steps to upload and integrate your videos using the dashboard and through APIs.

Prerequisites

Active FastPix account: Sign up at dashboard.fastpix.io if you haven’t already. This will allow you to manage video assets and access the platform’s features.

Step 1: Upload videos using APIs

You can use a pull or push based approach to upload and create a new video or audio media using FastPix APIs. Once the media is uploaded, FastPix processes the file and stores it on the platform, making it available for use in playback or further processing.

API reference:

• Create media from URL (pull video)
• Upload media directly from device (push video)

To upload videos to FastPix, you can also explore our detailed step-by-step guide on how to upload video from URL and how to upload video directly.

Step 2: Upload videos using the dashboard

dashboard.fastpix.io also supports two methods to upload videos:

1. Pull video using URL: Recommended for hosting MP4 uploads available online.
2. Push video from device: For direct uploads from your local device storage.

Steps to pull videos using URL

1. Accessing the media dashboard
   • Open your web browser and navigate to https://dashboard.fastpix.io/login. This URL leads you to the login page if you are not logged in.
   • Enter your existing credentials to log in. If you haven't created an account yet, click the Sign Up button and follow the registration process.

2. Adding new media
   • After successful login, locate the Add new media section within the dashboard interface.
   • You'll be presented with two options: Pull video and Push video.
     
     
3. Pulling a video using URL
   • Click the Pull Video option. This method retrieves your video directly from the provided URL.
   • In the editor designated for the video URL, you can paste the public video URL you obtained beforehand. Double-check the URL to avoid any mistakes that might cause upload errors.
   • Click the Pull Video button to initiate the upload process.
     
     
4. Monitoring transcoding process
   • Upon successful initiation, your video will undergo transcoding. Transcoding ensures smooth playback within the FP-Player by preparing the video in a format optimized for streaming.
   • During this process, the asset status will be displayed as Preparing. Be patient, as transcoding may take some time depending on the video size and complexity.
     
     
5. Creating new media and viewing media (optional)
   • If you have additional videos to upload using Pull Video, simply repeat steps 2 and 3.
   • To explore previously uploaded or transcoded media, locate the "View Media" section within the dashboard and browse through your assets to get an overview. Clicking on a specific video entry will open its detailed information page.

Steps to push videos from device

1. Access the media management portal
   • Follow the same login process as for Pull Video

2. Push video from device
   • Select Push Video to upload a video directly from your device.
   • Choose the desired video file, click Open, and monitor the progress bar for upload completion.
     
     
3. Wait for API response
   • Once the upload reaches 100%, please wait for a confirmation or response from the dashboard to verify successful receipt.
     
     
4. Monitor transcoding status
   • Visit View Media to check the status of your uploaded video, which will initially display as Creating or Preparing.
   • Once transcoding is complete, the video status will change to Ready. You can now access detailed information, including playback ID and metadata.

Step 3: Obtaining the playback ID

On the View Details page of your uploaded video, locate the unique playback ID. This ID is essential for FP-Player to recognize and display the video. Copy it carefully for use in the next integration step.

Step 4: Integrate playback ID into FP-Player

Within your FP-Player application code, locate the section responsible for video playback setup and insert the following code, replacing PLAYBACK_ID with the copied playback ID from the dashboard:

<script src="https://cdn.jsdelivr.net/npm/@fastpix/[email protected]/dist/player.js"></script> 
 
<fp-player  
    playbackId="{PLAYBACK_ID}"  
</fp-player> 

PLEASE NOTE

The default stream-type attribute is set to "on-demand" by default. This indicates that the media stream URL will be rendered for immediate playback.

Testing your integration

Run or refresh your FP-Player application to confirm that the uploaded video plays successfully. This starts the playback of the video in your application.