Introduction

This video player exposes the familiar api and functionality of VideoJS while providing a simple API to work with the Portal video API.

Getting Started:

The Portal video API hosts and serves video content from the Internet Computer blockchain. To consume this content requires a HLS capable player such as VideoJS or hls.js.

We provide a simple wrapper around the VideoJS player that lets you easily play videos hosted on your Portal channel. Simple provide the channels canister id (cid) along with the content id of the video you'd like to play.

import { useAuthentication } from '@nft-portal/providers';
import { PortalPlayer } from '@nft-portal/portal-player';
import React from 'react';

export const VideoPage = () => {
  const { principal } = useAuthentication();
  const cid = 'your_portal_channel_cid';

  return (
    <PortalPlayer
      cid={cid} // your channels canister id
      contentId="your_video_content_id" // your video content id
      principalId={principal?.toString()} // principal id of viewer
      videoJsOptions={{ autoplay: true }} // standard videojs options
    />
  );
};

Use your own styling by providing a css file that overrides the standard videojs styling.

https://videojs.com/guides/skins/#customize-styles