创建一个简单的萤石播放器-CFANZ编程社区

ezuikit-js视频功能

获取ezuikit-js

使用npm下载

$ npm install ezuikit-js

引入ezuikit-js

import  EZUIKit from 'ezuikit-js';

创建dom元素

<div id="video-container"></div>

注意：如果div上面写的有v-if逻辑条件，<div id="video-container" v-if="show"></div>请务必条件为true页面dom元素渲染成功后再进行new EZUIKit.EZUIKitPlayer实例初始化，最好v-if的变量值初始默认为true show: true,后续调用接口后再赋新值.

播放器初始化

this.player = new EZUIKit.EZUIKitPlayer({
      id: 'video-container', // 视频容器ID
      accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
      url: 'ezopen://open.ys7.com/203751922/1.live',
    })

方法调用

//停止播放 (关闭页面时一定要停止播放否则软件内存会满，直接卡死)

this.player.stop();

this.player.stop().then(() => {
	console.log("执行播放成功后其他动作")
})

//执行播放

this.player.play();

//切换地址播放（注意需要先执行stop方法停止上次取流）
this.player.stop().then(() => {
	this.player.play({url: 'ezopen://open.ys7.com/203751922/1.rec?begin=202001000000&end=202001235959'})
})

//关闭声音

this.player.openSound()

初始化参数

参数名	类型	描述	是否必选
id	String	播放器容器DOM的id	Y
accessToken	String	授权过程获取的access_token	Y
url	String	视频ezopen协议播放地址	Y
audio	int	是否默认开启声音 1：打开（默认） 0：关闭	N
width	int	视频宽度，默认值为容器容器DOM宽度	N
height	int	视频高度，默认值为容器容器DOM高度	N
template	string	播放器模板，可以通过选定模板，使用内置的播放器样式，组件 simple：极简版;standard：标准版;security：安防版;vioce：语音版	N
header	Array	视频头部可选UI组件，可选值：capturePicture：截图,save：录像保存,zoom：电子放大	N
footer	Array	视频底部部可选UI组件，可选值：talk：对讲,broadcast：语音播报,hd：高清标清切换,fullScreen：全屏	N
plugin	Array	按需加载插件，可选值： talk：对讲	N
handleSuccess	function	播放成功回调	N
handleError	function	播放错误回调	N

方法集合

方法名	类型	描述	使用示例
stop	function	结束播放	`player.stop()`
openSound	String	开启声音	`player.openSound()`
closeSound	String	关闭声音	`player.closeSound()`
startSave	int	开始录像	`player.startSave()`
stopSave	int	结束录像	`player.stopSave()`
capturePicture	function	视频截图	`player.capturePicture()`
fullScreen	function	全屏（自动适配移动端pc端全屏）	`player.fullScreen()`
cancelFullScreen	function	取消全屏	`player.cancelFullScreen()`
getOSDTime	function	获取播放时间回调	`player.getOSDTime()`
startTalk	function	开始对讲	`player.startTalk()`
stopTalk	function	结束对讲	`player.stopTalk()`