vue video

<template>
  <div>
    <video controls>
      <source src="your-video-file.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>
</template>

<script>
export default {
  name: 'VideoPlayer',
  // 这里可以添加一些生命周期钩子或方法，例如在mounted中动态加载视频资源等
}
</script>

<style scoped>
/* 可以根据需要添加样式 */
video {
  width: 100%;
  max-width: 600px;
}
</style>

解释说明：

• <template>: 定义了 Vue 组件的 HTML 模板。这里使用了一个 <video> 标签来嵌入视频文件，并通过 <source> 标签指定了视频的路径和类型。
• controls 属性: 使视频播放器带有默认的控制条（如播放、暂停、音量等）。
• <source> 标签: 用于指定视频文件的路径和格式。浏览器会根据支持的格式选择合适的视频文件进行播放。
• <script>: 定义了 Vue 组件的 JavaScript 部分。在这个例子中，我们定义了一个简单的组件 VideoPlayer。
• <style scoped>: 定义了仅应用于该组件的 CSS 样式。scoped 关键字确保这些样式不会影响到其他组件。

你可以根据实际需求修改 src 属性中的视频路径。