video组件vue

### 如何在 Vue 中创建和使用 Video 组件

#### 创建基础 Video 组件

为了在 Vue 项目中集成视频功能，可以基于 HTML 的 `<video>` 标签构建自定义组件。这不仅适用于 Vue2[^1]，同样也适合 Vue3[^2]。

对于简单的场景，在模板内直接利用原生的 `<video>` 元素即可：

<template>
  <div class="video-container">
    <!-- 基础 video 元素 -->
    <video controls preload="metadata">
      <source src="/path/to/video.mp4" type="video/mp4"/>
      Your browser does not support the video tag.
    </video>
  </div>
</template>

<script>
export default {
  name: 'BasicVideoPlayer'
}
</script>

此代码片段展示了如何通过标准方式引入 MP4 文件并提供基本控件给用户交互。

#### 集成第三方库增强体验

当需求超出内置标签的能力范围时，则推荐采用成熟的 JavaScript 库来扩展功能集。例如 `Video.js` 是一款流行的选择之一，它能够很好地与 Vue 结合工作以打造更专业的播放界面。

安装该插件之后，可以通过如下方式进行初始化配置：

import { defineComponent, onMounted } from "vue";
import videojs from "video.js";

export default defineComponent({
  props: ["options"],
  setup(props) {
    let player = null;

    onMounted(() => {
      // 初始化 VideoJS 实例
      player = videojs(document.querySelector("#my_video_1"), props.options);
    });

    return {
      player,
    };
  },
});

上述脚本说明了怎样借助 Composition API 来设置 Video.js 播放器实例，并将其挂载到指定 DOM 节点上。

#### 开发复杂业务逻辑下的 MyVideo 组件

针对更加复杂的多媒体应用场景——比如需要处理多个资源文件之间的切换操作——则可能要设计专门面向此类用途的新组件。下面给出了一种实现方案概述[^3]：

<!-- 自定义 my-video 组件结构 -->
<template>
  <section v-if="currentMediaItem !== undefined">
    <video ref="mediaElementRef"
           :src="currentMediaItem.src"
           @loadeddata="onLoadedData()"
           ...
          >
        Fallback content here...
    </video>
    
    ...其他子组件或样式...

    <!-- 插槽用于放置结束页面或其他自定义内容 -->
    <slot name="endpage"></slot>
  </section>
</template>

<script lang="ts">
// 定义 TypeScript 类型及属性绑定规则
interface MediaItem {
  id?: number;
  title?: string;
  description?: string;
  poster?: string;
  src: string;
}

export default {
  data() {
    return {
      playlist: [] as Array<MediaItem>,
      currentMediaIndex: -1,
      mediaElementRef: null as HTMLElement | null,
      ...
    }
  },

  computed: {
    currentMediaItem(): MediaItem | undefined {
      if (this.currentMediaIndex >= 0 && this.playlist.length > this.currentMediaIndex) {
        return this.playlist[this.currentMediaIndex];
      }

      return undefined;
    }
  },

  methods: {
    loadHandler(event): void {},
    errorHandler(event): void {},
    nextHandler(event): void {},
    prevHandler(event): void {}
  }
};
</script>

这段示例描述了一个具备播放列表管理能力的复合型媒体播放容器的设计思路及其部分核心函数签名。