vue3使用dplayer视频播放器

vue3使用dplayer视频播放器

参考

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 "vue3-video-play";
export default {
  components: {
    videoPlay,
  },
};

<!-- 判断是不是视频 -->
          <div v-if="videotype.includes(file!.ext)">
            <videoPlay
              ref="aplayVideo"
              :src="file!.url"
              v-bind="options"
              @play="onPlay"
            />
          </div>

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

// 视频播放组件
import "vue3-video-play/dist/style.css";
import { videoPlay } from "vue3-video-play";
import { onPlay, options, videotype } from "@/core/plugins/video";
export default defineComponent({
  components: {
    videoPlay,
  },
  name: "message-out",
  props: {
    
  },
  setup(props) {
    return {
      onPlay,
      options,
      videotype,
    };
  },
});
</script>

import { reactive } from "vue";
export const videotype = ["mov", "avi", "mkv", "wmv", "flv", "mp4"];
//事件示例
export const onPlay = (ev) => {
  console.log("播放");
};
//播放器
export const options = reactive({
  width: "100%", //播放器高度
  height: "100%", //播放器高度
  color: "#409eff", //主题色
  title: "", //视频名称
  webFullScreen: false, //网页全屏
  speed: true, //是否支持快进快退
  currentTime: 0, //跳转到固定播放时间(s)
  muted: false, //静音
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  control: true, //是否显示控制器
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量0-1

  poster: "", //封面
  speedRate: [1.0, 1.25, 1.5, 2.0], // 可选的播放速度
  controlBtns: [
    "audioTrack", //音轨切换按钮
    "quality", //视频质量切换按钮
    "speedRate", //速率切换按钮
    "volume", //音量
    "setting", //设置
    "pip", //画中画按钮
    "pageFullScreen", //网页全屏按钮
    "fullScreen", //全屏按钮
  ], //显示所有按钮,
});