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

相关推荐
刘一说15 分钟前
Vue3响应式原理重构:从Object.defineProperty到Proxy的革命性升级
javascript·vue.js·重构
博客zhu虎康19 分钟前
音频视频处理:前端直播流播放 flv
前端
一位搞嵌入式的 genius19 分钟前
深入理解 JavaScript 原型与继承:从基础到进阶
开发语言·前端·javascript
董世昌4130 分钟前
深度解析var、let、const的区别与最佳使用场景
开发语言·前端·javascript
C_心欲无痕32 分钟前
Next.js 平行路由:构建模块化动态布局
开发语言·前端·javascript
warrah34 分钟前
前端项目容器化部署问题
前端·docker
GISer_Jing35 分钟前
2026前端技术潜在主流前沿方向
前端·人工智能·reactjs
切糕师学AI37 分钟前
Vue 中的生命周期钩子
前端·javascript·vue.js
掘金-我是哪吒37 分钟前
提升服务器性能,解决前端首页加载过慢的问题
运维·服务器·前端
摘星编程39 分钟前
React Native for OpenHarmony 实战:Platform 平台检测与判断
javascript·react native·react.js