当前位置：首页 > VUE

vue怎么实现课程视频

2026-02-24 13:46:53VUE

Vue 实现课程视频功能

使用 HTML5 video 标签嵌入视频

在 Vue 组件中可以直接使用 HTML5 的 <video> 标签来嵌入视频文件。这种方法适合本地存储或服务器直链的视频文件。

<template>
  <div>
    <video controls width="100%">
      <source src="/path/to/video.mp4" type="video/mp4">
      您的浏览器不支持 HTML5 视频
    </video>
  </div>
</template>

集成第三方视频平台

对于托管在 YouTube、腾讯云点播等平台的视频，可以使用它们的嵌入代码或 SDK。以 YouTube 为例：

<template>
  <div>
    <iframe 
      width="100%" 
      height="500"
      :src="'https://www.youtube.com/embed/' + videoId"
      frameborder="0"
      allowfullscreen>
    </iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoId: 'YOUR_VIDEO_ID'
    }
  }
}
</script>

使用视频播放器组件

专业的视频播放器组件如 Video.js 或 vue-video-player 提供更多功能：

vue怎么实现课程视频

安装 vue-video-player：
```
npm install vue-video-player
```

在组件中使用：

vue怎么实现课程视频


<template>
<video-player 
 :options="playerOptions"
 @play="onPlayerPlay"
 @pause="onPlayerPause">
</video-player>
</template>

import { videoPlayer } from 'vue-video-player' export default { components: { videoPlayer }, data() { return { playerOptions: { autoplay: false, controls: true, sources: [{ type: "video/mp4", src: "/path/to/video.mp4" }] } } } } ```

实现视频列表和播放控制

创建视频列表组件，实现点击切换视频功能：

<template>
  <div>
    <div class="video-list">
      <div 
        v-for="(video, index) in videos" 
        :key="index"
        @click="changeVideo(video)">
        {{ video.title }}
      </div>
    </div>
    <video-player :options="currentPlayerOptions"></video-player>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videos: [
        { title: '课程1', src: '/path/to/video1.mp4' },
        { title: '课程2', src: '/path/to/video2.mp4' }
      ],
      currentVideo: null
    }
  },
  computed: {
    currentPlayerOptions() {
      return {
        autoplay: false,
        controls: true,
        sources: [{
          type: "video/mp4",
          src: this.currentVideo?.src || ''
        }]
      }
    }
  },
  methods: {
    changeVideo(video) {
      this.currentVideo = video
    }
  }
}
</script>

添加视频进度保存功能

使用 localStorage 保存视频播放进度：

// 在播放器事件中添加进度保存
onPlayerTimeUpdate(player) {
  localStorage.setItem(
    `videoProgress_${this.videoId}`, 
    player.currentTime()
  )
}

// 组件创建时恢复进度
mounted() {
  const savedTime = localStorage.getItem(`videoProgress_${this.videoId}`)
  if(savedTime) {
    this.$refs.player.currentTime(parseFloat(savedTime))
  }
}

响应式设计调整

通过 CSS 确保视频在不同设备上显示正常：

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 比例 */
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}