Playlist

npm i @oplayer/ui @oplayer/plugins

import Player from '@oplayer/react'
import ui from '@oplayer/ui'
import { PlaylistPlugin } from '@oplayer/plugins'
 
Player.make('#player')
  .use([
    ui(),
    new PlaylistPlugin({
      initialIndex: 0,
      autoNext: true,
      sources: [
        {
          title: '君の名は - MP4',
          src: '/君の名は.mp4',
          poster: '/poster.png',
          duration: '01:32',
          thumbnails: {
            src: '/thumbnails.jpg',
            number: 100
          },
          subtitles: [
            {
              name: 'Default',
              default: true,
              src: '/君の名は.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: '/op.flv',
          duration: '00:17'
        }
      ]
    })
  ])
  .create()

export default class PlaylistPlugin implements PlayerPlugin {
    key: string;
    name: string;
    version: string;
    static m3u8Parser: any;
    player: Player<Ctx>;
    currentIndex?: number;
    $root: HTMLDivElement;
    options: PartialRequired<PlaylistOptions, 'autoNext' | 'autoHide'>;
    constructor(options?: PlaylistOptions);
    apply(player: Player): this | undefined;
    _init(): Promise<void>;
    get isWaiting(): boolean;
    changeSource(idx: number): Promise<void>;
    changeSourceList(sources: PlaylistSource[]): void;
    next(): void;
    previous(): void;
    showUI(): void;
    hideUI(): void;
    render(): void;
    renderList(sources: PlaylistSource[]): 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[];
}