美文网首页Flutter
vue使用萤石云视频

vue使用萤石云视频

作者: lowpoint | 来源:发表于2019-11-25 17:37 被阅读0次

1、官网下载js包

https://open.ys7.com/mobile/download.html

2、(把下载好的ezuikit.js  js包)放进vue 的 static 下

3、在index.html引入

<script src="./static/ezuikit.js"></script>

4、关闭eslint

config/index.js    

useEslint: false, // (设置为false)

5、组件中使用

···

<template>

  <div class="video-monitor">

      <div class="mainbox-title">

        <div><span class="normal-circle"></span></div>

        <div>

          <span class="title-font">视频监视</span>

        </div>

      </div>

      <div class="video-box">

        <video id="myPlayer" src="http://hls01open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.hd.m3u8" width='100%' height="100%" autoplay controls allowfullscreen>

        </video>

      </div>

  </div>

</template>

<script>

export default {

  data(){

    return {

      player:''

    }

  },

  methods:{

    videoOpen(){

      setTimeout(() => {

        this.player = new EZUIKit.EZUIPlayer('myPlayer')

      }, 70);

    }

  },

  mounted(){

    this.videoOpen();

  },

  beforeDestroy(){

    this.player.stop();//关闭视频流

  }

}

</script>

···

相关文章

网友评论

    本文标题:vue使用萤石云视频

    本文链接:https://www.haomeiwen.com/subject/gxxadxtx.html