萤石私有协议视频播放器
萤石文档地址:https://open.ys7.com/help/529
需要下载ezuikit-js,
测试视频流地址:ezopen://open.ys7.com/xxx/3.hd.live
使用:
<ezopenVue :dataVideo="playCamera"></ezopenVue>
播放器集成页面
<template>
<view>
<view id="video-container" class="videoWarp"></view>
</view>
</template>
<script>
import EZUIKit from 'ezuikit-js';
var player = null;
export default {
name: 'ezopenVue',
props: {
dataVideo: {
item: Object,
default: () => {
return {}
}
}
},
data() {
return {
}
},
mounted() {
if (typeof window.EZUIKit !== 'undefined') {
console.log('defined EZUIKit...');
this.initPlayer();
} else {
console.log('undefined EZUIKit...');
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
// view 层的页面运行在 www 根目录,其相对路径相对于 www 计算
script.src = 'static/ezuikit.js'
script.onload = this.initPlayer.bind(this)
document.head.appendChild(script)
}
},
methods: {
initPlayer() {
player = new EZUIKit.EZUIKitPlayer({
id: 'video-container', // 视频容器ID
accessToken: this.dataVideo.ACCESS_TOKEN,
url: this.dataVideo.VIDEO_STREAM_HLS,
// template: 'mobileLive',
// plugin: ['talk'], // 加载插件,talk-对讲
// width: 500,
// height: 300,
});
window.player = player;
},
}
}
</script>
<style lang="scss">
.videoWarp {
width: 750rpx;
height: 420rpx;
background-color: #2B2B2B;
}
</style>