frontEnd

Vue3中使用萤石云ezopen视频

萤石云文档：https://open.ys7.com/help/1772

pnpm引入

pnpm add ezuikit-js

使用示例如：Player.vue

<template>

    <div id="video-container"></div>

</template>

<script setup>

import EZUIKit from 'ezuikit-js'

let domain = "https://open.ys7.com";

let EZOPENDemo;

window.EZOPENDemo = EZOPENDemo;

const ezopenInit = () => {

  EZOPENDemo = new EZUIKit.EZUIKitPlayer({

    id: 'video-container',

    width: 600,

    height: 400,

    template: "pcLive",

    accessToken: '你的token',

    url: 'ezopen://open.ys7.com/********/1.live',

    useHardDev: true //开启高性能模式

  })

}

onMounted(() => {

  ezopenInit()

})

</script>

<style>

#video-container {

  width: 600px;

  height: 400px;

  background: #000;

}

</style>

结果pnpm dev后，提示缺少文件，没办法水平有限还没想到怎么让他自动添加进去，所以就把node_modules\ezuikit-js\ezuikit_static这个文件夹拷贝到public\ezuikit_static这了，打包后可以看到视频，pnpm dev执行还是看不到，我怀疑是本地测试地址http://localhost:5173/的问题