必须使用 [email protected]及以上版本

vue3-video-play-sbmn

适用于 Vue3 的 hls.js 播放器组件 | 并且支持 MP4/WebM/Ogg 格式 配置强大，UI 还算好看 基于vue3-video-play修改而来

功能一览

1. 支持快捷键操作
2. 支持倍速播放设置
3. 支持镜像画面设置
4. 支持关灯模式设置
5. 支持画中画模式播放
6. 支持全屏/网页全屏播放
7. 支持从固定时间开始播放
8. 支持移动端，移动端会自动调用自带视频播放器
9. 支持 hls 视频流播放，支持直播
10. hls 播放支持清晰度切换

主页示例

https://codelife.cc/vue3-video-play/

近期更新 v1.0.9 🎉

• 优化：移动进度条现在只有当进度条释放后才改变时间
• 优化：去除部分代码注释，以减少包体积，并增加安全性
• 修复：播放页双击与单击事件将不再冲突

使用指南

安装

npm 安装：

npm install vue3-video-play-sbmn

yarn 安装：

yarn add vue3-video-play-sbmn

开始使用

全局使用

import { createApp } from "vue";
import App from "./App.vue";

import videoPlay from "vue3-video-play-sbmn/lib/index"; // 引入组件
import "vue3-video-play-sbmn/dist/style.css"; // 引入css

const app = createApp(App)

app.use(videoPlay);

app.mount("#app");

组件内使用

// require style
import "vue3-video-play-sbmn/dist/style.css"; // 引入css
import { videoPlay } from "vue3-video-play-sbmn/lib/index";
export default {
  components: {
    videoPlay,
  },
};

基本示例

提供了丰富了配置功能 :::demo 自定义配置 比如自定义 poster。

<template>
  <div>
    <videoPlay
      v-bind="options"
      poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg"
    />
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
const options = reactive({
  width: "800px", //播放器宽度
  height: "450px", //播放器高度
  color: "#409eff", //主题色
  title: "", //视频名称
  src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/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, //是否显示控制
  controlBtns: [
    "audioTrack",
    "quality",
    "speedRate",
    "volume",
    "setting",
    "pip",
    "pageFullScreen",
    "fullScreen",
  ], //显示所有按钮,
});
</script>

<style scoped></style>

:::

可以通过props的speed开启或关闭进度条功能, 并且通过 currentTime属性控制从 60 秒开始播放

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

<template>
  <div>
    <videoPlay
      v-bind="options"
      poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.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://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
});
</script>

<style scoped></style>

:::

还可以通过props的control属性 来控制是否显示控制器 :::demo 通过control 来控制是否显示控制器

<template>
  <div>
    <videoPlay
      v-bind="options"
      poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.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://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
});
</script>

<style scoped></style>

:::

事件示例

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

<template>
  <div>
    <videoPlay
      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>

:::

Hls m3u8 视频/直播

:::demo vue3-video-play-sbmn 支持 m3u8(hls)播放。 注意，type必须修改为m3u8类型

<template>
  <div>
    <videoPlay
      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-sbmn 支持 video 原生所有 Attributes video 原生属性 使用方式和 props 属性使用一致

| 名称 | 说明 | 类型 | 可选值 | 默认值 | | ------------- | :-------------------: | :-----: | :------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------: | | width | 播放器宽度 | string | - | 800px | | height | 播放器高度 | string | - | 450px | | color | 播放器主色调 | string | - | #409eff | | src | 视频资源 | string | - | - | | title | 视频名称 | string | - | - | | type | 视频类型 | string | - | video/mp4 | m3u8 | | poster | 视频封面 | string | - | 视频第一帧 | | webFullScreen | 网页全屏 | boolean | - | false | | speed | 是否支持快进快退 | boolean | - | true | | currentTime | 跳转到固定播放时间(s) | number | - | 0 | | playsinline | ios 点击屏幕是否全屏 | boolean | - | false | | muted | 静音 | boolean | - | false | | speedRate | 倍速配置 | array | - | ["2.0", "1.0", "1.5", "1.25", "0.75", "0.5"] | | autoPlay | 自动播放 | boolean | - | false,为 true 时会自动静音 | | loop | 循环播放 | boolean | - | false | | mirror | 镜像画面 | boolean | - | false | | ligthOff | 关灯模式 | boolean | - | false | | volume | 默认音量 | number | 0-1 | 0.3 | | control | 是否显示控制器 | boolean | - | true | | controlBtns | 控制器显示的按钮 | array | ['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen'] | ['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen'] | | preload | 预加载 | string | meta/auto/none | auto |

props属性 controlBtns 按钮说明

| 名称 | 说明 | | -------------- | :--------------: | | audioTrack | 音轨切换按钮 | | quality | 视频质量切换按钮 | | speedRate | 速率切换按钮 | | volume | 音量 | | setting | 设置 | | pip | 画中画按钮 | | pageFullScreen | 网页全屏按钮 | | fullScreen | 全屏按钮 |

Events

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

| 事件名称 | 说明 | 回调 | | ---------------- | -------------------------- | ----- | | mirrorChange | 镜像翻转事件 | val | | loopChange | 循环播放开关事件 | val | | lightOffChange | 关灯模式事件 | val | | loadstart | 客户端开始请求数据 | event | | progress | 客户端正在请求数据 | event | | error | 请求数据时遇到错误 | event | | stalled | 网速失速 | event | | play | 开始播放时触发 | event | | pause | 暂停时触发 | event | | loadedmetadata | 成功获取资源长度 | event | | loadeddata | 缓冲中 | event | | waiting | 等待数据，并非错误 | event | | playing | 开始回放 | event | | canplay | 暂停状态下可以播放 | event | | canplaythrough | 可以持续播放 | event | | timeupdate | 更新播放时间 | event | | ended | 播放结束 | event | | ratechange | 播放速率改变 | event | | durationchange | 资源长度改变 | event | | volumechange | 音量改变 | event | | fullscreen | 全屏 | event | | webfullscreen | 网页全屏 | event | | pictureinpicture | 画中画 | event | | progressmove | 进度条改变 | event | | playbackRate | 播放速度改变（插件不检测） | event | | qualitylevels | 分辨率改变 | event | | clickCopy | 点击复制地址 | event | | clickVersion | 点击版本 | event |

快捷键说明

支持快捷键操作 | 键名 | 说明 | | ---------- | ----------------------------- | | Space | 暂停/播放 | | 方向右键 → | 单次快进 10s，长按 5 倍速播放 | | 方向左键 ← | 快退 10s | | 方向上键 ↑ | 音量+10% | | 方向下键 ↓ | 音量-10% | | Esc | 退出全屏/退出网页全屏 | | F | 全屏/退出全屏 |

refImpl

| 名称 | 说明 | 类型 | | ---------- | ------------------- | -------- | | video | 浏览器原生Video对象 | RefImpl | | state | 封装的状态对象 | Object | | play | 播放 | Function | | pause | 暂停 | Function | | togglePlay | 暂停或播放 | Function | | muted | 静音或取消静音 | Function | | inputFocus | 聚焦播放器 | Function |

注意，如果设置不自动播放，使用play()和togglePlay()前，用户必须先和页面有交互，否则调用失败，错误如下：

DOMException: play() failed because the user didn't interact with the document first

refImpl 示例：

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

// 在模板中使用 ref="video" 定义对象，脚本中使用const ‘ref名称’ = ref(null)获取ref对象
const video = ref(null);
nextTick(() => {
  console.log('设置静音');
  video.value.muted() // .Function() 方式调用方法
  console.log(video.value.state); // .value 方式使用属性
});
</script>

<style scoped></style>

Author

saobaomeinan

基于vue3-video-play修改而来 点个 start

vue3-video-play