莹石云直播原生和莹石云直播vue的使用和区别

莹石云直播-原生和vue的使用和区别

原生-EZUIKit.EZUIPlayer

  //先导入 js 放置 head标签内<script src="./js/ezuikit.js"></script>//再body中<div id="viewOut"><div class="btn-container"><!-- <button id="init">初始化播放</button> --><button id="stop">结束</button></div><video id="myPlayer" width="1000px" height="600px" autoplay src="" controls playsInline webkit-playsinline></video></div>

      console.log(res.data);
//设备id res.data.deviceSerial，设备的token res.data.accessToken，开始时间res.data.beginTime,结束时间res.data.beginTime，后台生成的播放地址 res.data.hdAddressurlView = "https://open.ys7.com/ezopen/h5/iframe_se?url=ezopen://open.ys7.com/" + res.data.deviceSerial + "/1.live&autoplay=0&accessToken=" + res.data.accessToken + "&begin=" + res.data.beginTime + "&end=" + res.data.endTimeconsole.log(urlView);var urls = res.data.hdAddress$('#myPlayer').attr("src", urls);var player = new EZUIKit.EZUIPlayer('myPlayer');// 日志player.on('log', log);function log(str) {}$("#stop").click(function () {player.stop();})

2.vue

安装 ezuikit-这一步在我使用的是直接再vue的package-lock.json里面配置以下

    "ezuikit-js": {"version": "0.1.1","resolved": "https://registry.npm.taobao.org/ezuikit-js/download/ezuikit-js-0.1.1.tgz","integrity": "sha1-Ajj8AmrIX2eD6OreeHjkliP87BA="},

导入-使用-注意-EZUIKit.EZUIKitPlayer-会自动生成iframe不需要自定义video

  <div id="myPlayer"></div></div>

import EZUIKit from "ezuikit-js";import EZUIKit from "ezuikit-js";
import $ from "jquery";
import api from "../../public/js/api.js";export default {EZUIKit,name: "HelloWorld",props: {msg: String},data() {return {srcItem: ""};},mounted() {this.getVideo();},methods: {async getVideo() {// new EZUIKit.EZUIKitPlayer// var player = new EZUIPlayer("myPlayer");console.log(EZUIKit, 333);const res = await this.axios.get(api.sessionApi + "/videoInfo/live");console.log(res.data);let outForm = res.data.data;// this.srcItem = res.data.data.hdAddress;let params = {};console.log(outForm.accessToken, 44);var player = new EZUIKit.EZUIKitPlayer({autoplay: true,id: "myPlayer",accessToken: outForm.accessToken,url: "ezopen://open.ys7.com/" + outForm.deviceSerial + "/1.live",// template: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；// 视频上方头部控件//header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖//plugin: ['talk'],                       // 加载插件，talk-对讲// 视频下方底部控件// footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖// audio: 1, // 是否默认开启声音 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),width: 300,height: 200});}}
};```

莹石云直播原生和莹石云直播vue的使用和区别相关推荐

重磅发布！阿里云混合云：全栈建云、智能管云、极致用云 | 凌云时刻
凌云时刻 · 极鲜速递导读:6月9日, 2020阿里云峰会在云端召开,阿里云混合云产品总监谢宁出席峰会并发布阿里云混合云战略:全栈建云.智能管云.极致用云.阿里云混合云是国内首个大规模成熟商用的原生 ...
【直播预告】阿里云服务网格 ASM 产品易用性改善实践与思考
简介:为了最终共建全球事实标准,阿里云服务网格 ASM 产品选择了以开源的 Istio 为基础进行能力增强和产品化.Istio 面向微服务治理的未来做了很好的概念抽象而功能强大,也因为功能强大带来了易 ...
揭秘阿里云 RTS SDK 是如何实现直播降低延迟和卡顿
简介: RTS NetSDK是未来直播和通信一体化SDK的基石.在RTS NetSDK之上,加一个Multimedia Framework,以及QoS消息处理,就可以构成一个一体化SDK.这对于已经有 ...
广州云栖大会：阿里云携手虎牙，首次落地直播行业边缘节点及云企业网服务
2018年11月22日,由阿里巴巴集团主办的广东省大数据开发者大会暨2018广东云栖大会在广州正式召开,其中以助力游戏企业畅游全球为主题的游戏云专场也在上午如期举办. 在游戏云专场中,阿里云高级商务专 ...
首帧秒开+智能鉴黄+直播答题，阿里云直播系统背后技术大起底
摘要: 想要快速实现直播能力,并对原有业务不产生任何影响,依托如阿里云一样的直播平台,来搭建移动直播系统,将技术难题交给阿里云,把更多的精力放在核心业务的本身,是最为稳妥和高效的选择.本文介绍阿里云直 ...
横跨2017-2018，云效Work Like Alibaba系列直播第五期盛大开启
摘要: 横跨2017-2018年直播,晚上20:00在云栖社区直播间和阿里巴巴技术专家一起,探讨像阿里巴巴一样高效跨企业项目协作,像阿里巴巴一样保障软件研发质量. 阿里巴巴内部是如何高效协同工作的?有 ...
腾讯视频云支持超300万场次直播带货助力企业一天搭建直播间
5月21日,腾讯产业互联网沙龙通过腾讯会议线上举办,围绕"科技助力中小微企业破局"话题,腾讯视频云业务总经理李郁韬 .腾讯云生态建设总经理王莹.腾讯云云开发产品负责人王倩与数百家企 ...
微信小程序-腾讯云即时通信 IM 小程序直播(一)
一.这里我们先讲讲使用腾讯云直播流程请先将1.2.3的都去简单的过一遍就是组件的参数了解一下 1.准备推流跟拉流地址 (登录腾讯云在控制台在直播工具箱找到创建推流跟拉流)推流跟拉流的地址是不 ...
【安卓学习之互动直播】腾讯云直播 1 - 注册/登录/个人信息
█ [安卓学习之互动直播] 腾讯云直播 1 - 注册/登录/个人信息 █ 相关文章: ● [安卓学习之互动直播] 腾讯云直播 1 - 注册/登录/个人信息 ● [安卓学习之互动直播] 腾讯云直播 2 ...

莹石云直播原生和莹石云直播vue的使用和区别

莹石云直播-原生和vue的使用和区别

莹石云直播原生和莹石云直播vue的使用和区别相关推荐

最新文章

热门文章