viplayer v1.1.8

viplayerer

一个适应 Vue3 的视频播放组件

主要功能

• hls 播放支持清晰度切换
• 支持音频切换
• 支持快捷键操作
• 支持倍速播放设置
• 支持镜像画面设置
• 支持关灯模式设置
• 支持画中画模式播放
• 支持全屏/网页全屏播放
• 支持从固定时间开始播放
• 支持 hls 视频流播放，支持直播

使用指南

安装

npm 安装：

npm i viplayer --save

yarn 安装：

yarn add viplayer --save

开始使用

全局使用

import { createApp } from "vue";
import App from "./App.vue";
let app = createApp(App);

import videoPlayer from "viplayer"; // 引入组件
import "viplayer/dist/index.css"; // 引入css
app.use(videoPlayer);

app.mount("#app");

组件内使用

// require style
import "viplayer/dist/index.css";
import { videoPlay } from "viplayer";
export default {
  components: {
    videoPlay,
  },
};

基本示例

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

<template>
  <div>
    <vue3VideoPlay v-bind="options" />
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
const options = reactive({
  width: "800px", //播放器宽度
  height: "450px", //播放器高度
  color: "#409eff", //主题色
  title: "", //视频名称
  src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8", //视频源
  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" />
  </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://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8", //视频源
});
</script>

<style scoped></style>

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

demo 通过control 来控制是否显示控制器

<template>
  <div>
    <vue3VideoPlay v-bind="options" />
  </div>
</template>

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

const options = reactive({
  width: "500px", //播放器高度
  height: "260px", //播放器高度
  color: "#409eff", //主题色
  control: false, //是否显示控制器
  title: "", //视频名称
  src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8", //视频源
});
</script>

<style scoped></style>

事件示例

• demo viplayer 支持原生video所有事件。

<template>
  <div>
    <videoPlayer
      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://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8", //视频源
  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 viplayer 支持 m3u8(hls)播放

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

viplayer 支持 video 原生所有 Attributes video 原生属性 使用方式和 props 属性使用一致

Events

viplayer 支持 video 原生所有事件 video 默认事件

快捷键说明

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

Author