插件 Github 地址 vue3-video-play

vue3-video-play

hls.js player component for Vue3.

实用于 Vue3 的 hls.js 播放器组件。

先看一下这个播放器 (vue3-video-play) 的界面吧

vue3-video-play 视频播放插件基于原生的 HTML5 的 <video> 标签 开发，所以反对的视频格式和 <video> 统一，并且反对<video> 标签的所有原生属性和办法

<span style=”color:#cb3837″> 必须应用 vue@3.2.4 及以上版本</span>

性能一览

1. 反对快捷键操作
2. 反对倍速播放设置
3. 反对镜像画面设置
4. 反对关灯模式设置
5. 反对画中画模式播放
6. 反对全屏 / 网页全屏播放
7. 反对从固定工夫开始播放
8. 反对挪动端，挪动端会主动调用自带视频播放器
9. 反对 hls 视频流播放，反对直播

10. hls 播放反对清晰度切换

    主页示例

https://xdlumia.github.io

rc 版本 v1.3.0-rc.3 🎉

• 新增: 反对 hls 视频流播放
• 新增: 新增画质切换，需视频流反对
• 新增: 新增画音视切换，需视频流反对
• 新增: props 参数减少 currentTime 属性，可跳转到固定工夫播放

• 新增: props 参数减少 type 属性，视频格式

  近期更新 v1.2.52 🎉

• 新增: 右键菜单性能，右键菜单包涵，视频滤镜调节、快捷键阐明、复制以后视频网址
• 新增: mirrorChange loopChange lightOffChange 事件
• 新增: 减少空格快捷键 播放 / 暂停 的操作

• 优化: 如果音量为 0 敞开静音按钮 音量设置为 5

  使用指南

装置

npm 装置：

npm i vue3-video-play --save

yarn 装置：

yarn add vue3-video-play --save

开始应用

全局应用

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')

组件内应用

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

根本示例

提供了丰盛了配置性能
:::demo 自定义配置 比方自定义 poster。

<template>
  <div>
    <vue3VideoPlay v-bind="options" poster='https://go.dreamwq.com/videos/ironMan.jpg'/>
  </div>
</template>

<script setup lang="ts">
import {reactive} from 'vue';
const options = reactive({
  width: '800px', // 播放器高度
  height: '450px', // 播放器高度
  color: "#409eff", // 主题色
  title: '', // 视频名称
  src: "https://go.dreamwq.com/videos/IronMan.mp4", // 视频源
  muted: false, // 静音
  webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], // 播放倍速
  autoPlay: false, // 自动播放
  loop: false, // 循环播放
  mirror: false, // 镜像画面
  ligthOff: false,  // 关灯模式
  volume: 0.3, // 默认音量大小
  control: true, // 是否显示控制器
})
</script>

<style scoped>
</style>

:::

能够通过 props 的speed开启或敞开进度条性能, 并且通过 currentTime属性管制从 60 秒开始播放

:::demo 通过 speed 敞开进度条拖动性能。并且通过 currentTime属性管制从 60 秒开始播放

<template>
  <div>
    <vue3VideoPlay v-bind="options" poster='https://xdlumia.oss-cn-beijing.aliyuncs.com/videos/02.jpg'/>
  </div>
</template>

<script setup lang="ts">
import {reactive} from 'vue';

const options = reactive({
  width: '500px', // 播放器高度
  height: '260px', // 播放器高度
  color: "#409eff", // 主题色
  currentTime:60,
  speed:false, // 敞开进度条拖动
  title: '', // 视频名称
  src: "https://go.dreamwq.com/videos/IronMan.mp4", // 视频源
})
</script>

<style scoped>
</style>

:::

还能够通过 props 的control属性 来管制是否显示控制器
:::demo 通过control 来管制是否显示控制器

<template>
  <div>
    <vue3VideoPlay v-bind="options" poster='https://xdlumia.oss-cn-beijing.aliyuncs.com/videos/02.jpg'/>
  </div>
</template>

<script setup lang="ts">
import {reactive} from 'vue';

const options = reactive({
  width: '500px', // 播放器高度
  height: '260px', // 播放器高度
  color: "#409eff", // 主题色
  control: false, // 是否显示控制器
  title: '', // 视频名称
  src: "https://go.dreamwq.com/videos/IronMan.mp4", // 视频源
})
</script>

<style scoped>
</style>

:::

事件示例

:::demo 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://go.dreamwq.com/videos/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>

:::

Hls m3u8 视频 / 直播

:::demo 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>

:::

Props

vue3-video-play 反对 video 原生所有 Attributes video 原生属性 应用形式和 props 属性应用统一

Events

vue3-video-play 反对 video 原生所有事件 video 默认事件

快捷键阐明

反对快捷键操作

Author

xdlumia

点个 start

vue3-video-play