Everything between your upload button and the play button

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),
  )
}