Vue3 实现播放m3u8视频的两种方式

第一种：vue3-video-play

1、安装方式

（1）npm安装方式

 npm install vue3-video-play --save

（2）yarn安装方式

 yarn add vue3-video-play --save

2、页面引入

import 'vue3-video-play/dist/style.css';import VideoPlay from 'vue3-video-play';

3、示例代码

<template><VideoPlay v-bind="options" width="100%" height="650px"/></template><script setup lang="ts">import { reactive } from 'vue';import 'vue3-video-play/dist/style.css';import VideoPlay from 'vue3-video-play';// 视频配置项const options = reactive({   src: '', //视频源   muted: false, //静音 自动播放会自己静音   webFullScreen: false,   speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速   autoPlay: true, //自动播放   loop: false, //循环播放   mirror: false, //镜像画面   ligthOff: false, //关灯模式   volume: 0.3, //默认音量大小   control: true, //是否显示控制器   poster: '',   type: 'm3u8',});// 调用接口getVideo()// 模拟接口获取视频源async function getVideo() {   const res = await getVideoInfo();   options.src = res.data;}</script><style scoped></style>

​vue3-video-play 支持video原生所有Attributes video原生属性 使用方式和props属性使用一致

4、效果图

第二种：chimee-player 官方文档

1、引入依赖

npm install chimee-player --save

2、示例代码

<template><div id="wrapper"></div></template><script setup lang="ts">import { reactive } from 'vue';import ChimeePlayer from 'chimee-player';// 调用接口getVideo()// 模拟接口获取视频源async function getVideo() {   const res = await getVideoInfo();   new ChimeePlayer ({      wrapper: '#wrapper', // video dom容器      src: res.data,      box: 'hls', // 视频编码flv、native和hls      isLive: false, // 类型      autoplay: true, // 自动播放      controls: false, // 控制器      muted: true // 静音  });}</script><style scoped></style>