簡(jiǎn)介
easyPlayer 播放庫(kù)是一款兼容性比較強(qiáng)的播放庫(kù)，根據(jù)網(wǎng)上的資料琢锋，測(cè)試了兩次出現(xiàn)了多種問(wèn)題次和，又從新下載了一個(gè)js庫(kù)能正常播放
功能實(shí)現(xiàn)
安裝
1包各、下載EasyWasmPlayer.js 七咧、 libDecoder.wasm 到本地， 然后放在public 根目錄下面：
image.png
2叮叹、在index.html文件中引用EasyWasmPlayer.js
image.png
3艾栋、編寫(xiě)播放頁(yè)面
<template>
<div id="app">
<el-row>
<el-col :span="24">
<h4>H265播放器</h4>
<div class="player-box">
<div id="wasmPlayer"></div>
</div>
<div style="width:100%;margin: auto;">
<div id="newplay" onClick="onplay"></div>
<el-input v-model="input" placeholder="請(qǐng)輸入播放地址接口" size="mini"></el-input>
<el-button class="player-button" size="mini" type="success" @click="play">播放</el-button>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
input: 'http://124.160.101.172:7036/xx/1000104%240/substream/1.m3u8', //視頻播放地址(本地址已處理過(guò))
player: '' //播放器對(duì)象
}
},
mounted() {
//實(shí)例化播放器
this.player = new WasmPlayer(null, 'wasmPlayer', this.callbackfun, {
Height: true, //Height:播放器尺寸是否繼承父盒子的
openAudio: true, //openAudio:是否打開(kāi)音頻
BigPlay: false,
HideKbs: true //HideKbs:是否隱藏實(shí)時(shí)碼率
})
this.play()
},
methods: {
// 播放事件
play() {
if (!this.input) {
this.$message.error('請(qǐng)輸入接口地址！')
} else {
this.player.play(this.input, 1)
}
},
//回調(diào)函數(shù)
callbackfun(e) {
console.log(e)
if (e == 'pause') {//暫停事件
this.player.setSnap('images/logo_1.png')//顯示封面圖片
} else if (e == 'play') {
this.player.endSnap()//清除封面圖片
this.player.endLoading()//取消Loading顯示
}
}
}
}
</script>
# 樣式就不粘貼了蛉顽， 官網(wǎng)都有
這樣就可以正常播放了
參考資料:
http://33h.co/km9jh
https://www.mdaima.com/news/157.html
https://github.com/tsingsee/EasyPlayer.js (demo蝗砾，可以運(yùn)行，但是我完全復(fù)制到我的項(xiàng)目中携冤， js 報(bào)錯(cuò)悼粮，_typeof is not defined, 替換下我的播放庫(kù)就好了 )
ef3f772690a2da7f763e82ae2f8522a.png
需要的資料：
鏈接：https://pan.baidu.com/s/1brWeYp3u3VSnNud_xLXnTA
提取碼：s2xl
