Vue3播放m3u8视频的两种实现方式示例
作者:Favourite23
这篇文章主要介绍了Vue3播放m3u8视频的两种实现方式,两种视频播放器组件分别是vue3-video-play和chimee-player,文中通过代码介绍的非常详细,需要的朋友可以参考下
第一种: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属性使用一致
名称 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
width | 播放器宽度 | string | - | 800px |
height | 播放器高度 | string | - | 450px |
color | 播放器主色调 | string | - | #409eff |
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>
总结
到此这篇关于Vue3播放m3u8视频的两种实现方式的文章就介绍到这了,更多相关Vue3播放m3u8视频内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!