vue怎么使用视频

在Vue中使用视频，你有几个选择，包括使用HTML5的<video>标签或者引入视频播放器组件。以下是一些方法：

使用HTML5 <video> 标签： 你可以直接在Vue组件的模板中使用HTML5的<video>标签来嵌入视频。例如：

<template>
 <div>
   <video width="320" height="240" controls>
     <source src="@/assets/video.mp4" type="video/mp4">
     Your browser does not support the video tag.
   </video>
 </div>
</template>

其中@/assets/video.mp4是指相对于你的Vue项目中的assets文件夹的视频文件路径。

使用Vue视频播放器组件： 有多个Vue视频播放器组件可供选择，例如vue-core-video-player和vue-video-player。

vue-core-video-player： 这是一个轻量级且优秀的视频播放器组件，支持移动端适配和个性化配置。你可以使用npm或yarn来安装它：

npm install --save vue-core-video-player

然后在你的main.js中引入并使用它：

import VueCoreVideoPlayer from 'vue-core-video-player'
Vue.use(VueCoreVideoPlayer)

在组件中使用：

<template>
<div id="app">
 <vue-core-video-player src="http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4"></vue-core-video-player>
</div>
</template>

更多配置和用法可以参考官方文档。

vue-video-player： 这是一个基于Video.js的Vue组件，提供了丰富的API和事件。安装方法如下：

npm install vue-video-player --save

在main.js中配置：

import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
Vue.use(VueVideoPlayer);

在组件中使用：

<template>
<div id="app">
 <video-player class="vjs-big-play-centered" :options="playerOptions" @play="onPlay" @pause="onPause"></video-player>
</div>
</template>

其中playerOptions是一个包含播放器配置的对象，onPlay和onPause是播放和暂停时触发的方法。

使用Video.js： 如果你想直接使用Video.js，可以通过npm安装：

npm i video.js

然后在你的Vue组件中引入并使用它：

import videojs from "video.js";
import "video.js/dist/video-js.css";
Vue.prototype.$video = videojs;

在组件中使用：

<template>
 <div id="app">
   <video ref="video" class="video-js" controls preload="auto" width="0" height="2">
     <source src="MY_VIDEO.mp4" type="video/mp4">
   </video>
 </div>
</template>
<script>
export default {
 name: 'App',
 mounted() {
   this.player = this.$video(this.$refs.video);
 },
 beforeDestroy() {
   if (this.player) {
     this.player.dispose();
   }
 }
}
</script>

更多关于Video.js的用法可以参考其官方文档。

选择哪种方法取决于你的具体需求，例如是否需要额外的功能或者样式自定义。