三、核心架构
3.1 核心概念
根据 Clappr 的源码设计，播放器内部主要包含以下几个核心组件：
核心组件之间的关系：
Player 创建 → Core → Container（创建时自动初始化） → Playback（实际播放媒体）
MediaControl 作为 UI 层，监听用户操作并调用 Playback 的 API
Plugin 可以附着在不同层级，监听事件并注入功能
3.2 插件系统详解
Clappr 插件系统的强大之处在于，你几乎可以用它来修改播放器的任何行为，极大地提高了灵活性。
插件的几种类型：
Core Plugin（核心插件）：作用于整个播放器，可以监听核心事件、添加全局功能等。
Container Plugin（容器插件）：作用于特定的播放容器，可用于扩展 UI 组件。
Playback Plugin（播放插件）：用于扩展对新媒体格式（如 FLV、YouTube）的支持。
在 @clappr/player 中，许多常用功能都是以插件的形式存在的。
四、核心配置参数
创建播放器实例时，可以通过传递一个配置对象来定制其行为。
4.1 基础配置参数
4.2 高级配置参数
4.3 在 Vue 中使用配置
在 v-clappr 组件中，可以直接通过 :options 属性将配置传递给播放器：
<template>
<VClappr source="your-video-url.mp4" el="player" :options="playerOptions" />
</template>
<script setup>
const playerOptions = {
width: '100%',
height: 400,
autoPlay: false,
mute: false,
loop: false,
poster: 'https://example.com/poster.jpg',
playback: {
preload: 'auto',
controls: false,
playInline: true,
hlsjsConfig: { debug: true },
},
};
</script>
