CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCOPY TO TMP LIB FOR ATTACH .SO DEBUG.

最新推荐文章于 2024-03-30 12:35:25 发布

冬季到台北来看雨

最新推荐文章于 2024-03-30 12:35:25 发布

阅读量976

点赞数

CC 4.0 BY-SA版权

分类专栏：音视频直播OWT 微信小程序开发游戏设计和开发文章标签： nagios character 内存结构

本文链接：https://blog.csdn.net/weixin_43088149/article/details/113646568

音视频直播OWT 同时被 3 个专栏收录

2 篇文章

订阅专栏

微信小程序开发

1 篇文章

订阅专栏

游戏设计和开发

1 篇文章

订阅专栏

这篇博客详细描述了一段HTML和CSS代码，用于创建一个全屏视频播放器的界面，包括工具栏、网络状态指示、全屏和最小化按钮等元素。代码中涉及到布局、样式设计以及区域拖动等特性，适用于网页多媒体交互界面的开发。

html,body{
padding: 0;
margin: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
}
html,body *{
user-select:none;
}

div,input,span,a,p,br,h1,h2,h3,ul,li,ol{
padding: 0;
margin: 0;
box-sizing: border-box;
}

.video-container{
margin: 0 auto;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

.video-container video{
position: relative;
width: 100%;
height: 100%;
object-fit: fill;
}

@keyframes toolsAnimation{
from {filter: opacity(0);}
to {filter: opacity(1);}
}

.video-container .tools{
position: absolute;
width: fit-content;
height: 62px;
bottom: 50px;
left: 0;
right: 0;
margin: 0 auto;
background-color: #404040;
border-radius: 5px;
box-shadow: 0px 0px 3px 0px #4f4f4f8f;
overflow: visible;
padding: 0;
opacity: 0.85;
-webkit-app-region: no-drag;
}
/*
.video-container .tools:hover{
animation: toolsAnimation 1.5s;
opacity:1;
} */

.video-container .tools:hover >*{
filter: none;
}

.video-container .tools .el-dropdown,.video-container .tools .dorpdownLabel,.video-container .tools .el-menu-member{
width: 100%;
height: 100%;
color:white;
}

.video-container .tools > *{
width: 76px;
line-height: 1.0;
height: 100%;
border: none;
text-align: center;
background-color: transparent;
color: white;
box-sizing: content-box;
display: inline-block;
vertical-align: middle;
border-right: solid 1px #a0a0a040;
border-left: solid 1px transparent;
position: relative;
font-size: 0;
margin: 0;
padding: 0;
}

.video-container .tools > *:not(:first-child){
margin-left: -4px;
}

.video-container .tools > *:hover{
background-color:#00000033;
}

.video-container .tools >:last-child{
border-right: 0;
}

.video-container .tools option{
text-align: center;
background-color: #404040AA;
height: 32px;
line-height: 1.0;
}

.video-container .tools .layout{
line-height: 1.0;
}
.video-container .tools .label{
width: 28px;
height: 60%;
line-height: 1.0;
object-fit: contain;
margin-top: 5px;
}
.video-container .tools .tip{
display: none;
}

.video-container .tools > *:hover .tip{
display: block;
position: absolute;
top: -40px;
min-width: 150px;
width: fit-content;
height: fit-content;
font-size: 14px;
white-space: nowrap;
text-align: center;
padding: 10px;
background-color: brown;
border-radius: 5px;
left: -30px;
}

.video-container .tools .record{
display: none;
}

.video-container .tools .title{
position: absolute;
bottom: 8px;
width: 100%;
font-size: 12px;
white-space: nowrap;
text-align: center;
overflow: hidden;
padding: 0 1px;
font-weight: 400;
letter-spacing: 2px;
text-indent:2px;
}

.video-container .chat{
position: absolute;
width: fit-content;
height: fit-content;
bottom: 50px;
left: 16px;
background-color:#FAFAFA;
border-radius: 2px;
padding: 0 5px;
-webkit-app-region: no-drag;
}

.video-container .chat>*{
width: 32px;
height: 32px;
background-repeat: no-repeat;
background-size: 26px;
background-position: center;
display: inline;
vertical-align: middle;
font-size: 0;
float: left;
}
.video-container .chat .emoji_group span
{
width: 100%;
height: 100%;
display: block;
}

.video-container .chat .emoji_group span button{
width: 100%;
height: 100%;
padding: 0;
border: 0;
}

.video-container .chat .emoji{
background-image: url(…/icon/emoji.png);

background-repeat: no-repeat;
background-size: 24px;
background-position: center;

}
.video-container .chat .emoji:hover{
background-image: url(…/icon/emoji_hover.png);
}
.video-container .chat .msg{
background-image: url(…/icon/msg.png);

}
.video-container .chat .msg:hover{
background-image: url(…/icon/msg_hover.png);
}

.video-container .chat .msg_input{
width: 120px;
padding: 2px 5px;
border-left: solid 1px #aaa;
}

.video-container .chat .msg_input > input{
width: 100%;
height: 100%;
line-height: 1.0;
border: 0;
padding: 0 5px;
font-size: 12px;
margin: 0;
}

.video-container .drag{
position: absolute;
width: 80%;
height: 80%;
left: 10%;
top:10%;
font-size: 0;
margin: 0;
padding: 0;
background: transparent;
-webkit-app-region: drag;
}

.heisir{
padding: 0;
margin: 0;
background-color: #252526;
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;

-webkit-app-region: no-drag;

}

.heisir .header{
width: 100%;
height: 32px;
position: relative;
background-color: #333333;
border-bottom: solid 1px #454545;
z-index: 9999;
-webkit-app-region: drag;
box-sizing: content-box;
}

.heisir .toolbar{
width: 100%;
height: fit-content;
position: relative;
z-index: 2;
}

.heisir .toolbar >:last-child{
border-bottom-left-radius: 4px;
}

.heisir .network{
width: fit-content;
position: relative;
text-align: left;
background-color: #00000088;
height: 24px;
padding: 0 5px;
box-sizing: content-box;
float: right;
}
.heisir .network >*{
font-size: 10px;
line-height: 24px;
font-style: normal;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 100%;
color: white;
vertical-align: middle;
white-space: nowrap;
}
.heisir .network .upload,.heisir .network .download{
width: fit-content;
min-width: 72px;
text-indent: 1px;
text-align: left;
}
.heisir .network .wireless{
width: 12px;
background-image: url(…/icon/network.png);
margin-right: 5px;
}

.heisir .fullscreenbar{
width: 24px;
right: 0;
position: relative;
background-color: #00000088;
height: 24px;
padding: 0;
box-sizing: content-box;
font-size: 0;
outline: 0;
float: right;
}

.heisir .fullscreenbar .fullscreen{
width: 100%;
height: 100%;
background-image: url(…/icon/fullscreen.png);
background-repeat: no-repeat;
background-size: 18px;
background-position: center;
display: inline-block;
}
.heisir .fullscreenbar .unfullscreen{
width: 100%;
height: 100%;
background-image: url(…/icon/fullscreen_no.png);
background-repeat: no-repeat;
background-size: 18px;
background-position: center;
display: inline-block;
cursor: pointer;
}

.heisir .fullscreenbar .unfullscreen:hover {
background-color: #00000044;
}

.heisir .header > *{
display: inline-block;
}
.heisir .systools {
width: fit-content;
right: 0px;
position: absolute;
height: 100%;
box-sizing: content-box;
overflow: hidden;
-webkit-app-region: no-drag;
}

.heisir .header .title{
width: fit-content;
height: 100%;
line-height: 32px;
color: #e5e5e5;
vertical-align: middle;
margin: 0 10px;
font-size: 12px;
font-weight: 400;
letter-spacing: 1px;
text-indent: 1px;
}

.heisir .systools >*{
width: 32px;
height: 100%;
display: inline-block;
vertical-align: middle;
color: #e5e5e5;
font-size: 0;
background-size: 14px;
background-repeat: no-repeat;
background-position: center;
}

.heisir .systools .fullscreen{
background-image: url(…/icon/fullscreen.png);

background-size: 18px;

}
.heisir .systools .fullscreen:hover{
background-image: url(…/icon/fullscreen_hover.png);
}
.heisir .systools .minimize{
background-image: url(…/icon/minimize.png);
}

.heisir .systools .minimize:hover{
background-color: #505050;
background-image: url(…/icon/minimize_hover.png);
}

.heisir .header .systools .close{
background-image: url(…/icon/close.png);
}

.heisir .header .systools .close:hover{
background-color: #D71526;
background-image: url(…/icon/close-hover.png);
}

.heisir .header

.heisir .bitrate-container{
position: absolute;
top: 10px;
right: 100px;
-webkit-app-region: no-drag;
}

.heisir .bitrate-container .bitrateSelects,.heisir .bitrate-container .bitrateOption{
margin: 5px 2px;
border: 0px;
padding: 5px 15px;
font-size: 1em;
background-color: black;
color: white;
-webkit-app-region: no-drag;
}

.heisir .desktop .transparent
{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: transparent;
border: 0;
}

.heisir .desktop .screen-dialog{
display: none;
position: absolute;
width: 700px;
background-color: #d8d8d8ab;
bottom: 72px;
margin: 0 auto;
border-radius: 4px;
padding: 10px;
box-shadow: 0px 0px 10px 1px #666;
text-align: center;
left: -490px;
overflow-x: auto;
z-index: 5;
-webkit-app-region: no-drag;
opacity: 0;
}

.heisir .desktop .screen-dialog .screen-poster{
width: 200px;
margin: 10px;
box-shadow: 0px 0px 10px 1px #333;
}

.heisir .desktop:hover .screen-dialog{
opacity: 1;
}

.heisir .desktop .screen-dialog .screen-poster:hover{
transform: scale(1.1);
}

#App{
width: 100%;
height: 100%;
}

.el-header {
-webkit-app-region: drag;
padding:0 !important;
background-color:#009afb;
line-height: 40px;
}

.el-header .title{
margin-left: 10px;
font-weight: 600;
font-size: 16px;
color: #f3f3f3;
margin-top: -6px;
}

.systemTool{
position: fixed;
right: 0;
top: 0;
margin-top: -6px;
margin-right: 0px;
-webkit-app-region: no-drag;
}

.systemTool .mylink{
color: #f3f3f3;
margin: 0 5px;
text-decoration: none;
font-size: 14px;
}
.systemTool .el-button{
padding:0 !important;
border:0 !important;
border-radius:0 !important;
color: #f3f3f3 !important;
}
.systemTool .el-button:hover{
background-color: #D71526;
}
.systemTool .button{
width: 30px;
height: 30px;
background-color: #00000000;
font-size: large;
}

.systemTool .el-button+.el-button{
margin-left: 0 !important;
}

.heisir .message_tip{
width: fit-content;
min-width: auto;
border: 0;
background-color:#66666680;
}

.heisir .message_tip .el-message__content{
color: #fff;
}

.heisir .notify_join,.heisir .notify_msg{
width: fit-content;
min-width: 0;
width: fit-content;
padding: 2px 5px;
border-radius: 2px;
background-color: #444444ee;
border: 0;
}

.heisir .notify_join.left,.heisir .notify_msg.left{
left: 16px;
}

.heisir .notify_join .el-notification__content,.heisir .notify_msg .el-notification__content{
margin:0;
color: #e6e6e6;
text-indent: 2px;
letter-spacing: 2px;
vertical-align: middle;
}

.heisir .notify_join .el-notification__group,.heisir .notify_msg .el-notification__group{
margin: 0;
}

.heisir .notify_msg .el-notification__content div{
display: inline-block;
height: 24px;
line-height: 24px;
margin: 0;
padding: 0;
vertical-align: middle;
}

.heisir .notify_msg .el-notification__content .nick{
color: #efff00;
}

.heisir .notify_msg .el-notification__content .content{
color: #efefef;
vertical-align: middle;
}

.heisir .notify_msg .el-notification__content img{
vertical-align: middle;
}

.heisir .emoji_popover{
min-width:auto;
padding: 5px;
}

.heisir .emoji_popover ul{
text-align: center;
}

.heisir .emoji_popover li{
display: inline-block;
cursor: pointer;
font-size: 0;
outline: 0;
inset: 0;
}

.heisir .emoji_popover li img{
width: 48px;
height: 48px;
}

.heisir .emoji_popover li img:hover{
box-sizing: border-box;
box-shadow: inset 0px 0px 8px 1px #ccc;
border-radius: 15px;
}

.heisir .screen_select_dialog{
width: fit-content;
min-width: 40vw;
}

.heisir .screen_select_dialog .el-dialog__body{
text-align: center;
}

.heisir .screen_select li{
list-style: none;
display: inline;
margin: 0 10px;
}
.heisir .screen_select li img{
width: 200px;
height: auto;
}

.heisir .el-dropdown-menu.el-popper{
background-color: #404040;
border: 0;
opacity: 0.85;
margin: 10px;
color:#ffd400;

}
.heisir .el-dropdown-menu.el-popper .el-dropdown-menu__item{
color: white;
}

.heisir .el-dropdown-menu__item:focus,.el-dropdown-menu__item:not(.is-disabled):hover {
background-color:#303030 !important;
color: #ffd400 !important;
}

.heisir .el-dropdown-menu__item–divided:before{
background-color:#404040 !important;
}

.heisir .el-dropdown-menu__item–divided {
position: relative;
margin-top: 6px;
border-top: 1px solid #888888
}
.heisir .el-popper[x-placement^=top] .popper__arrow,.el-popper[x-placement^=top] .popper__arrow::after{
border-top-color: #404040 !important;
}html,body{
padding: 0;
margin: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
}
html,body *{
user-select:none;
}

div,input,span,a,p,br,h1,h2,h3,ul,li,ol{
padding: 0;
margin: 0;
box-sizing: border-box;
}

.video-container{
margin: 0 auto;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

.video-container video{
position: relative;
width: 100%;
height: 100%;
object-fit: fill;
}

@keyframes toolsAnimation{
from {filter: opacity(0);}
to {filter: opacity(1);}
}

.video-container .tools:hover >*{
filter: none;
}

.video-container .tools .el-dropdown,.video-container .tools .dorpdownLabel,.video-container .tools .el-menu-member{
width: 100%;
height: 100%;
color:white;
}

.video-container .tools > *:not(:first-child){
margin-left: -4px;
}

.video-container .tools > *:hover{
background-color:#00000033;
}

.video-container .tools >:last-child{
border-right: 0;
}

.video-container .tools option{
text-align: center;
background-color: #404040AA;
height: 32px;
line-height: 1.0;
}

.video-container .tools .record{
display: none;
}

.video-container .chat .emoji_group span button{
width: 100%;
height: 100%;
padding: 0;
border: 0;
}

.video-container .chat .emoji{
background-image: url(…/icon/emoji.png);

background-repeat: no-repeat;
background-size: 24px;
background-position: center;

}
.video-container .chat .emoji:hover{
background-image: url(…/icon/emoji_hover.png);
}
.video-container .chat .msg{
background-image: url(…/icon/msg.png);

}
.video-container .chat .msg:hover{
background-image: url(…/icon/msg_hover.png);
}

.video-container .chat .msg_input{
width: 120px;
padding: 2px 5px;
border-left: solid 1px #aaa;
}

.video-container .chat .msg_input > input{
width: 100%;
height: 100%;
line-height: 1.0;
border: 0;
padding: 0 5px;
font-size: 12px;
margin: 0;
}

.video-container .drag{
position: absolute;
width: 80%;
height: 80%;
left: 10%;
top:10%;
font-size: 0;
margin: 0;
padding: 0;
background: transparent;
-webkit-app-region: drag;
}

.heisir{
padding: 0;
margin: 0;
background-color: #252526;
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;

-webkit-app-region: no-drag;

}

.heisir .header{
width: 100%;
height: 32px;
position: relative;
background-color: #333333;
border-bottom: solid 1px #454545;
z-index: 9999;
-webkit-app-region: drag;
box-sizing: content-box;
}

.heisir .toolbar{
width: 100%;
height: fit-content;
position: relative;
z-index: 2;
}

.heisir .toolbar >:last-child{
border-bottom-left-radius: 4px;
}

.heisir .fullscreenbar{
width: 24px;
right: 0;
position: relative;
background-color: #00000088;
height: 24px;
padding: 0;
box-sizing: content-box;
font-size: 0;
outline: 0;
float: right;
}

.heisir .fullscreenbar .unfullscreen:hover {
background-color: #00000044;
}

.heisir .systools .fullscreen{
background-image: url(…/icon/fullscreen.png);

background-size: 18px;