Vue+EZZUIKIT.js はライブ ストリーミング ビデオを再生します (サウンドは自動的にオフになり、コントロールが追加され、複数のビデオが再生されます)
使用例
最新のezuikit.jsの紹介
//npm
npm install ezuikit-js
//index.html
<script src="./ezuikit.js"></script>
获取地址js和demo地址：https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm
私は公式 Web サイトのドキュメントを読んで、EZVIZ Cloud のドキュメントがどの程度「理解」されているかを知っています。すべてを理解していますが、明確に説明されていないこともたくさんあります。自分自身に頼って、少しテストするために調査したり、デモを見たりすることしかできません。少し。
公式サイトアドレス：https://open.ys7.com/help/31
ピット
(1) 音を消すことができない
公式サイトのドキュメントの属性はaudio:0追加できるのですが、全く反応がないことが分かります。と、いうこともありますautoplay: false,が、結局反応がないことが分かりました。しかし、カスタム コントロールを使用すると、それが実現できるようになり、非常に恥ずかしいことになります。
(2) プレーヤーテンプレート
ドキュメントには使用内置的播放器样式，组件 simple：极简版;standard：标准版;security：安防版;vioce：语音版これらのタイプのみが示されていますが、デモではさらに多くのタイプがあることがわかりましたpcLive,pcRec。(特定のデモ ファイルのダウンロード アドレスは上記にあります)。これら 2 つの属性は依然として非常に便利で、スタイルも見栄えがします。
pcLiveモーダル制御はこんな感じです。
(3)pcLive冗長な制御を削除するモード
上からわかるように、このモードのコントロールにはヘッドデバイスの名前が表示されていますが、これを削除または変更したい場合、ドキュメントには記載がないようです。
次に、デモ ファイルにコントロールを追加するカスタム属性であるメソッドがあることがわかります。themeData: themeData,内容themeDataは次のとおりです。これを導入すると、不要なコントロールを追加または削除できます。功能有播放暂停、截图、录制、云台控制、语音对讲、放大、全屏等等
var themeData = {
"header": {
"color": "#1890ff",
"activeColor": "#FFFFFF",
"backgroundColor": "#000000",
"btnList": [
{
"iconId": "deviceID",
"part": "left",
"defaultActive": 0,
"memo": "顶部设备序列号",
"isrender": 1
},
{
"iconId": "deviceName",
"part": "left",
"defaultActive": 0,
"memo": "顶部设备名称",
"isrender": 1
},
{
"iconId": "cloudRec",
"part": "right",
"defaultActive": 0,
"memo": "云存储",
"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": "云台控制按钮",
"isrender": 1
},
{
"iconId": "recordvideo",
"part": "left",
"defaultActive": 0,
"memo": "录制按钮",
"isrender": 1
},
{
"iconId": "talk",
"part": "left",
"defaultActive": 0,
"memo": "对讲按钮",
"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": "网页全屏按钮",
"isrender": 1
},
{
"iconId": "expend",
"part": "right",
"defaultActive": 0,
"memo": "全局全屏按钮",
"isrender": 1
}
]
}
};
具体的なコード例
//首先创建一个容器DOM
<div id="video-container"></div>
//然后初始化,在合适的地方调用函数即可
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有个自带的分屏功能，现在没有了
audio:0,
themeData: themeData, //上面的对象内容
});
that.playerVideo = player;
}
複数の動画を再生する場合、つまり新規インスタンスを複数個再生するという説明もデモにはありますが、デモでの使い方を見ると、実際には実際の使用ではうまく機能していないように感じられるため、それしかできません。デモのアイデアに従ってください
デモの使用法
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 - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
plugin: ['talk'], // 加载插件，talk-对讲
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 - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
plugin: ['talk'], // 加载插件，talk-对讲
width: 600,
height: 400,
});
});
デモを通じて、主な違いはコンテナ ボックスの ID が異なることであることがわかりました。他のメソッドで一部の操作を実行するためだけに複数の変数を宣言することについては、一般的に使用されるコントロールが次のとおりであるため、ここでは一時的に使用しません。すべて内蔵されているため、必要はありません。
実際にコードを使ってみる
//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唯一值，看个人想用什么来做
// 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) //添加到一个数组里面方便后面关闭页面的时候关闭视频销毁
}, 10)
setTimeout(function () {
document.getElementById("liveVideoDivHKMode").innerHTML = html;
},50)
}