Unity 开发 WebGL 的项目想要播放视频，我觉得使用 H5 的
<video>标签就够了，想做一个通过RTSPtoWebRTC 在浏览器播放 rtsp 的示例，所以先撸个弹窗试下。
前言：
先说什么是模态窗口，模态窗口通俗来讲就是独占 UI 框架最上层的窗口，不关掉这个窗口，其他窗口休想关闭。
那么，咱们用于播放视频的 html 模态窗口需求不就来了：
- 有个蒙版遮蔽整个网页；
- 蒙版最好能渐隐渐显；
- 点击蒙版周边区域，弹窗关闭；
- 弹窗位置动态适配浏览器尺寸实现永远居中
实现：
Talk is cheap show me your code.
- 先整蒙版、蒙版关闭按钮、弹窗的层叠样式表实现他们的布局。
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
display: none;
z-index: 99;
}
.closebutton {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
display: none;
z-index: 100;
}
.panel {
position: absolute;
display: none;
text-align: center;
z-index: 101;
}
- 再整 js 逻辑实现蒙版、弹窗的显示隐藏、视频播放以及一个简陋的 html 测试页面，逻辑有注释，看注释交流。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试弹窗播放视频</title>
<link rel="stylesheet" type="text/css" href="htmlstyle.css">
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
var opacity = 0.68;
var internal = 0.01;
var timeout = 0.5;
$(document).ready(function () {
//浏览器窗口大小改变时
$(window).resize(DoPanelResize);
//浏览器有滚动条时的操作、
$(window).scroll(DoPanelResize);
});
function ButtonClicked() {
$(".panel").css({ 'display': 'block' });
DoPanelResize();
ShowMask(null, true);
}
// 隐藏弹窗
function ClosePanel() {
$(".panel").css({ 'display': 'none' });
ShowMask(() => {
$(".mask").css({ 'display': 'none' });
}, false);
}
// 居中
function DoPanelResize() {
if ($(".panel").css("display") != "block") return;
var screenWidth = $(window).width();
var screenHeight = $(window).height();
var scrolltop = $(window).scrollTop();
var objLeft = (screenWidth - $(".panel").width()) / 2;//当前浏览器窗口的 宽高
var objTop = (screenHeight - $(".panel").height()) / 2; + scrolltop;//获取当前窗口距离页面顶部高度
$(".panel").css({ 'left': objLeft + 'px', "top": objTop + 'px' });
}
// 实现 蒙版的渐隐渐显
function ShowMask(callback, isfadein) {
var mask = document.getElementById("mask");
mask.style.display = "block";
var op = mask.style.opacity = isfadein ? 0.00 : 1;
var op_temp = isfadein ? opacity : 0;
var delay = setInterval(() => { //开启定时器
if (isfadein) {
if (mask.style.opacity < op_temp) {
op += internal;
} else {
op = opacity;
}
} else {
if (mask.style.opacity > op_temp) {
op -= internal;
} else {
op = opacity;
}
}
mask.style.opacity = op;
if (Math.abs(mask.style.opacity - op_temp) < 0.001) {
$(".closebutton").css({ 'display': isfadein ? 'block' : 'none' });
if (callback) callback();
clearInterval(delay); //清除定时器
}
}, timeout);
}
</script>
</head>
<body>
<div>点击以弹窗形式居中播放视频</div>
<input type="button" onclick="ButtonClicked()" id="btn" value="播放" />
<div class="mask" id="mask"></div>
<button onclick="ClosePanel()" class="closebutton"></button>
<div class="panel">
<video controls >
<source src="movie.ogg" type="video/ogg">
your browser does not support the video tag
</video>
</div>
</body>
</html>
明明写的是 JS 但总感觉 C#里C#气的！
效果：
Tips：从动图演示来看，好像把上面谈到了需求都实现了哈。
写到最后：
- 非网页前端，面向百度编程，大佬轻拍。
- 使用了第三方插件 jquery
- 最原始的参考博客是这个：基于jquery的弹出提示框...
- 为方便交流，上传 Github
- 【Unity 3D】怎么在 WebGL 中播放 RTSP 监控
网友评论