前端Vue实现萤石云播放视频

原创

于 2024-06-21 12:19:53 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

下载依赖

npm install ezuikit-js --save

完整代码

<template>
  <div class="home">
    <div id="video-container"></div>
  </div>
</template>
<script>
import EZUIKit from "ezuikit-js";

export default {
  name: "home",
  data() {
    return {
      ezvizPlay: null,
    };
  },
  components: {},
  props: {},
  watch: {},
  computed: {},
  mounted() {
    this.$nextTick(()=>{
      this.initVideo()
    })
  },
  methods: {
    initVideo(){
      if (this.ezvizPlay !== null) {
        return;
      }
      //获取萤石token
      this.ezvizPlay = new EZUIKit.EZUIKitPlayer({
        autoplay: true,  // 默认播放
        //视频播放包裹元素
        id: "video-container",
        //萤石token
        accessToken:"----",
        // ezopen://open.ys7.com/${设备序列号}/{通道号}.live
        url: "ezopen://------.live", // 播放地址