vue3中使用播放器播放视频/直播

1.首先安装vue-video-player和 video.js

npm install vue-video-player video.js
# 或者
yarn add vue-video-player video.js

2.在main.js中全局配置

import { createApp } from 'vue';

import VueVideoPlayer from 'vue-video-player';
import 'video.js/dist/video-js.css';

const app = createApp(App);

app.use(VueVideoPlayer);

3.代码如下
 

<template>
  <div style="width: 51%; height: 51%">
    <video-player
      class="video-player vjs-custom-skin"
      ref="videoPlayer"
      :playsinline="true"
      :options="playerOptions"
    ></video-player>
  </div>
</template>

<script setup>
import "video.js/dist/video-js.css";
// eslint-disable-next-line no-unused-vars
import VueVideoPlayer from "vue-video-player";
const playUrl =
  "";//替换你的视频地址
const playerOptions = {
  autoplay: true,//自动播放
  muted: false, //静音播放
  loop: false, //循环播放
  preload: "auto", //预加载
  language: "zh-CN", //语言
  aspectRatio: "16:9", //宽高比
  fluid: true, //父容器的大小而自适应
  sources: [
    {
      type: "",
      src: playUrl,
    },
  ],
  notSupportedMessage: "此视频暂无法播放，请稍后再试",
  controls: true, // 视频播放器的控制条
  controlBar: {
    timeDivider: true,
    durationDisplay: true,
    remainingTimeDisplay: false,
    fullscreenToggle: true, // 全屏播放
    playToggle: true, // 播放/暂停
    volumePanel: true, // 音量控制
    qualitySelector: true, // 清晰度选择
  },
  qualitySelector: {
    default: "high", // 默认的清晰度
    options: [
      { value: "high", label: "高清" },
      { value: "ultra", label: "超清" },
    ],
  },
};
</script>

<style></style>