vue中使用萤石云播放视频

1. 下载依赖

npm install ezuikit-js --save (下载失败可以使用cnpm)

2. 在指定页面使用

引入依赖

import EZUIKit from “ezuikit-js”;

在data中定义：

ezvizPlay: null   ！！！！！！！！如果不定义视频的div会不显示

完整代码如下

<template><div class="home"><div id="video-container"></div></div>
</template>
<script>
import EZUIKit from "ezuikit-js";export default {name: "home",data() {return {ezvizPlay: null,};},components: {},props: {},watch: {},computed: {},mounted() {if (this.ezvizPlay !== null) {return;}//获取萤石tokenthis.ezvizPlay = new EZUIKit.EZUIKitPlayer({autoplay: true,  // 默认播放//视频播放包裹元素id: "video-container",//萤石tokenaccessToken:"----获取的token",url: "ezopen://------.live", // 播放地址template: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；// header: ['capturePicture', 'zoom'], // 如果templete参数不为simple,该字段将被覆盖plugin: ['talk'], // 加载插件，talk-对讲// 视频下方底部控件// footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖footer: ['talk', 'hd', 'fullScreen'], // 如果template参数不为simple,该字段将被覆盖audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启// openSoundCallBack: data => console.log("开启声音回调", data),// closeSoundCallBack: data => console.log("关闭声音回调", data),// startSaveCallBack: data => console.log("开始录像回调", data),// stopSaveCallBack: data => console.log("录像回调", data),// capturePictureCallBack: data => console.log("截图成功回调", data),// fullScreenCallBack: data => console.log("全屏回调", data),// getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),//宽度以及高度  });},methods: {},
};
</script>
<style lang="scss" scoped>
</style>

![在这里插入图片描述](https://img-blog.csdnimg.cn/8a88eaa582304188a5acfbf2ab9001b9.png#pic_center)

一定要注意这个地方，是默认播放的！！遇到的问题是，想让视频默认不播放，怎么调都不可以，挣扎了一个多小时，才找到是这个变量的原因，想要不播放，设置为 autoplay: false

vue中使用萤石云播放视频相关推荐

在vue项目中引用萤石云播放器插件
在vue项目中引用萤石云播放器插件 1. 萤石云官方开发文档: https://open.ys7.com/help/31 2. 登录官方网站:https://open.ys7.com/cn/s/ind ...
关于，VUE中，阿里云播放器报错：Aliplayer is not defined。
VUE中,阿里云播放器报错:Aliplayer is not defined.-Java-CSDN问答感谢@iMingzhen大哥的解答!
vue中播放flv流视频
1.安装环境 npm install video.js npm install flv.js 2.引入video,在main.js中引入 import videojs from "video ...
AntDesign of Vue中实现弹窗播放视频
问题:关闭对话框之后视频不停止(还是不够细心,没有看完对话框Modal中全部API) 可以实现关闭时销毁modal中的元素弹窗播放视频代码如下: <div class="tro-Bo ...
Vue中video播放m3u8视频
1,安装依赖包 npm install --save xgplayer npm install --save xgplayer-hls 2,贴代码吧 <template><div&g ...
vue中播放flv格式视频（b站flv.js的使用）
1.下载flv.js npm install --save flv.js 2.引用 import flvjs from 'flv.js/dist/flv.min.js' 完整代码 <templa ...
在vue中使用海康插件实现视频监控视频直播方法二(RTMP流加Flash加swf)
在vue中使用海康威视实现视频监控,视频直播方法二(RTMP流加Flash加swf) 第一步用npm装这个几个包 "video.js": "^6.6.0",& ...
Windows上搭建rtsp-simple-server流媒体服务器实现rtsp、rtmp等推流以及转流、前端html与Vue中播放hls(m3u8)视频流
场景 Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流: Nginx-http-flv-module流媒体服务器搭建 ...
Vue中使用vue-video-player和videojs-flash插件实现播放rtmp视频文件流
场景 Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg): Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg)_BADAO_ ...
vue中富文本编辑器vue-quill-editor在vue中自定义选择视频插入编辑文章中
题记: ----- 互联网不该只是技术的,不能简化成内容和工具,它应该属于生活本身 vue-quill-editor 是 Vue 项目中使用的富文本编辑器 1 引言在实际应用开发中,在常见的管理后 ...

vue中使用萤石云播放视频

1. 下载依赖

2. 在指定页面使用

引入依赖

在data中定义：

完整代码如下

vue中使用萤石云播放视频相关推荐

最新文章

热门文章