onclick 获取点击之后的img 的id_前端，点击按钮跳出视频带蒙层，且视频永远居于屏幕中间...

1.前言：

做之前问了一下度娘，发现参考好像很少，就把我这个不成熟的代码放上来，做个参考（刚入行没多久，代码比较迷，接受批评）

2.实现效果：

视频点击播放前的区域效果

点击这个button按钮图，视频弹出，其余可视部分蒙层

视频弹出以后就是酱紫的

3.设计思路：

（1）未弹出之前video区域是一个组合图（一张背景图和一个按钮图），给按钮添加js点击事件，点击按钮mask层弹出

//已经按设计师要求修改为点击整个背景图区域就可以弹出mask层

（2）mask层有两大层（蒙层mask和视频区show层），show层又包含两层（video层放视频，close层放关闭按钮）

（3）mask弹出后可以点击关闭按钮关闭mask层

***注意：

mask层的层级一定要高与页面其他层，默认要设置为displaynone，否则一打开网站mask层就默认出现

4.实现代码：

（1.）这个块是第一张图，视频未弹出时候放置图片的地方

<div className="video">

            <button className="vBg">
              <img src={`${baseUrl}img/ark share_ player.png`} ></img>
                <div className="vStart" id="start">
                  <img src={`${baseUrl}img/player _but_nor.png`} ></img>
                </div>
            </button>

</div>

样式

.introduce .main .video{
 padding-left: 2em;
 float: right;
 width: 50%;
}

.introduce .main .video .vBg{
 position: relative;
 display: inline-block;
 cursor: pointer;
 border: 0;
 box-shadow: 0 1px 6px 0 rgba(95,125,252,50) ;
}
.introduce .main .video .vStart{
 position: absolute;
 right: 1.7em; bottom: 1.5em;
 width: 40px;
 height: 40px;
 cursor: pointer;
}

.introduce .main .video .vStart:hover {
 position: absolute;
 right: 1.6em; bottom: 1.3em;
 width: 43px;
 height: 43px;
}

（2.）视频弹出播放时

 <div className="mask">
        <div className="show">

          <button className="close">
            <img src={`${baseUrl}img/ios-close.svg`}/>
          </button>

          <video controls className="pArea">
            <source src={`${baseUrl}video/ark_design.mp4`} type="video/mp4"></source>
          </video>

        </div>
</div>

样式

.mask{
	position: fixed;
	top: 0; bottom: 0;
	width:100vw;
	height: 100vh;
	display: flex;
    align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 100;
	display: none;
}
.mask .show{
	width:900px; height:500px;
	border: 0;
	position: relative;
}
.mask .show :focus{
	outline: none;
}
.mask .show :hover{
	outline: none;
}
.mask .show video{
	width: 100%;
	height: 100%;
	z-index: 100;
	/* float: left; */
	background-color: #000;
}

.mask .show .close{
	background-color:rgba(0, 0, 0, 0) ;
	border: 0;
	cursor: pointer;
}
.mask .show .close img{
	width: 36px;
	height: 36px;
}
.mask .show .pArea{
	float: left;
	width:calc(100% - 36px - 1em);
	margin-top: 36px;
}

（3.）点击事件

setTimeout(() => {
    //这个是点击背景图片播放视频
    document.getElementsByClassName("vBg")[0].onclick = () =>{
        console.log("22222");
        var maskBlock = document.getElementsByClassName("mask")[0];
            maskBlock.style.display = "flex";
    }

    //这个是点击x关闭按钮
    document.getElementsByClassName("close")[0].onclick = () =>{
        console.log("22222");
        var maskBlock = document.getElementsByClassName("mask")[0];
            maskBlock.style.display = "none";
    }
    
}, 100)