vue 实现在线视频播放功能

此文章基于vue3-video-play实现前端视频播放效果

参考资料：GitHub - xdlumia/vue3-video-play: 适用于 Vue3 的 hls.js 播放器组件，配置丰富，界面还算好看

安装vue3-video-play

npm i vue3-video-play --save

yarn add vue3-video-play --save


//我这里用的是 "vue3-video-play": "^1.3.1-beta.6" 此版本

引入vue3-video-play

在需要使用该功能的vue页面js部分引入（以下所有代码可以直接复制使用）

<script setup>
import 'vue3-video-play/dist/style.css'
import { videoPlay } from 'vue3-video-play'
</script>

使用vue3-video-play

demo1直接使用

<template>
  <div>
    <videoPlay ref="aplayVideo" v-bind="options" @play="onPlay" @error="handleError" />
  </div>
</template>

<script setup>
import 'vue3-video-play/dist/style.css'
import { videoPlay } from 'vue3-video-play'
import { reactive } from 'vue'
//事件示例
const onPlay = (ev) => {
  console.log('播放', ev)
}
const handleError = (err) => {
  console.error('视频播放出错:', err)
}
//播放器
const options = reactive({
  width: '100%', //播放器高度
  height: '100%', //播放器高度
  color: '#409eff', //主题色
  title: '', //视频名称
  webFullScreen: false, //网页全屏
  speed: true, //是否支持快进快退
  currentTime: 0, //跳转到固定播放时间(s)
  muted: false, //静音
  autoPlay: true, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  control: true, //是否显示控制器
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量0-1
  src: '/src/20240618_160252.mp4', //视频源
  poster: '', //封面
  speedRate: [1.0, 1.25, 1.5, 2.0], // 可选的播放速度
  controlBtns: [
    'audioTrack', //音轨切换按钮
    'quality', //视频质量切换按钮
    'speedRate', //速率切换按钮
    'volume', //音量
    'setting', //设置
    'pip', //画中画按钮
    'pageFullScreen', //网页全屏按钮
    'fullScreen' //全屏按钮
  ] //显示所有按钮,
})
</script>

<style lang="scss" scoped></style>

demo2分装成组件使用

//在components下新建MyVideoPlayer.vue文件直接复制该代码
<template>
  <div>
    <videoPlay ref="aplayVideo" v-bind="mergedOptions" @play="onPlay" @error="handleError" />
  </div>
</template>

<script setup>
import 'vue3-video-play/dist/style.css'
import { videoPlay } from 'vue3-video-play'
import { reactive, computed } from 'vue'

// 定义props，允许外部传入视频源和其他配置
const props = defineProps({
  src: {
    type: String,
    required: true
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  }
  // ... 其他配置项也可以按照这种方式定义
})

// 使用computed属性合并外部传入的props和内部默认配置
const mergedOptions = computed(() => ({
  width: props.width,
  height: props.height,
  color: '#409eff',
  title: '',
  webFullScreen: false,
  speed: true,
  currentTime: 0,
  muted: false,
  autoPlay: true,
  loop: false,
  mirror: false,
  control: true,
  ligthOff: false,
  volume: 0.3,
  src: props.src,
  poster: '',
  speedRate: [1.0, 1.25, 1.5, 2.0],
  controlBtns: [
    'audioTrack',
    'quality',
    'speedRate',
    'volume',
    'setting',
    'pip',
    'pageFullScreen',
    'fullScreen'
  ]
}))

const onPlay = (ev) => {
  console.log('播放', ev)
}

const handleError = (err) => {
  console.error('视频播放出错:', err)
}
</script>

<style lang="scss" scoped></style>

使用该组件

//通过引入组件的方法使用
<template>
  <div>
    <my-video-player :src="'/src/20240618_160252.mp4'" />
  </div>
</template>

<script setup>
import MyVideoPlayer from './components/MyVideoPlayer.vue'
</script>

<style lang="scss" scoped></style>

效果图

 

以上实现了前端如何使用vue3-video-play实现视频播放具体可以参考文章开始的github地址,作者还提供了许多方法以及参数供给大家使用

参考资料：

vue3-video-play 实现视频播放