uniapp使用mui-player插件播放m3u8/flv視頻流示例代碼
更新時間：2023年06月15日 14:18:35 作者：翹翹紅
在小程序里播放視頻是很常見的功能,下面這篇文章主要給大家介紹了關于uniapp使用mui-player插件播放m3u8/flv視頻流的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
背景
uniapp 開發(fā)的h5項目，需要播放m3u8/flv后綴的視頻，網上有很多視頻插件，但是樣式和效果不盡如人意，博主最后選擇mui-player插件，定制化稍微強一點以及有官方文檔可以閱讀，官網文檔https://muiplayer.js.org/zh/guide/
tips：建議先閱讀官方文檔，再在頁面進行引入
博主最后實現的效果如下，pc端和移動端為兩種展示樣式，pc可以設置聲音、播放速度、分辨率、全屏、畫中畫等功能，具體還有其他的功能自定義可以參照官網，官網的說明很詳細以及有示例進行參考；移動端和pc端的功能大差不差，只是展現形式略有差別。
1、安裝mui-player插件
npm i mui-player --save
2、頁面引入，可選擇在需要展示視頻的頁面直接引入
也可以放入一個公共組件，這樣方便多個頁面都會使用播放器的情況，博主這里將播放器作為一個公共組件，在組件里面引入
// 播放器樣式文件 import 'mui-player/dist/mui-player.min.css' // npm安裝方式引入mui-player import MuiPlayer from 'mui-player' // 要播放m3u8的視頻就必須要引入hls.js import Hls from 'hls.js' // 要播放flv的視頻就必須要引入flv.js import Flv from 'flv.js' // 要設置pc端視頻的清晰度需要引入pc端擴展 import MuiPlayerDesktopPlugin from 'mui-player-desktop-plugin'
3、template模板
<template> <view id="mui-player"> <!-- 可在這里添加你想要覆蓋在視頻上面的內容，這里我加了一個關閉按鈕，層級最高，不會影響視頻的播放 --> <image v-if="showCloseIcon" src="@/sub-live/static/close.png" class="pos-a full-close" @click.stop="videoClose"> </view> </template>
4、data定一個空的mp對象
data() {
return {
mp: {}
}
},5、需要向使用的頁面?zhèn)鬟f的參數
props: {
// 視頻流地址，必傳
src: {
type: String,
default: ''
},
// 視頻封面圖，可選
poster: {
type: String,
default: ''
},
// 是否要展示關閉視頻圖標
showCloseIcon: {
type: Boolean,
default: false
},
// 當前視頻是否是直播模式
live: {
type: Boolean,
default: false
},
// 兼容音頻m3u8（有些音頻地址也是m3u8，但是音頻不需要播放樣式，所以需要兼容）
isZero: {
type: Boolean,
default: false
},
// 設置pc/移動端清晰度選擇
childConfig: {
type: Array,
default: () => [{
functions: '高清',
selected: true
},
{
functions: '標清'
},
{
functions: '流暢'
},
]
}
}6、mounted生命周期初始化
mounted() {
// 防止this的改變
const _this = this;
// 根據視頻路徑后綴判斷當前為m3u8還是flv的視頻流
var flieArr = _this.src.split('.');
var suffix = flieArr[flieArr.length - 1];
// m3u8格式
var a = suffix.indexOf('m3u8') !== -1
// flv格式
var b = suffix.indexOf('flv') !== -1
var c = {}
// m3u8格式的視頻配置
if (a) {
c = {
type: 'hls',
loader: Hls,
config: {
debug: false,
}
}
}
// flv格式的視頻配置
if (b) {
c = {
type: 'flv',
loader: Flv,
config: {
cors: true
},
}
}
// 設置寬高，兼容音頻，音頻時高度為1，必須設置高度，不然音頻沒發(fā)播放，初始化會失敗
var sWidth = uni.getSystemInfoSync().screenWidth; // 獲取屏幕寬度
var width = 1;
if (!_this.isZero) { // 不為音頻
if (_this.$util.isMobile()) { // 移動端動態(tài)獲取
width = sWidth;
} else {
width = 640; // pc端固定寬度為640
}
}
var height = 1;
if (!_this.isZero) {
height = parseInt(width * 9 / 16) // 可改成你想設置的視頻的高度，博主這里設置為寬高比為16:9的視頻
}
_this.mp = new MuiPlayer({
// 指定播放器容器
container: '#mui-player',
// 視頻播放的資源地址
src: _this.src,
// 是否自動播放，親測在ios某些機型上自動播放失效
autoplay: false,
// 是否靜音播放
muted: false,
// 初始化播放器寬度
width: width,
// 初始化播放器高度
height: height,
// 播放器容器是否自適應視頻高度
autoFit: false,
// 是否循環(huán)播放
loop: false,
// 視頻封面的資源地址
poster: _this.poster,
// 是否開啟直播模式，直播模式默認菜單配置不允許控制播放速度以及循環(huán)播放
live: _this.live,
// 配置聲明啟用同層播放
videoAttribute: [{
attrKey: 'webkit-playsinline',
attrValue: 'webkit-playsinline'
},
{
attrKey: 'playsinline',
attrValue: 'playsinline'
},
{
attrKey: 'x5-video-player-type',
attrValue: 'h5-page'
},
],
// flv以及m3u8視頻資源的配置
parse: c,
// 自定義主題顏色
themeColor: _this.$config.INFO.THEME_COLOR,
// 非全屏模式下，是否顯示播放器頭部操作控件，具體可參考官方文檔
pageHead: false,
plugins: [
// pc端清晰度設置
new MuiPlayerDesktopPlugin({
customSetting: _this.childConfig.length > 0 ? [{
functions: '清晰度',
model: 'select',
show: true,
zIndex: 0,
childConfig: _this.childConfig,
onToggle: function(data, selected) {
let onToggleLoad = function(state) {
_this.mp.once('ready', function() {
let _video = _this.mp.video();
let _execute = function() {
_video.currentTime = state
.currentTime;
state.paused ? _video.pause() :
_video.play();
}
if (_video.readyState == 0) {
_video.addEventListener(
'durationchange',
function(e) {
_execute();
}, {
once: true
})
} else {
_execute();
}
})
}
// 選擇清晰度后重載視頻
selected(function() {
let _video = _this.mp.video();
onToggleLoad({
currentTime: _video.currentTime,
paused: _video.paused
});
// 將當前選擇的清晰度傳遞給父組件
_this.$emit('onToggleFn', data.functions)
});
}
}] : []
})
]
});
// 必須放在nextTick里面，等待dom渲染完成再監(jiān)聽視頻的播放事件等，視頻的其他事件也可在此處進行監(jiān)聽
_this.$nextTick(() => {
// 監(jiān)聽播放器已創(chuàng)建完成
_this.mp.on('ready', function(event) {
let _video = _this.mp.video();
_video.addEventListener("play",function(e){
//播放事件
_this.$emit('onPlayFn')
});
_video.addEventListener("ended",function(e){
//播放完成事件
_this.$emit('onEndedFn')
});
});
// 播放發(fā)生錯誤
_this.mp.on('error', function(event) {
console.log('error', event);
});
})
}7、組件銷毀，視頻播放器也要銷毀
destroyed() {
this.mp.destroy();
},8、可在組件內定義一些播放/暫停的事件供父組件調用（按需寫入）
// 關閉視頻，返回上一頁
videoClose() {
uni.navigateBack();
},
// 播放視頻
playVideo() {
let _video = this.mp.video(); // 獲取視頻示例
_video.paused ?_video.play(): _video.pause(); // 和原生video事件一致
},
// 暫停視頻
pauseVideo(){
let _video = this.mp.video();
_video.pause();
}9、播放視頻組件完整代碼，可按需進行增刪改
<template>
<view id="mui-player">
<image v-if="showCloseIcon" src="@/sub-live/static/close.png" class="pos-a full-close" @click.stop="videoClose">
</view>
</template>
<script>
import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'
import Hls from 'hls.js'
import Flv from 'flv.js'
import MuiPlayerDesktopPlugin from 'mui-player-desktop-plugin'
export default {
props: {
src: {
type: String,
default: ''
},
poster: {
type: String,
default: ''
},
showCloseIcon: {
type: Boolean,
default: false
},
live: {
type: Boolean,
default: false
},
// 兼容音頻m3u8
isZero: {
type: Boolean,
default: false
},
childConfig: {
type: Array,
default: () => [{
functions: '高清',
selected: true
},
{
functions: '標清'
},
{
functions: '流暢'
},
]
}
},
data() {
return {
mp: {}
}
},
watch: {
src(newVal, oldVal) {
this.mp.reloadUrl(newVal);
}
},
mounted() {
const _this = this;
var flieArr = _this.src.split('.');
var suffix = flieArr[flieArr.length - 1];
// m3u8格式
var a = suffix.indexOf('m3u8') !== -1
// flv格式
var b = suffix.indexOf('flv') !== -1
var c = {}
if (a) {
c = {
type: 'hls',
loader: Hls,
config: {
debug: false,
}
}
}
if (b) {
c = {
type: 'flv',
loader: Flv,
config: {
cors: true
},
}
}
var sWidth = uni.getSystemInfoSync().screenWidth;
var width = 1;
if (!_this.isZero) {
if (_this.$util.isMobile()) {
width = sWidth;
} else {
width = 640;
}
}
var height = 1;
if (!_this.isZero) {
height = parseInt(width * 9 / 16)
}
_this.mp = new MuiPlayer({
// 指定播放器容器
container: '#mui-player',
// 視頻播放的資源地址
src: _this.src,
autoplay: false,
muted: false,
width: width,
// 初始化播放器高度
height: height,
// 播放器容器是否自適應視頻高度
autoFit: false,
// loop
loop: false,
// 視頻封面的資源地址
poster: _this.poster,
// 是否開啟直播模式，直播模式默認菜單配置不允許控制播放速度以及循環(huán)播放
live: _this.live,
// 配置聲明啟用同層播放
videoAttribute: [{
attrKey: 'webkit-playsinline',
attrValue: 'webkit-playsinline'
},
{
attrKey: 'playsinline',
attrValue: 'playsinline'
},
{
attrKey: 'x5-video-player-type',
attrValue: 'h5-page'
},
],
parse: c,
// 自定義主題顏色
themeColor: _this.$config.INFO.THEME_COLOR,
// 非全屏模式下，是否顯示播放器頭部操作控件
pageHead: false,
plugins: [
new MuiPlayerDesktopPlugin({
customSetting: _this.childConfig.length > 0 ? [{
functions: '清晰度',
model: 'select',
show: true,
zIndex: 0,
childConfig: _this.childConfig,
onToggle: function(data, selected) {
let onToggleLoad = function(state) {
_this.mp.once('ready', function() {
let _video = _this.mp.video();
let _execute = function() {
_video.currentTime = state
.currentTime;
state.paused ? _video.pause() :
_video.play();
}
if (_video.readyState == 0) {
_video.addEventListener(
'durationchange',
function(e) {
_execute();
}, {
once: true
})
} else {
_execute();
}
})
}
selected(function() {
let _video = _this.mp.video();
onToggleLoad({
currentTime: _video.currentTime,
paused: _video.paused
});
_this.$emit('onToggleFn', data.functions)
});
}
}] : []
})
]
});
_this.$nextTick(() => {
// 監(jiān)聽播放器已創(chuàng)建完成
_this.mp.on('ready', function(event) {
let _video = _this.mp.video();
_video.addEventListener("play",function(e){
//播放事件
_this.$emit('onPlayFn')
});
_video.addEventListener("ended",function(e){
//播放完成事件
_this.$emit('onEndedFn')
});
});
// 播放發(fā)生錯誤
_this.mp.on('error', function(event) {
console.log('error', event);
});
})
},
destroyed() {
console.log('destroyed');
this.mp.destroy();
},
methods: {
videoClose() {
uni.navigateBack();
},
playVideo() {
let _video = this.mp.video();
_video.paused ?_video.play(): _video.pause();
},
pauseVideo(){
let _video = this.mp.video();
_video.pause();
}
},
}
</script>
<style lang="scss" scoped>
#mui-player{
z-index: 2;
}
.full-close {
top: 22rpx;
right: 22rpx;
width: 44rpx;
height: 44rpx;
cursor: pointer;
z-index: 8;
}
</style>10、父組件調用播放器，按需進行修改
<!-- #ifdef H5 --> <common-player ref="muiplayer" :showCloseIcon="true" :poster="liveDetailInfo.thumb" :live="liveDetailInfo.start_time <= nowTime && nowTime <= liveDetailInfo.end_time ? true : false" :src="liveDetailInfo.rewriteVideoUrl" :childConfig="liveDetailInfo.qxdConfig" @onToggleFn="qxdToggle" @onEndedFn="ended" @onPlayFn="playFn"> </common-player> <!-- #endif -->
總結：
此播放器還是使用了開源的mui-player，所以盡量先去看文檔，文檔寫的很詳細，只是需要大面積的增刪改操作，最后定制為自已想要的樣子。
到此這篇關于uniapp使用mui-player插件播放m3u8/flv視頻流的文章就介紹到這了,更多相關uniapp播放m3u8/flv視頻流內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
除了正常運行模式，ECMAscript 5添加了第二種運行模式："嚴格模式"（strict mode）。顧名思義，這種模式使得Javascript在更嚴格的條件下運行。這篇文章給大家詳細介紹了js判斷瀏覽器是否支持嚴格模式的方法，有需要的朋友們可以參考借鑒。2016-10-10
避免 showModalDialog 彈出新窗體的原因分析,一般情況下需要返回值用window.open.2010-05-05
循環(huán)調用,如果已經獲取到了結果,則退出循環(huán)，下面有個不錯的示例，感興趣的朋友可以嘗試操作下2013-11-11
對于經常用js的朋友，有時候一段腳本并不是兩個瀏覽器都兼容的，下面一些對ie和firefox都兼容的一些代碼，大家可以學習下。2008-10-10
這篇文章主要為大家詳細介紹了微信小程序用canvas畫圖，并實現分享功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
TypeScript 類型兼容(逆變、協(xié)變、雙向協(xié)變和不變)的實現
在TypeScript中,類型系統(tǒng)支持逆變、協(xié)變、雙向協(xié)變和不變四種型變概念,用于處理類型兼容性,具有一定的參考價值,感興趣的可以了解一下2025-08-08
這篇文章主要教大家如何使用Bootstrap自定義文件上傳下載樣式，感興趣的小伙伴們可以參考一下2016-05-05
下面小編就為大家?guī)硪黄猨s生成隨機數(指定范圍)的實例代碼。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了JS獲取地址欄參數的兩種方法(原生、vue),文中通過代碼示例講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-07-07
下面小編就為大家?guī)硪黄斦刯s原型繼承的一些問題。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09