HTML如何对视频缩放,vue接入实时视频，并可以控制缩放与上下左右

效果图：

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