vue+螢石云ezuikit.js播放直播流視頻（聲音自動(dòng)關(guān)閉，添加控件，多個(gè)視頻播放）
實(shí)例使用
引入最新的ezuikit.js
//npm
npm install ezuikit-js
//index.html
<script src="./ezuikit.js"></script>
獲取地址js和demo地址：https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm
看過官網(wǎng)的文檔都知道螢石云的文檔是多么的‘善解人意’哈，懂得都懂，很多東西沒有說清楚的，只能靠自己去摸索或者看他們的demo來一點(diǎn)點(diǎn)測(cè)試實(shí)現(xiàn)
官網(wǎng)地址：https://open.ys7.com/help/31
坑
（1）無法關(guān)閉聲音
看官網(wǎng)文檔的屬性是添加audio:0即可，但是發(fā)現(xiàn)根本沒有反應(yīng)。然后還有就是說把autoplay: false,，但是最后發(fā)現(xiàn)，都沒有反應(yīng)。但是使用了自定義的控件之后，就可以實(shí)現(xiàn)了，就很尷尬
（2）播放器模板
文檔上面顯示只有使用內(nèi)置的播放器樣式，組件 simple：極簡(jiǎn)版;standard：標(biāo)準(zhǔn)版;security：安防版;vioce：語(yǔ)音版，這幾種類型，但是我們看demo上面就發(fā)現(xiàn)還有pcLive,pcRec。（具體demo文件下載地址在上面）。而且這兩個(gè)屬性還是很好用的那種，樣式也是好看的
pcLive模式控件是這樣的。
（3）pcLive模式去除多余控件
在上面我們看到，這個(gè)模式下的控件有個(gè)頭部設(shè)備名稱的展示，如果我們想去除或者修改，就發(fā)現(xiàn)文檔里面好像沒有說明
然后我們看demo文件里面有個(gè)方法就是自定義的屬性，添加控件themeData: themeData,,themeData的內(nèi)容如下，引入這個(gè)我們可以添加或者刪除不想要的控件了。功能有播放暫停、截圖、錄制、云臺(tái)控制、語(yǔ)音對(duì)講、放大、全屏等等
var themeData = {
"header": {
"color": "#1890ff",
"activeColor": "#FFFFFF",
"backgroundColor": "#000000",
"btnList": [
{
"iconId": "deviceID",
"part": "left",
"defaultActive": 0,
"memo": "頂部設(shè)備序列號(hào)",
"isrender": 1
},
{
"iconId": "deviceName",
"part": "left",
"defaultActive": 0,
"memo": "頂部設(shè)備名稱",
"isrender": 1
},
{
"iconId": "cloudRec",
"part": "right",
"defaultActive": 0,
"memo": "云存儲(chǔ)",
"isrender": 0
},
{
"iconId": "rec",
"part": "right",
"defaultActive": 0,
"memo": "SD卡回放",
"isrender": 0
}
]
},
"footer": {
"color": "#FFFFFF",
"activeColor": "#1890FF",
"backgroundColor": "#00000021",
"btnList": [
{
"iconId": "play",
"part": "left",
"defaultActive": 1,
"memo": "播放",
"isrender": 1
},
{
"iconId": "capturePicture",
"part": "left",
"defaultActive": 0,
"memo": "截屏按鈕",
"isrender": 1
},
{
"iconId": "sound",
"part": "left",
"defaultActive": 0,
"memo": "聲音按鈕",
"isrender": 1
},
{
"iconId": "pantile",
"part": "left",
"defaultActive": 0,
"memo": "云臺(tái)控制按鈕",
"isrender": 1
},
{
"iconId": "recordvideo",
"part": "left",
"defaultActive": 0,
"memo": "錄制按鈕",
"isrender": 1
},
{
"iconId": "talk",
"part": "left",
"defaultActive": 0,
"memo": "對(duì)講按鈕",
"isrender": 1
},
{
"iconId": "zoom",
"part": "left",
"defaultActive": 0,
"memo": "電子放大",
"isrender": 1
},
{
"iconId": "hd",
"part": "right",
"defaultActive": 0,
"memo": "清晰度切換按鈕",
"isrender": 1
},
{
"iconId": "webExpend",
"part": "right",
"defaultActive": 0,
"memo": "網(wǎng)頁(yè)全屏按鈕",
"isrender": 1
},
{
"iconId": "expend",
"part": "right",
"defaultActive": 0,
"memo": "全局全屏按鈕",
"isrender": 1
}
]
}
};
具體實(shí)例代碼
//首先創(chuàng)建一個(gè)容器DOM
<div id="video-container"></div>
//然后初始化,在合適的地方調(diào)用函數(shù)即可
init(){
player = new EZUIKit.EZUIKitPlayer({
id：'video-container',
autoplay: true,
url:playUrl, //播放地址
accessToken:accessToken, //token
width: 780,
height: 360,
handleError: that.handleError(),
handleSuccess: that.handleSuccess(),
//splitBasis:1, //舊版本3.5有個(gè)自帶的分屏功能，現(xiàn)在沒有了
audio:0,
themeData: themeData, //上面的對(duì)象內(nèi)容
});
that.playerVideo = player;
}
多個(gè)視頻播放的話，demo里面也有說明的，就是new多個(gè)實(shí)例，但是按照demo里面的用法，其實(shí)我們實(shí)際使用是感覺不行的，所以只能說按照demo的思路走
demo的用法
var playr;
var playr2;
fetch('https://open.ys7.com/jssdk/ezopen/demo/token')
.then(response => response.json())
.then(res => {
var accessToken = res.data.accessToken;
playr = new EZUIKit.EZUIKitPlayer({
id: 'video-container', // 視頻容器ID
accessToken: accessToken,
url: 'ezopen://open.ys7.com/G39444019/1.live',
template: 'pcLive', // simple - 極簡(jiǎn)版;standard-標(biāo)準(zhǔn)版;security - 安防版(預(yù)覽回放);voice-語(yǔ)音版; theme-可配置主題；
plugin: ['talk'], // 加載插件，talk-對(duì)講
width: 600,
height: 400,
});
playr2 = new EZUIKit.EZUIKitPlayer({
id: 'video-container2', // 視頻容器ID
accessToken: "at.e0mnhu50d7bwohb40358mchq13aobjm2-6m2v78jd7m-1g22scv-lcn0rdqm1",
url: 'ezopen://open.ys7.com/G39444019/1.live',
template: 'pcLive', // simple - 極簡(jiǎn)版;standard-標(biāo)準(zhǔn)版;security - 安防版(預(yù)覽回放);voice-語(yǔ)音版; theme-可配置主題；
plugin: ['talk'], // 加載插件，talk-對(duì)講
width: 600,
height: 400,
});
});
通過demo發(fā)現(xiàn)，主要是區(qū)別就是容器盒子的ID不一樣，至于聲明多個(gè)變量只是為了在其他方法里面進(jìn)行一些操作，我這里是暫時(shí)用不到，因?yàn)槌Ｓ玫目丶甲詭Я?，就不需要額外的方法去進(jìn)行操作了文章來源：http://www.zghlxwxcb.cn/news/detail-442209.html
實(shí)際使用代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-442209.html
//html
<div id="liveVideoDivHKMode" :class="[(this.current + 1)==1 ? '':'grid__' + (this.current + 1) + 'k']">
</div>
//js
//后端視頻列表
list
let html = '';
for (let i = 0; i < list.length; i++) {
html += `<div id="${list[i].pk}"></div>` //id唯一值，看個(gè)人想用什么來做
// let element = list[i];
setTimeout(function () {
let player1 = new EZUIKit.EZUIKitPlayer({
id:list[i].pk,
// autoplay: false,
url:list[i].playUrl,
accessToken:list[i].accessToken,
// decoderPath: '../../static/js/mode',
width: width,
height: height,
handleError: that.handleError(),
handleSuccess: that.handleSuccess(),
themeData: themeData,
audio:0,
});
that.ezvizHkVideoListPlay.push(player1) //添加到一個(gè)數(shù)組里面方便后面關(guān)閉頁(yè)面的時(shí)候關(guān)閉視頻銷毀
}, 10)
setTimeout(function () {
document.getElementById("liveVideoDivHKMode").innerHTML = html;
},50)
}
到了這里，關(guān)于vue+螢石云ezuikit.js播放直播流視頻（聲音自動(dòng)關(guān)閉，添加控件，多個(gè)視頻播放）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
