vue3中播放视频和m3u8后缀的视频解决办法

****必须使用 vue@3.2.2及以上版本

使用 这个插件 vue3-video-play

官方地址 地址链接跳转
官方文档 文档地址

npm 安装：

npm i vue3-video-play --save

yarn 安装：

yarn add vue3-video-play --save

我这里是局部组件引入

components一定要注册

剩下的基本使用

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

最后如果在安装过程中报错 关于 _createElementBlock的问题 请升级vue版本即可
执行以下命令

npm install vue@3.2.4 --force

我发文章目前版本

"vue3-video-play": “^1.3.1-beta.6”;
“vue”: “^3.2.4”,

在我使用过程中我发现本地可以播放而线上会出现这样的报错

我查阅近半天时间发现作者应该还没解决此问题 如果项目着急使用
请使用使用 MuiPlayer

MuiPlayer官方文档地址

用法和vue3-video-play类似
但是在播放直播或者监控/m3u8后缀这些视频时 请多下载 文档中 Hls 这个插件

希望此文章能帮助到你