vnetwork-player
Version:
A React component custom player support video m3u8, mp4
2 lines (1 loc) • 8.36 kB
CSS
#vnetwork-player{width:100%;aspect-ratio:16/9;background-color:#222}#vnetwork-player *{padding:0;margin:0;box-sizing:border-box}#vnetwork-player .video{width:100%;height:100%;object-fit:contain;background-color:#000}#vnetwork-player .video-container{width:100%;height:100%;position:relative;color:#fff;background-color:#111}#vnetwork-player .video-container:fullscreen,#vnetwork-player .video-container:-webkit-full-screen,#vnetwork-player .video-container:-moz-full-screen,#vnetwork-player .video-container:-ms-fullscreen{width:100vw;height:100vh;background-color:#000}#vnetwork-player .video-container:fullscreen .video,#vnetwork-player .video-container:-webkit-full-screen .video,#vnetwork-player .video-container:-moz-full-screen .video,#vnetwork-player .video-container:-ms-fullscreen .video{width:100%;height:100%;object-fit:contain}#vnetwork-player .center-item-absolute{position:absolute;z-index:5;top:50%;transform:translate(-50%, -50%);left:50%}#vnetwork-player .control-container{position:absolute;inset:0;background:rgba(0,0,0,0);align-items:flex-end;padding:8px 0;transition:all linear .4s}#vnetwork-player .control-container::before{content:"";position:absolute;inset:auto 0 0;height:34%;min-height:92px;background:linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.42) 46%, rgba(0, 0, 0, 0) 100%);pointer-events:none;z-index:1}#vnetwork-player .control-container::after{content:"";position:absolute;inset:0 0 auto;height:24%;min-height:70px;background:linear-gradient(to bottom, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.16) 48%, rgba(0, 0, 0, 0) 100%);pointer-events:none;z-index:1}#vnetwork-player .control-container>.w-full{position:relative;z-index:2}#vnetwork-player .settings-container{position:fixed;display:flex;align-items:flex-end;bottom:0;right:0;background:linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 34%, rgba(0, 0, 0, 0) 70%);left:0;top:0;z-index:100}#vnetwork-player .settings-content{background-color:#222;padding:4px;width:100%;border-radius:4px}#vnetwork-player .skip-segment-button{position:absolute;right:16px;bottom:64px;z-index:12;border:1px solid rgba(255,255,255,.24);border-radius:4px;background:rgba(20,20,20,.92);color:#fff;cursor:pointer;font-size:14px;font-weight:700;line-height:1;padding:10px 14px;transition:background-color .2s ease,border-color .2s ease,transform .2s ease}#vnetwork-player .skip-segment-button:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.48);transform:translateY(-1px)}#vnetwork-player .video-meta-overlay{position:absolute;top:16px;left:16px;right:16px;z-index:11;max-width:min(720px,100% - 32px);pointer-events:none}#vnetwork-player .video-meta-title{color:#fff;display:-webkit-box;font-size:16px;font-weight:800;line-height:1.35;overflow:hidden;text-shadow:0 2px 12px rgba(0,0,0,.8);-webkit-box-orient:vertical;-webkit-line-clamp:2}#vnetwork-player .video-meta-description{color:rgba(255,255,255,.76);display:-webkit-box;font-size:13px;font-weight:600;line-height:1.45;margin-top:4px;overflow:hidden;text-shadow:0 2px 10px rgba(0,0,0,.72);-webkit-box-orient:vertical;-webkit-line-clamp:2}#vnetwork-player .progress-vnet{padding:8px 0;width:100%;position:relative;cursor:pointer;z-index:1}#vnetwork-player .progress-dot{width:10px;height:10px;position:absolute;top:50%;transform:translateY(-50%);border-radius:50%;z-index:4}#vnetwork-player .progress-gray{width:100%;height:3px;background-color:#9ca3af;position:relative;transition:height .2s ease-in-out;overflow:visible}#vnetwork-player .progress-buffered{position:absolute;top:0;bottom:0;height:100%;z-index:1;pointer-events:none;transition:width .2s linear}#vnetwork-player .progress-marker{position:absolute;top:0;bottom:0;height:100%;min-width:5px;opacity:.9;z-index:2}#vnetwork-player .progress-marker:hover{z-index:120}#vnetwork-player .progress-marker::before{content:"";position:absolute;inset:-8px 0}#vnetwork-player .progress-marker-tooltip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);white-space:nowrap;border-radius:4px;background-color:#222;color:#fff;font-size:12px;font-weight:700;line-height:1;opacity:0;padding:6px 8px;pointer-events:none;transition:opacity .16s ease,transform .16s ease;z-index:121}#vnetwork-player .progress-marker:hover .progress-marker-tooltip{opacity:1;transform:translate(-50%, -2px)}#vnetwork-player .progress-seek{height:4px}#vnetwork-player .progress-main{position:absolute;top:0;bottom:0;background-color:#ef4444;z-index:3}#vnetwork-player .opacity-animation{animation:fadeIn ease-in-out .6s}#vnetwork-player .width-animation{animation:width ease-in-out .4s}#vnetwork-player .main-control-container{display:flex;align-items:center;justify-content:space-between;padding:0 8px;position:relative;z-index:2}#vnetwork-player .main-settings-content{display:flex;align-items:center}#vnetwork-player .cursor-pointer{cursor:pointer}#vnetwork-player .volume{width:100px;display:none}#vnetwork-player .time{font-size:14px;font-weight:600;text-align:justify}#vnetwork-player .main-settings{display:flex;align-items:center;justify-content:space-between;padding:8px}#vnetwork-player .justify-between{justify-content:space-between}#vnetwork-player .p-2{padding:8px}#vnetwork-player .text-sm{font-size:14px}#vnetwork-player .font-semibold{font-weight:600}#vnetwork-player .line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}#vnetwork-player .icon-20px{width:20px;height:20px;display:flex}#vnetwork-player .overflow-y-auto{overflow-y:auto}#vnetwork-player .w-full{width:100%}#vnetwork-player .mr-3{margin-right:12px}#vnetwork-player .tooltip-container{position:relative}#vnetwork-player .tooltip{position:absolute;padding:5px 8px;border-radius:4px;background-color:#222;top:-35px;font-size:14px;font-weight:600;text-align:center;display:none;left:50%;transform:translateX(-50%);z-index:100}#vnetwork-player .show .tooltip{display:block}#vnetwork-player .loading{width:3.75em;transform-origin:center;animation:rotate 2s linear infinite}#vnetwork-player circle{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}#vnetwork-player .error-container{display:flex;align-items:center;justify-content:center;flex-direction:column;padding:0 8px}#vnetwork-player .error-image{width:100px;margin-bottom:20px}#vnetwork-player .error-message{text-align:center;color:#e74c3c}#vnetwork-player .live-button{transition:all ease-in-out .4s}#vnetwork-player .live-button-behind:hover{color:#e74c3c}#vnetwork-player .live-button-synced{cursor:default;opacity:.65;pointer-events:none}#vnetwork-player .scale-in-bl{-webkit-animation:scale-in-bl .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;animation:scale-in-bl .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}@keyframes width{to{width:100px}from{width:0px}}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,200;stroke-dashoffset:-35px}100%{stroke-dashoffset:-125px}}@keyframes fadeIn{to{opacity:1}from{opacity:0}}@-webkit-keyframes scale-in-bl{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0% 100%;transform-origin:0% 100%;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0% 100%;transform-origin:0% 100%;opacity:1}}@keyframes scale-in-bl{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0% 100%;transform-origin:0% 100%;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0% 100%;transform-origin:0% 100%;opacity:1}}@media only screen and (min-width: 768px){#vnetwork-player .settings-container{position:absolute;background-color:rgba(0,0,0,0);left:auto;top:auto;bottom:40px;width:300px}#vnetwork-player .tooltip-container:hover .tooltip{display:block}#vnetwork-player .show .tooltip{display:block}#vnetwork-player .error-image{width:200px}#vnetwork-player .volume{display:block}}@media only screen and (max-width: 767px){#vnetwork-player .skip-segment-button{right:12px;bottom:58px;font-size:13px;padding:9px 12px}#vnetwork-player .video-meta-overlay{top:12px;left:12px;right:12px;max-width:calc(100% - 24px)}#vnetwork-player .video-meta-title{font-size:14px}#vnetwork-player .video-meta-description{font-size:12px;-webkit-line-clamp:1}}