vue引入萤石云监控进行播放

vue引入萤石云监控进行播放

下载萤石云Js文件地址

1,将下载的js文件引入vue项目中

或者

npm install ezuikit-js --save

我这里放在了static下

2,在需要播放的监控页面引入

	import EZUIPlayer from "../../static/js/ezuikit.js";

或者

import  EZUIKit from 'ezuikit-js';

3,js方法调用

	//调用函数
	mounted(){
		this.get()
	},
	get(){
      // 调用监控
      this.$nextTick(() => {
      	//DOM标签的ID		//src 播放地址
        document.getElementById("myPlayer").src =
          "http://****/***/****.m3u8";
        var player = new EZUIPlayer("myPlayer");
        this.video = player;
        player.on("error", function () {
          console.log("error");
        });
        player.on("play", function () {
          console.log("play");
        });
        player.on("pause", function () {
          console.log("pause");
        });
      });
     }

4,HTML

      <div class="video_bg">
        <video
          id="myPlayer"	//ID 可写成动态的 :id="`myplayer`+ ${index}"
          poster
          playsinline
          webkit-playsinline
          autoplay
        >
          <source
            src="http://****/****/***.m3u8"	//播放地址
            type="application/x-mpegURL"
          />
        </video>
      </div>

5,css根据自己的需求进行调整

6,已完成,运行即可播放(效果图)

npm 下载方式引入方式

创建dom

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

写入数据

var player = new EZUIKit.EZUIKitPlayer({
  id: 'video-container', // 视频容器ID
  accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
  url: 'ezopen://open.ys7.com/203751922/1.live',
  width:200,
  height:200,
  autoplay:true
})

还有其他api请参考官方文档
文档地址