Vue3播放m3u8視頻的兩種實(shí)現(xiàn)方式示例
更新時(shí)間：2025年01月13日 10:06:14 作者：Favourite23
這篇文章主要介紹了Vue3播放m3u8視頻的兩種實(shí)現(xiàn)方式,兩種視頻播放器組件分別是vue3-video-play和chimee-player,文中通過(guò)代碼介紹的非常詳細(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, //鏡像畫(huà)面
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屬性使用一致
| 名稱(chēng) | 說(shuō)明 | 類(lèi)型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| width | 播放器寬度 | string | - | 800px |
| height | 播放器高度 | string | - | 450px |
| color | 播放器主色調(diào) | string | - | #409eff |
4、效果圖
第二種：chimee-player
1、引入依賴(lài)
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, // 類(lèi)型
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)文章
這篇文章主要介紹了在vscode中使用腳手架搭建vue項(xiàng)目的相關(guān)資料,包括創(chuàng)建Vue2和Vue3項(xiàng)目,并展示了如何自定義項(xiàng)目配置,如選擇特性、路由模式、CSS預(yù)處理器和工具配置,通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-12-12
Vue3?KeepAlive實(shí)現(xiàn)原理解析
KeepAlive?是一個(gè)內(nèi)置組件，那封裝一個(gè)組件對(duì)于大家來(lái)說(shuō)應(yīng)該不會(huì)有太大的困難，它的核心邏輯在于它的?render?函數(shù)，它用?map?去記錄要緩存的組件，就是?[key，vnode]?的形式，這篇文章主要介紹了Vue3?KeepAlive實(shí)現(xiàn)原理,需要的朋友可以參考下2022-09-09
vue中使用vue-router切換頁(yè)面時(shí)滾動(dòng)條自動(dòng)滾動(dòng)到頂部的方法
這篇文章主要介紹了vue項(xiàng)目中在使用vue-router切換頁(yè)面的時(shí)候滾動(dòng)條自動(dòng)滾動(dòng)到頂部的實(shí)現(xiàn)方法，一般使用Window scrollTo() 方法實(shí)現(xiàn)，本文給大家簡(jiǎn)單介紹了crollTop的使用,需要的朋友可以參考下2017-11-11
Vue Router是Vue提供的路由管理器,將組件與路由一一對(duì)應(yīng)起來(lái),這種對(duì)應(yīng)關(guān)系就路由,這篇文章主要介紹了Vue中vue-router路由使用,需要的朋友可以參考下2024-06-06
element-ui中dialog彈窗關(guān)閉按鈕失效的解決
這篇文章主要介紹了element-ui中dialog彈窗關(guān)閉按鈕失效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
前端vue項(xiàng)目打包及部署過(guò)程的詳細(xì)說(shuō)明
Vue前端項(xiàng)目的打包和部署是一個(gè)常見(jiàn)的開(kāi)發(fā)流程,涉及多個(gè)步驟和配置,下面這篇文章主要介紹了前端vue項(xiàng)目打包及部署過(guò)程的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-09-09
VUE v-model表單數(shù)據(jù)雙向綁定完整示例
這篇文章主要介紹了VUE v-model表單數(shù)據(jù)雙向綁定,結(jié)合完整實(shí)例形式分析了vue.js實(shí)現(xiàn)表單數(shù)據(jù)雙向綁定相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
如何使用vue實(shí)現(xiàn)跨域訪(fǎng)問(wèn)第三方http請(qǐng)求
這篇文章主要介紹了如何使用vue實(shí)現(xiàn)跨域訪(fǎng)問(wèn)第三方http請(qǐng)求,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
關(guān)于在vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)的代碼示例
Vue是一款流行的前端框架，支持過(guò)渡動(dòng)畫(huà)的實(shí)現(xiàn)是其中的一項(xiàng)重要特性，在Vue中，使用過(guò)渡動(dòng)畫(huà)可以為用戶(hù)提供更加友好的用戶(hù)體驗(yàn)，下面我將為大家介紹一下子如何在Vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà),需要的朋友可以參考下2023-06-06
如何在 ant 的table中實(shí)現(xiàn)圖片的渲染操作
這篇文章主要介紹了如何在 ant 的table中實(shí)現(xiàn)圖片的渲染操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10