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

相关推荐
webkubor16 分钟前
一次前端生产白屏复盘:旧 HTML、Hash 资源和 MIME type text/html
前端·前端工程化
咩咩啃树皮33 分钟前
第63篇【终极整合巨作】从零手写原生中后台管理系统|整合62篇全部前端知识点|从头到尾完整架构+全功能逻辑
前端·架构
得物技术1 小时前
实战从零开始构建一个Coding Agent:Violin |得物技术
javascript·架构·llm
Highcharts2 小时前
用Highcharts如何动态向一个序列添加点-示列讲解
前端
weixin_431600442 小时前
做 Agent 会用到的 Node API(4):取消与 AbortController
前端·学习·ai·agent·ai编程
JiaLin_Denny2 小时前
Vue3中ref和reactive用法与双向数据绑定
前端·javascript·vue.js
用户2181697049302 小时前
Flutter(十)Container Center Align
前端
无人生还2 小时前
从 Vue3 到 React · 快速上手系列第 12 篇:并发特性与性能优化
前端·vue.js·react.js
小p2 小时前
nextjs学习9: Next.js 渲染与缓存
前端·后端
乘风gg2 小时前
AI 时代,你的编程能力在第几层?我敢说,大多数人卡在第一层
前端·ai编程·claude