vue3视频播放器插件

Vue3中，视频播放器插件的选择较多，可以根据项目需求选择适合的轻量级或功能丰富的组件。其中一些流行的Vue3视频播放器插件包括：

1. **VPlayer**：一个基于HTML5 Video API构建的简单易用的视频播放器，支持自定义皮肤和交互控制。

<template>
  <v-player src="your-video-url" controls></v-player>
</template>

<script>
import VPlayer from 'vue-vplayer'
import 'vue-vplayer/dist/vue-vplayer.css'

export default {
  components: {
    VPlayer,
  },
}
</script>

相关问题

Vue 3视频播放器插件，提供进度条未观看的部分默认锁定不能被用户拖动，而已经观看过的部分则允许用户自由拖动控制播放进度

Vue 3中，你可以通过集成一些成熟的视频播放器插件如VPlayer、VuePlayer或Ivew Video等来实现这样的功能。这些插件通常都有丰富的API和配置选项，可以满足定制化需求。

例如，使用VPlayer插件，你可以设置`locked`属性来控制播放进度条的行为。当初始化播放器时，对进度条设置`defaultPlaybackRate`为0或者`playbackControls`设为`'disabled'`，可以使其锁定未观看部分。对于已观看部分，可以通过监听`playbackProgress`事件，在达到某个点后切换到`'enabled'`模式，让用户能够控制。

<template>
  <v-player :src="videoUrl" ref="player">
    <!-- ... 其他配置 ... -->
    <v-playback-controls locked v-model="isLocked">
      <!-- ... 控制元素 ... -->
    </v-playback-controls>
  </v-player>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: 'your_video_url',
      isLocked: true, // 初始锁定状态
    };
  },
  mounted() {
    this.$refs.player.addEventListener('timeupdate', () => {
      if (this.$refs.player.currentTime > someThreshold) { // 达到某个阈值
        this.isLocked = false; // 解锁已观看部分
      }
    });
  },
};
</script>

vue2视频播放器插件

Vue2视频播放器插件有两个常用的选择：vue-video-player和v-playback。vue-video-player是将video.js集成到Vue中的插件，可以播放HLS流和RTMP流。在安装vue-video-player插件时，hls插件会一并下载下来，而如果需要播放RTMP流，则需要安装videojs-flash插件。v-playback是一个Vue2插件，使视频播放更容易，可以在国内站点上找到示例、文档和Changelog。