@beeapi/nutui/dist/packages/video/video.css

一套轻量级移动端Vue组件库

/*!
 * @beeapi/nutui v2.2.10 - video.css, 451ed2404bee284b891e, Sat Dec 19 2020 12:06:10 GMT+0800 (中国标准时间)
 * (c) 2017-2020 JDC
 * Released under the MIT License.
 */.nut-video{width:100%;height:100%;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.nut-video .nut-videoplayer{width:100%;background:#000}.nut-video .playing-mask{width:100%;position:absolute;left:0;top:0;right:0;bottom:60px}.nut-video .playing-mask.custom-touch{bottom:0}.nut-video video{width:100%;height:100%;-o-object-fit:fill;object-fit:fill}.nut-video .nut-video-play-btn{width:80px;height:50px;margin-top:-25px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border:0;background-color:rgba(0,0,0,.45);color:#fff;-webkit-transition:border-color .4s,outline .4s,background-color .4s;-o-transition:border-color .4s,outline .4s,background-color .4s;transition:border-color .4s,outline .4s,background-color .4s;position:absolute;top:50%;left:50%;margin-left:-40px;padding:0;cursor:pointer;opacity:1;background-color:rgba(0,0,0,.5);font-size:30px;-webkit-border-radius:20%;border-radius:20%}.nut-video .nut-video-play-btn:before{content:"";background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA+CAMAAABTPci/AAAAb1BMVEUAAAACAgL///////////////////////////////////+urq4uLi7+/v6zs7OLi4v9/f3Hx8dubm79/f39/f3z8/P5+fn9/f38/Pz4+Pipqans7Oz8/Pz29vbx8fHi4uLX19fq6urg4ODT09P5+flRzniSAAAAJXRSTlMAA6GcmZWlno+RjBYHixgNhRsJgn9PbYh7XhNBdFlHMyc6LCNmyQGEbAAAAdlJREFUSMe11tly4jAQRuHgDdnBYBazw8xk8v7POMI/1Jm0iORUKs31Vy0dMOWX78xk8nWi+SKZrVYzqfHo9Xo4nOZiY83yvW2a9vxnwRmTZta3fhq3O/xlWQodzwNqGre/HlmWuNFeyKtm+7aSSqNG4/x0/VJnTKENxtWOICkkI9YQJIEwdV2uFSSOjPEfBYkjh7kpP+3FBrEIMuzR7AmSRN5oivpdQeJI13mYsig6G8Qi1sgMU55/KUiI1uZCoCJ3BDGo9iYgQnm+IYhBWsN1MPm0VJAADYbBDGra9gQBsccYoSxXEIuCNRiPsqxUkE8Q5IGksvXpFgRkiRBkmCrf/vbLHqgryWYXyUhVrvfLLIobr7KL7/ERPT8axk/xBrImRNV9riBdKG1CNMJwvHlnjAimuiOFABURw6Ka5PNdYfc8JVO+3AEhMPZoO/2MQJE9d1Qc+MGCME9ItufRAMXv4/rXCQYkYvYQQMQi2wDVnRasAbVk+9+YADHEGhMgRKGxAUIkYp44AqSRDAE+RxAhAiQQhAARNDWpHX/DccSenAAR1HzIRoCxqCoJkEDZwxAghY6buyBAGs0uMgQYo5bnW4A1AcapfrvtCTD2FXuxEPm5l3nYyw/PP4V4LkWCqx4LAAAAAElFTkSuQmCC) no-repeat 50%;width:30px;height:30px;display:inline-block;background-size:contain}.nut-video .nut-video-controller{position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;left:0;bottom:0;background-color:rgba(0,0,0,.5);height:35px;width:100%;z-index:11111111;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;opacity:0;-webkit-transition:all 1s;-o-transition:all 1s;transition:all 1s}.nut-video .nut-video-controller.show-control{opacity:1}.nut-video .nut-video-controller.hide-control{opacity:0}.nut-video .nut-video-controller .control-play-btn{width:18px;height:18px;background-image:-webkit-image-set(url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmIiBoZWlnaHQ9IjI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTggNXYxNGwxMS03eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=) 1x);background-repeat:no-repeat;background-position:50%;margin:0 10px}.nut-video .nut-video-controller .control-play-btn.puase{background-image:-webkit-image-set(url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmIiBoZWlnaHQ9IjI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTYgMTloNFY1SDZ2MTR6bTgtMTR2MTRoNFY1aC00eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=) 1x);background-repeat:no-repeat;background-position:50%}.nut-video .nut-video-controller .current-time,.nut-video .nut-video-controller .duration-time{color:#fff;padding:0 5px;font-size:10px}.nut-video .nut-video-controller .progress-container{position:relative;display:inline-block;height:100%;width:100%;margin:0 5px;-webkit-transition:all .2s ease-in;-o-transition:all .2s ease-in;transition:all .2s ease-in;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.nut-video .nut-video-controller .progress-container .progress{position:absolute;top:50%;width:100%;height:2px;margin-top:-.05rem;background:hsla(0,0%,100%,.5)}.nut-video .nut-video-controller .progress-container .buffered{background:hsla(0,0%,100%,.8);height:2px}.nut-video .nut-video-controller .progress-container .video-ball{width:10px;height:10px;position:absolute;top:50%;left:0;-webkit-border-radius:50%;border-radius:50%}.nut-video .nut-video-controller .progress-container .video-ball div{width:10px;height:10px;background:#fff;-webkit-box-shadow:0 0 2px 0 rgba(0,0,0,.2);box-shadow:0 0 2px 0 rgba(0,0,0,.2);margin:0 -5px;-webkit-border-radius:50%;border-radius:50%}.nut-video .nut-video-controller .progress-container .video-ball:hover{width:15px;height:15px}.nut-video .nut-video-controller .fullscreen-icon{width:40px;height:35px;background-image:-webkit-image-set(url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmIiBoZWlnaHQ9IjI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik03IDE0SDV2NWg1di0ySDd2LTN6bS0yLTRoMlY3aDNWNUg1djV6bTEyIDdoLTN2Mmg1di01aC0ydjN6TTE0IDV2MmgzdjNoMlY1aC01eiIvPjwvc3ZnPg==) 1x);background-repeat:no-repeat;background-position:50%}.nut-video .nut-video-controller .fullscreen-icon.full2{background-image:-webkit-image-set(url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmIiBoZWlnaHQ9IjI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik01IDE2aDN2M2gydi01SDV2MnptMy04SDV2Mmg1VjVIOHYzem02IDExaDJ2LTNoM3YtMmgtNXY1em0yLTExVjVoLTJ2NWg1VjhoLTN6Ii8+PC9zdmc+) 1x);background-repeat:no-repeat;background-position:50%}.nut-video .nut-video-controller .volume{width:30px;height:30px;background-image:-webkit-image-set(url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmIiBoZWlnaHQ9IjI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTMgOXY2aDRsNSA1VjRMNyA5SDN6bTEzLjUgM0E0LjUgNC41IDAgMDAxNCA3Ljk3djguMDVjMS40OC0uNzMgMi41LTIuMjUgMi41LTQuMDJ6TTE0IDMuMjN2Mi4wNmMyLjg5Ljg2IDUgMy41NCA1IDYuNzFzLTIuMTEgNS44NS01IDYuNzF2Mi4wNmM0LjAxLS45MSA3LTQuNDkgNy04Ljc3cy0yLjk5LTcuODYtNy04Ljc3eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=) 1x);background-repeat:no-repeat;background-position:50%}.nut-video .nut-video-controller .volume.muted{background-image:-webkit-image-set(url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmIiBoZWlnaHQ9IjI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE2LjUgMTJBNC41IDQuNSAwIDAwMTQgNy45N3YyLjIxbDIuNDUgMi40NWMuMDMtLjIuMDUtLjQxLjA1LS42M3ptMi41IDBjMCAuOTQtLjIgMS44Mi0uNTQgMi42NGwxLjUxIDEuNTFBOC43OTYgOC43OTYgMCAwMDIxIDEyYzAtNC4yOC0yLjk5LTcuODYtNy04Ljc3djIuMDZjMi44OS44NiA1IDMuNTQgNSA2Ljcxek00LjI3IDNMMyA0LjI3IDcuNzMgOUgzdjZoNGw1IDV2LTYuNzNsNC4yNSA0LjI1Yy0uNjcuNTItMS40Mi45My0yLjI1IDEuMTh2Mi4wNmE4Ljk5IDguOTkgMCAwMDMuNjktMS44MUwxOS43MyAyMSAyMSAxOS43M2wtOS05TDQuMjcgM3pNMTIgNEw5LjkxIDYuMDkgMTIgOC4xOFY0eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=) 1x);background-repeat:no-repeat;background-position:50%}.nut-video .nut-video-error{position:absolute;width:100%;height:100%;z-index:111111;background:#000;color:#fff;text-align:center}.nut-video .nut-video-error p{color:#fff}