Player SDK quick start
This is a preview of the SDK. The full reference docs open with the beta.
1. Install the package
The web SDK has no runtime dependencies and is about 40 KB gzipped.
terminal npm install @we11cloud/player2. Upload a video
Create an upload from your server, then send the file from the client. You get a playback ID back.
create-upload.sh curl https://api.we11cloud.com/v1/uploads \ -H "Authorization: Bearer $WE11_API_KEY" \ -d '{ "title": "Launch keynote", "access": "signed" }' # → { "upload_url": "https://up.we11cloud.com/…", "playback_id": "pl_8Hq2…" }3. Play it
Pass the playback ID to the player. Adaptive streaming, captions and analytics are on by default.
player.ts import { createPlayer } from '@we11cloud/player' const player = createPlayer('#video', { playbackId: 'pl_8Hq2xK', autoplay: 'muted', captions: ['en', 'vi'], }) player.on('qualitychange', ({ height }) => { console.log(`Now playing ${height}p`) })
import { createPlayer } from '@we11cloud/player'
const player = createPlayer('#video', {
playbackId: 'pl_8Hq2xK',
autoplay: 'muted',
captions: ['en', 'vi'],
})
player.on('qualitychange', ({ height }) => {
console.log(`Now playing ${height}p`)
})import { We11Player } from '@we11cloud/player/react'
export function Lesson({ id }: { id: string }) {
return (
<We11Player
playbackId={id}
accentColor="#5b8cff"
onEnded={() => markComplete(id)}
/>
)
}import We11Player
struct LessonView: View {
let playbackId: String
var body: some View {
We11PlayerView(playbackId: playbackId)
.captions([.english, .vietnamese])
.aspectRatio(16 / 9, contentMode: .fit)
}
}import com.we11cloud.player.We11Player
@Composable
fun LessonScreen(playbackId: String) {
We11Player(
playbackId = playbackId,
captions = listOf("en", "vi"),
modifier = Modifier.aspectRatio(16f / 9f),
)
}Build your video product on We11cloud
Tell us what you are building. We will set up your beta workspace and help you ship your first stream.