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

相关推荐
Wang's Blog13 小时前
前端FAQ: Vue 3 与 Vue 2 相⽐有哪些重要的改进?
前端·javascript·vue.js
再希13 小时前
React+Tailwind CSS+Shadcn UI
前端·react.js·ui
用户479492835691513 小时前
JavaScript 的 NaN !== NaN 之谜:从 CPU 指令到 IEEE 754 标准的完整解密
前端·javascript
群联云防护小杜14 小时前
国产化环境下 Web 应用如何满足等保 2.0?从 Nginx 配置到 AI 防护实战
运维·前端·nginx
ss27314 小时前
Springboot + vue 医院管理系统
vue.js·spring boot·后端
醉方休14 小时前
Web3.js 全面解析
前端·javascript·electron
前端开发爱好者15 小时前
前端新玩具:Vike 发布!
前端·javascript
今天也是爱大大的一天吖15 小时前
vue2中的.native修饰符和$listeners组件属性
前端·javascript·vue.js
fxshy15 小时前
在 Vue 3 + Vite 项目中使用 Less 实现自适应布局:VW 和 VH 的应用
前端·javascript·less
奇舞精选15 小时前
AI时代的前端知识拾遗:前端事件循环机制详解(基于 WHATWG 最新规范)
前端·javascript