需求：页面嵌入一个实时视频监控。如下：
页面监控样式.png
上述监控是可以点开播放的。
如何实现呢？首先要成为开发者，并创建一个应用，这些公司应该为你弄好了：
一、使用iframe内联框架
vue页面中嵌入h5内联框架。
iframe内联框架.png
二、在该内联框架中嵌入下述代码。（样式自调，注意看body中video的src，下面有替换步骤）
【标注一】该HTML内的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
video {
width: 100%;
height: 100%;
vertical-align: top;
}
</style>
<script src="../../js/ezuikit.js"></script>
<script src="../../js/jquery.min.js"></script>
</head>
<body>
<video id="hVideo" src="你的设备src地址" width="100%" height="100%" poster="" autoplay controls playsInline webkit-playsinline>
</video>
<script>
// 开始初始化直播源地址
var player = new EZUIKit.EZUIPlayer('hVideo');
// 播放
player.play();
// 结束
// player.stop();
</script>
</body>
</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
下载好之后，导入进你的项目，在该页面引用。
网友评论