Playlist

npm i @oplayer/ui @oplayer/plugins

<script src="https://cdn.jsdelivr.net/npm/@oplayer/plugins@latest/dist/playlist.min.js"></script>
 
<script>
  Player.make('#player') .use([new OPlaylist(...)]).create()
</script>

import Player from '@oplayer/core'
import ui from '@oplayer/ui'
import { Playlist } from '@oplayer/plugins'
 
Player.make('#player')
  .use([
    ui(),
    new Playlist({
      initialIndex: 0,
      autoNext: true,
      sources: [
        {
          title: '君の名は - MP4',
          src: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/君の名は.mp4',
          poster: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/poster.png',
          duration: '01:32',
          thumbnails: {
            src: '/thumbnails.jpg',
            number: 100
          },
          subtitles: [
            {
              name: 'Default',
              default: true,
              src: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/君の名は.srt',
              offset: 2
            }
          ],
          highlight: [
            {
              time: 12,
              text: '谁でもいいはずなのに'
            },
            {
              time: 34,
              text: '夏の想い出がまわる'
            },
            {
              time: 58,
              text: 'こんなとこにあるはずもないのに'
            },
            {
              time: 88,
              text: '－－终わり－－'
            }
          ]
        },
        {
          title: 'Big Buck Bunny - HLS',
          src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
          duration: '10:34'
        },
        {
          title: 'DASH',
          src: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
          duration: '10:34'
        },
        {
          title: 'FLV',
          src: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/weathering-with-you.flv',
          duration: '02:02'
        }
      ]
    })
  ])
  .create()

export default class PlaylistPlugin implements PlayerPlugin {
  player: Player<Ctx>
  currentIndex?: number
  $root: HTMLDivElement
  constructor(options?: PlaylistOptions)
  get isWaiting(): boolean
  changeSource(idx: number): Promise<void>
  changeSourceList(sources: PlaylistSource[]): void
  next(): void
  previous(): void
  showUI(): void
  hideUI(): void
  render(): void
  destroy(): void
}
 
interface Segment {
  uri: string
  timeline: number
  title: string
}
 
export interface PlaylistOptions {
  sources: PlaylistSource[]
  customFetcher?: (source: PlaylistSource, index: number) => Promise<PlaylistSource> | PlaylistSource
  autoNext?: boolean
  autoHide?: boolean
  initialIndex?: number
  m3uList?:
    | {
        sourceFormat?: (info: Segment) => Source
      }
    | true
}
 
export interface PlaylistSource extends Omit<Source, 'src'> {
  src?: string
  duration?: string
  subtitles?: SubtitleSource[]
  thumbnails?: Thumbnails
  highlights?: Highlight[]
}