Vue接入萤石实时视频

需求：页面嵌入一个实时视频监控。如下：

页面监控样式.png

上述监控是可以点开播放的。
如何实现呢？首先要成为开发者，并创建一个应用，这些公司应该为你弄好了：

一、使用iframe内联框架

vue页面中嵌入h5内联框架。

iframe内联框架.png

二、在该内联框架中嵌入下述代码。（样式自调，注意看body中video的src，下面有替换步骤）

【标注一】该HTML内的代码：

三、打开https://open.ys7.com网址，按下述顺序点击查看直播地址。此时公司应该给你账号登录了，你现在是开发者的身份。

按顺序点击.png

按顺序点击进来之后，复制一个视频地址，贴到【标注一】的src中

复制地址.png

四、光贴src还不行，必须引入h5中的js

需要注意的是，仔细看h5，该页面需要引入两个js文件：

要引入的js文件.png

五、下载js文件

下载地址：

【uikit下载地址：】https://open.ys7.com/doc/zh/uikit/uikit_javascript.html

image.png

下载uikit.js

【jquery-min下载地址：】https://www.bootcdn.cn/jquery

下载jquery-min.png

下载好之后，导入进你的项目，在该页面引用。

另其他功能文档，见萤石开放平台：

https://open.ys7.com/](https://open.ys7.com/