Function createPlayer

player/player.ts:28–153

({ props, element, className, onEvent }: CreatePlayerOptions)

export type PlayerResult = ReturnType<typeof createPlayer>
export const createPlayer = ({ props, element, className, onEvent }: CreatePlayerOptions) => {
  // Exclude fallback options.
  const { options: fallbackOptions = {}, ...optProps } = props

  // Exclude undefined value.
  const propOptions: Omit<Props, 'options'> = {}
  const optPropKeys = Object.keys(optProps) as Array<keyof typeof optProps>
  optPropKeys.forEach((key) => {
    const value = optProps[key]
    if (value !== undefined) {
      // @ts-ignore
      propOptions[key] = value
    }
  })

  // Merge fallback options & exclude component options.
  const { volume, playbackRate, ...initOptions } = {
    ...propOptions,
    ...fallbackOptions
  }

  // Merge some confusing prop names.
  const videoJsOptions = {
    ...initOptions,
    // https://videojs.com/guides/options/#restoreel
    // Since the dispose > restore element side effect of Video.js occurs after the component has been unmounted,
    // a DOM retention error will occur if true, so it cannot be set to true.
    // restoreEl: initOptions.restoreEl ?? false,
    // Video.js only supports the `playsinline` property.
    playsinline: initOptions.playsinline ?? initOptions.playsInline
  }

  // https://videojs.com/guides/embeds/
  // https://videojs.com/guides/react/
  // MARK: Player div ingest
  // There are three ways to initialize a player, the "Player div ingest" type is the most suitable in a component scenario
  // because it generates the least amount of DOM side effects,
  // and this way it can fully utilize the existing div outer container and video elements without changing the DOM structure.
  // The problem is that the Video.js player, when instantiated, reads the className property of the video element as the className of the outer container,
  // but the component needs to satisfy the user's need to "be able to use the className to specify the style from the moment the component is rendered".
  // So we need to assume that only the className specified by the user through the component is needed for style control,
  // while the basic "video-js" - like className is another internal className with a specific side effect and used only for initializing the player.
  // So we need to distinguish the className into innerClassName, which is controlled internally by the component and remains unchanged,
  // and userClassName, which will be applied to the container element at times like init and change.
  // The reason why userClassName cannot be used directly as className for video elements is that it may cause unintended style side effects,
  // such as misalignment or recursive styles, due to the different DOM hierarchy.
  // MARK: RawHTML
  // A better solution may exist to create the player with a freshly created video element while maintaining a mounted identifier,
  // and when the player is instantiated, return the instantiated DOM entirely through the component,
  // but this relies on the framework supporting a RawHTML - like API - https://github.com/ reactjs/rfcs/pull/129
  // Custom controls capabilities can be implemented through the Video.js Component - https://videojs.com/guides/react/
  const player = videoJs(element, videoJsOptions, function () {
    // Stringing video.js events to vue emits.
    events.forEach((eventKey) => {
      this.on(eventKey, (payload) => {
        onEvent(eventKey, payload)
      })
    })