快捷導(dǎo)航

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、頁面引入

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)文章

在vscode中使用腳手架搭建vue項(xiàng)目
這篇文章主要介紹了在vscode中使用腳手架搭建vue項(xiàng)目的相關(guān)資料,包括創(chuàng)建Vue2和Vue3項(xiàng)目,并展示了如何自定義項(xiàng)目配置,如選擇特性、路由模式、CSS預(yù)處理器和工具配置,通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-12-12
Vue3?KeepAlive實(shí)現(xiàn)原理解析
KeepAlive?是一個(gè)內(nèi)置組件，那封裝一個(gè)組件對(duì)于大家來說應(yīng)該不會(huì)有太大的困難，它的核心邏輯在于它的?render?函數(shù)，它用?map?去記錄要緩存的組件，就是?[key，vnode]?的形式，這篇文章主要介紹了Vue3?KeepAlive實(shí)現(xiàn)原理,需要的朋友可以參考下
2022-09-09
vue中使用vue-router切換頁面時(shí)滾動(dòng)條自動(dòng)滾動(dòng)到頂部的方法
這篇文章主要介紹了vue項(xiàng)目中在使用vue-router切換頁面的時(shí)候滾動(dòng)條自動(dòng)滾動(dòng)到頂部的實(shí)現(xiàn)方法，一般使用Window scrollTo() 方法實(shí)現(xiàn)，本文給大家簡(jiǎn)單介紹了crollTop的使用,需要的朋友可以參考下
2017-11-11
Vue中vue-router路由使用示例詳解
Vue Router是Vue提供的路由管理器,將組件與路由一一對(duì)應(yīng)起來,這種對(duì)應(yīng)關(guān)系就路由,這篇文章主要介紹了Vue中vue-router路由使用,需要的朋友可以參考下
2024-06-06
element-ui中dialog彈窗關(guān)閉按鈕失效的解決
這篇文章主要介紹了element-ui中dialog彈窗關(guān)閉按鈕失效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
前端vue項(xiàng)目打包及部署過程的詳細(xì)說明
Vue前端項(xiàng)目的打包和部署是一個(gè)常見的開發(fā)流程,涉及多個(gè)步驟和配置,下面這篇文章主要介紹了前端vue項(xiàng)目打包及部署過程的相關(guān)資料,文中通過代碼介紹的非常詳細(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)跨域訪問第三方http請(qǐng)求
這篇文章主要介紹了如何使用vue實(shí)現(xiàn)跨域訪問第三方http請(qǐng)求,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-03-03
關(guān)于在vue中實(shí)現(xiàn)過渡動(dòng)畫的代碼示例
Vue是一款流行的前端框架，支持過渡動(dòng)畫的實(shí)現(xiàn)是其中的一項(xiàng)重要特性，在Vue中，使用過渡動(dòng)畫可以為用戶提供更加友好的用戶體驗(yàn)，下面我將為大家介紹一下子如何在Vue中實(shí)現(xiàn)過渡動(dòng)畫,需要的朋友可以參考下
2023-06-06
如何在 ant 的table中實(shí)現(xiàn)圖片的渲染操作
這篇文章主要介紹了如何在 ant 的table中實(shí)現(xiàn)圖片的渲染操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-10-10