vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3播放m3u8视频

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视频内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文