Vue3视频播放器组件Vue3-video-play入门教程：从零开始，打造专属视频播放器！

1、安装方式

（1）npm安装方式

npm i vue3-video-play --save

（2）yarn安装方式

yarn add vue3-video-play --save

2、使用方式

（1）局部使用

// require style
import 'vue3-video-play/dist/style.css'
import { videoPlay } from 'vue-video-play'
export default {
  components: {
    videoPlay
  }
}

（2）全局使用

import { createApp } from 'vue'
import App from './App.vue'
let app = createApp(App)
 
import vue3videoPlay from 'vue3-video-play' // 引入组件
import 'vue3-video-play/dist/style.css' // 引入css
app.use(vue3videoPlay)
 
app.mount('#app')

3、示例代码

（1）事件示例

vue3-video-play 支持原生video所有事件。

<template>
  <div>
      <vue3VideoPlay 
      width="800px"
      title="钢铁侠"
      :src="options.src"
      :poster="options.poster"
      @play="onPlay"
      @pause="onPause" 
      @timeupdate="onTimeupdate" 
      @canplay="onCanplay" />
  </div>
 
</template>
 
 
<script setup lang="ts">
import { reactive } from 'vue';
 
const options = reactive({
  src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
  poster: '', //封面
})
const onPlay = (ev) => {
  console.log('播放')
}
const onPause = (ev) => {
  console.log(ev, '暂停')
}
 
const onTimeupdate = (ev) => {
  console.log(ev, '时间更新')
}
const onCanplay = (ev) => {
  console.log(ev, '可以播放')
}
</script>
 
<style scoped>
</style>

（2）Hls m3u8视频/直播

vue3-video-play 支持m3u8(hls)播放

<template>
  <div>
      <vue3VideoPlay 
      width="800px"
      title="冰河世纪"
      :src="options.src"
      :type="options.type"
      :autoPlay="false"
       />
  </div>
 
</template>
<script setup lang="ts">
import { reactive } from 'vue';
const options = reactive({
  src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8", //视频源
  type: 'm3u8', //视频类型
})
</script>
 
<style scoped>
</style>

4、属性 Props

​vue3-video-play 支持video原生所有Attributes video原生属性 使用方式和props属性使用一致

props属性 controlBtns 按钮说明

Events

vue3-video-play支持video原生所有事件 video默认事件

快捷键说明

完整附件：点此下载