Vue中接入萤石等直播视频(更新中ing)

一、萤石:

1. 萤石云开发文档: https://open.ys7.com/help/31

2、安装: npm install ezuikit-js --save

3、在文件中引用:import EZUIKit from 'ezuikit-js'

4、具体代码:

获取accessToken:https://open.ys7.com/help/81?h=https://open.ys7.com/api/lapp/token/get
javascript 复制代码
<template>
	<div id="video1" class="video-item"></div>
</template>
<script lang="ts">
import { defineComponent, nextTick, reactive, toRefs, watch } from 'vue'
// 引入萤石云
import EZUIKit from 'ezuikit-js'

export default defineComponent({
  	name: 'VideoDialog',
    setup (props, { emit }) {
    	const YingShiYunVideoPlay = () => {
			const player = new EZUIKit.EZUIKitPlayer({
			  id: 'video1',
			  accessToken: '根据appKey和secret获取的accessToken',
			  url: '拿到的直播链接,以 ezopen:// 开头',
			  template: 'standard',
			  width: 278,
			  height: 156
			})
			player.play()
			// player.stop() // 停止播放
		}
	}
})
</script>

二、乐橙:

https://www.cnblogs.com/why-cn/p/17247548.html

https://www.jianshu.com/p/3d36d5261750

相关推荐
excel10 分钟前
JS 正则在多次 test() 时为什么会出现 lastIndex 缓存问题?
前端
IT_陈寒11 分钟前
为什么 Java 的 Optional 让我调试到深夜?
前端·人工智能·后端
米丘42 分钟前
React 19.x 的 lazy 与 Suspense
前端·javascript·react.js
如果超人不会飞1 小时前
TinyVue Grid 表格 fetchData 完全指南:从入门到精通
前端
kyriewen1 小时前
手写虚拟DOM后,我反问面试官:key为什么不能用index?
前端·react.js·面试
Doris_20231 小时前
说一说ESLint+Prettier生效的原理
前端·设计模式·架构
ZC跨境爬虫1 小时前
跟着 MDN 学CSS day_21:(图像溢出控制与表单元素样式定制)
前端·javascript·css·ui·交互
卷帘依旧1 小时前
微前端解决方案-qiankun
前端
moshuying2 小时前
你做的,比汇报出来的多得多
前端
shuye2162 小时前
google chrome 离线下载地址
前端·chrome