Upload a video to IPFS and play it back via Livepeer. Covers web3.storage integration, asset creation, and decentralised video delivery.
Combining IPFS with Livepeer creates a fully decentralised video pipeline: content-addressed storage on IPFS with Livepeer transcoding for adaptive playback. This pattern is common in NFT video projects and decentralised social applications.What you will build: A workflow that uploads a video to IPFS via web3.storage, creates a Livepeer asset from the IPFS URL, and plays it back using the Livepeer Player.
Build the "Store and play videos on IPFS" tutorial as a runnable Node/TypeScript workflow. Create a fresh project, install livepeer and @web3-storage/w3up-client, and implement scripts that upload ./my-video.mp4 to web3.storage, import the resulting https://w3s.link/ipfs/<cid> URL into a Livepeer-compatible Asset API, poll until the asset is ready, and print the playback ID. Use these placeholders exactly: LIVEPEER_API_URL=<gateway asset API base URL>, LIVEPEER_API_KEY=<gateway provider API key>, WEB3_STORAGE_EMAIL=<email>, WEB3_STORAGE_SPACE_DID=<space DID>, NEXT_PUBLIC_PLAYBACK_BASE_URL=<provider playback base URL>. Do not use Livepeer Studio-specific URLs or keys. Include package.json scripts, TypeScript source files, .env.example, error handling for failed asset states, and a final verification command that proves a playback URL can be constructed from the returned playback ID.
For NFT video projects, store the IPFS CID in the NFT metadata to establish provenance. The Livepeer playbackId can be stored alongside it for delivery:
{ "name": "My NFT Video", "description": "A video NFT with decentralised storage and delivery.", "animation_url": "ipfs://bafybei...", "properties": { "livepeer_playback_id": "pla_abc123" }}
The animation_url field (ERC-721 metadata standard) points to the IPFS CID. The livepeer_playback_id is a convenience property for applications that want to serve the transcoded stream instead of the raw IPFS file.
