亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue3播放m3u8視頻的兩種實(shí)現(xiàn)方式示例

 更新時(shí)間：2025年01月13日 10:06:14   作者：Favourite23  
這篇文章主要介紹了Vue3播放m3u8視頻的兩種實(shí)現(xiàn)方式,兩種視頻播放器組件分別是vue3-video-play和chimee-player,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

第一種：vue3-video-play

1、安裝方式

（1）npm安裝方式

 npm install vue3-video-play --save

（2）yarn安裝方式

 yarn add vue3-video-play --save

2、頁(yè)面引入

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';

// 視頻配置項(xiàng)
const options = reactive({
   src: '', //視頻源
   muted: false, //靜音 自動(dòng)播放會(huì)自己靜音
   webFullScreen: false,
   speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
   autoPlay: true, //自動(dòng)播放
   loop: false, //循環(huán)播放
   mirror: false, //鏡像畫面
   ligthOff: false, //關(guān)燈模式
   volume: 0.3, //默認(rèn)音量大小
   control: true, //是否顯示控制器
   poster: '',
   type: 'm3u8',
});

// 調(diào)用接口
getVideo()

// 模擬接口獲取視頻源
async function getVideo() {
   const res = await getVideoInfo();
   options.src = res.data;
}

</script>

<style scoped>
</style>

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

名稱說明類型可選值默認(rèn)值
width播放器寬度string-800px
height播放器高度string-450px
color播放器主色調(diào)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';

// 調(diào)用接口
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, // 自動(dòng)播放
      controls: false, // 控制器
      muted: true // 靜音
  });
}

</script>

<style scoped>
</style>

總結(jié) 

到此這篇關(guān)于Vue3播放m3u8視頻的兩種實(shí)現(xiàn)方式的文章就介紹到這了,更多相關(guān)Vue3播放m3u8視頻內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論