效果图：

1、在大屏上的效果：

页面嵌入实时视频，可通过点击下面的按钮实现，摄像头拉进，缩小，上下左右等旋转动作

image.png

2、双击视频时候全屏的放大效果：

image.png

步骤：

一、在要嵌入监控的vue页面中，用iframe引入：

image.png

vedio的目录结构：整个demo文件都要导入项目中，可以看到在ysyDemo下面还有几个js文件和一些样式，

我们需要修改的就是，在vedio里面接入视频地址，修改按钮样式就行

image.png

二、vedio.html代码如下：

球机示例模板

.layui-text-bottom {

height: 25px;

}

.layui-text-bottom button {

height: 100%;

width: 67px;

line-height: 10px

}

.content {

position: relative;

overflow: hidden;

}

.front {

width: 100%;

height: 100%;

position: absolute;

background-color: transparent;

top: 0px;

left: 0;

cursor: pointer;

}

.btns {

position: absolute !important;

right: 0;

bottom: 2px;

width: 100%;

height: 20px;

/* overflow: hidden; */

background: rgb(1, 26, 32, 0.3);

}

.btns button {

padding: 0;

border: none;

height: 17px;

width: 11px;

position: absolute;

background-color: transparent;

}

/* 右 */

.btns button:nth-of-type(4) {

left: 94px;

top: 4px;

width: 16px;

height: 16px;

background: url('./videoCtrl/jiantou-right.png') 0 0 no-repeat / 100% 100%;

}

/* 左 */

.btns button:nth-of-type(3) {

left: 80px;

top: 4px;

width: 16px;

height: 16px;

background: url('./videoCtrl/jiantou-left.png') 0 0 no-repeat / 100% 100%;

}

/* 下 */

.btns button:nth-of-type(2) {

left: 67px;

top: 4px;

width: 16px;

height: 16px;

background: url('./videoCtrl/jiantou-down.png') 0 0 no-repeat / 100% 100%;

}

/* 上 */

.btns button:nth-of-type(1) {

left: 54px;

top: 4px;

width: 16px;

height: 16px;

background: url('./videoCtrl/jiantou-up.png') 0 0 no-repeat / 100% 100%;

}

.btns button:nth-of-type(5) {

width: 16px;

height: 16px;

left: 33px;

top: 4px;

background: url('./videoCtrl/plus.png') 0 0 no-repeat / 100% 100%;

}

.btns button:nth-of-type(6) {

width: 16px;

height: 16px;

left: 18px;

top: 4px;

background: url('./videoCtrl/minus.png') 0 0 no-repeat / 100% 100%;

}

.btns button:nth-of-type(7) {

/* 左上*/

width: 16px;

height: 16px;

left: 112px;

top: 4px;

background: url('./videoCtrl/left-up.png') 0 0 no-repeat / 100% 100%;

}

.btns button:nth-of-type(8) {

/* 左下 */

width: 16px;

height: 16px;

left: 125px;

top: 4px;

background: url('./videoCtrl/left-down.png') 0 0 no-repeat / 100% 100%;

}

.btns button:nth-of-type(9) {

/* 右上 */

width: 16px;

height: 16px;

left: 139px;

top: 4px;

background: url('./videoCtrl/right-up.png') 0 0 no-repeat / 100% 100%;

}

.btns button:nth-of-type(10) {

/* 右下*/

width: 16px;

height: 16px;

left: 152px;

top: 4px;

background: url('./videoCtrl/right-down.png') 0 0 no-repeat / 100% 100%;

}

/* 按钮內圆 */

.inner {

width: 56px;

height: 56px;

border-radius: 50%;

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

margin: auto;

}

#myPlayer {

/* transform: scaleY(1.08); */

/* transform-origin: top; */

width: 100% !important;

height: 100% !important;

}

#myPlayer div,

canvas {

width: 100% !important;

height: 100% !important;

}

#chaoxian {

display: none

}

#chaoxian p {

font-size: 30px;

color: #000;

margin: 26px 26px;

}

body,

html {

width: 100%;

height: 100%;

}

// (function(){

var item = location.search

item = item.substr(1)

let data = {}

let arr = item.split("&")

arr.forEach((item1, index) => {

item1 = item1.split("=")

data[item1[0]] = item1[1]

})

data.deviceSerial ='你的设备序列号'

data.channelNo = '你的通道号'

// data.src = 'ezopen://open.ys7.com/' + data.deviceSerial + '/' + data.channelNo + '.hd.live'

data.src = 'ezopen://open.ys7.com/' + data.deviceSerial + '/' + data.channelNo + '.hd.live'

$(function() {

$.ajax({

type: "get",

url: '你获取token的后台地址',

async: true,

success: function(res) {

data.accessToken = res

},

error: function(res) {

console.log("请求失败")

}

});

})

setTimeout(() => {

// 异步 等ajax前面获取token成功后再加载下面代码

var decoder = new EZUIKit.EZUIPlayer({

id: 'myPlayer',

autoplay: true,

url: data.src,

accessToken: data.accessToken,

// decoderPath: '/static/html/ysyDemo/js', //decoderPath：${window.YOUR_PATH};请在生产模式输入ezuikit.js的绝对路径

decoderPath: '/static/ysyDemo/js', // 这里是ezuikit的文件路径，千万不能定位到完整文件夹

// width: 500,

// height: 441

width: 210,

height: 125

});

// 这里是打印日志，本例抛出到播放页面

decoder.on('log', log);

}, 500);

function log(str) {

if (str.indexOf('9048') >= 0) {

document.getElementById("chaoxian").style.display = "block"

document.getElementsByClassName("front")[0].style.backgroundColor = "#fff"

}

}

layui.config({

base: 'layuiadmin/' //静态资源所在路径

}).extend({

index: 'lib/index' //主入口模块

}).use(['index', 'sample']);

// data=item

var timer = 0 //用来计算鼠标按下到松开的时间

var no = null //定时器名字

//开始控制

var control = function(direction) {

no = setInterval(function() {

timer++

}, 100)

console.log('111')

data.direction = direction;

data.speed = '1';

layui.use(['jquery', 'layer'], function() {

var $ = layui.$,

layer = layui.layer;

$.post('https://open.ys7.com/api/lapp/device/ptz/start', data, function(res) {

if (res.code == 200) {

// console.log('开始')

// layer.msg(res.msg, {time: 2000});

} else {

layer.msg(res.msg, {

time: 2000

});

}

}, 'json');

return false;

});

}

//停止转动

var stop = function(direction) {

clearInterval(no)

if (timer <= 3) {

timer = 0

setTimeout(function() {

layui.use(['jquery', 'layer'], function() {

var $ = layui.$ //重点处

,

layer = layui.layer;

$.post('https://open.ys7.com/api/lapp/device/ptz/stop', data, function(res) {

if (res.code == 200) {

// layer.msg(res.msg, {time: 2000});

} else {

layer.msg(res.msg, {

time: 2000

});

}

}, 'json');

return false;

});

}, 500)

} else {

timer = 0

layui.use(['jquery', 'layer'], function() {

var $ = layui.$ //重点处

,

layer = layui.layer;

data.direction = direction;

$.post('https://open.ys7.com/api/lapp/device/ptz/stop', data, function(res) {

if (res.code == 200) {

// console.log('停止')

// layer.msg(res.msg, {time: 2000});

} else {

layer.msg(res.msg, {

time: 2000

});

}

}, 'json');

return false;

});

}

}

// 拿到要全屏显示的div

var fullDiv = document.getElementById("fulldiv")

var myPlayer = document.getElementById("myPlayer")

// 全屏

var fullSreen = function() {

// var myPlayerflashId = document.getElementsByName("myPlayerflashId")

if (isFullscreen()) {

exitFullscreen()

} else {

launchIntoFullscreen(fullDiv)

setTimeout(function() {

var canvas = document.getElementById("canvas0")

var canvas_draw0 = document.getElementById("canvas_draw0")

canvas.width = 1920

canvas.height = 1080

canvas_draw0.width = 1920

canvas_draw0.height = 1080

}, 100)

}

}

// 封装全屏的方法

function launchIntoFullscreen(element) {

if (element.requestFullscreen) {

element.requestFullscreen();

} else if (element.mozRequestFullScreen) {

element.mozRequestFullScreen();

} else if (element.webkitRequestFullscreen) {

element.webkitRequestFullscreen();

} else if (element.msRequestFullscreen) {

element.msRequestFullscreen();

}

}

// 封装退出全屏的方法

function exitFullscreen() {

if (document.exitFullscreen) {

document.exitFullscreen();

} else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen();

} else if (document.webkitExitFullscreen) {

document.webkitExitFullscreen();

}

}

// 判断是否全屏状态

function isFullscreen() {

if (navigator.userAgent.indexOf("Firefox") != -1) {

return document.mozFullScreen;

} else if (navigator.userAgent.indexOf("Chrome") != -1) {

return document.webkitIsFullScreen;

}

return document.fullscreen;

}

// }())

当有的时候，在其他分辨率打开页面，会出现不能自适应(即会出现滚动条)的情况，上述代码中的一下一个地方就是控制实时视频iframe自适应的

image.png

然后再根据按钮调整位置就好了，不想要按钮就不加。

因为简书不能上传文件，把Demo中的代码全贴出来又太臃肿，如果有朋友需要，在评论下面留邮箱地址。我每天都会看。

有时会出现iframe出现滚动条的情况，上述说法有意思误差，在HTML的vedio宽高都改成100%，只要将iframe的尺寸修改成要的样式就好，里面会自适应。