x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-26 00:31:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

分离template

Browse Source
This commit is contained in:
Harvey Zack committed 2018-11-28 12:15:33 +08:00
1 parent e96146b19f
commit 3fb41eedf7
39 files changed
+277 -256
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/lab/css/artplayer.css
+3 -3
View File
@@ -1,17 +1,17 @@
.artplayer-video-player{position:relative;width:100%;height:100%;overflow:hidden;outline:0;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation;-ms-high-contrast-adjust:none}.artplayer-video-player *{box-sizing:border-box}.artplayer-video-player .art-icon{display:inline-block;line-height:1.5}.artplayer-video-player .art-icon svg{fill:#fff}
.artplayer-video-player .artplayer-subtitle{position:absolute;z-index:20;bottom:40px;width:100%;padding:0 20px;text-align:center;color:#fff;text-shadow:.5px .5px .5px rgba(0,0,0,.5);font-size:20px;pointer-events:none}.artplayer-video-player .artplayer-subtitle p{margin:5px 0} .artplayer-video-player .artplayer-subtitle{position:absolute;z-index:20;bottom:40px;width:100%;padding:0 20px;text-align:center;color:#fff;text-shadow:.5px .5px .5px rgba(0,0,0,.5);font-size:20px;pointer-events:none}.artplayer-video-player .artplayer-subtitle p{margin:5px 0}
.artplayer-video-player .artplayer-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;outline:0;cursor:pointer} .artplayer-video-player .artplayer-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;outline:0;cursor:pointer}
.artplayer-video-player .artplayer-layers{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none}.artplayer-video-player .artplayer-layers .art-layer{pointer-events:all} .artplayer-video-player{position:relative;width:100%;height:100%;overflow:hidden;outline:0;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation;-ms-high-contrast-adjust:none}.artplayer-video-player *{box-sizing:border-box}.artplayer-video-player .art-icon{display:inline-block;line-height:1.5}.artplayer-video-player .art-icon svg{fill:#fff}
.artplayer-video-player .artplayer-mask{display:none;position:absolute;z-index:40;left:0;top:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none}.artplayer-video-player .artplayer-mask .art-playBig{position:absolute;right:30px;bottom:65px;opacity:.6} .artplayer-video-player .artplayer-mask{display:none;position:absolute;z-index:40;left:0;top:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none}.artplayer-video-player .artplayer-mask .art-playBig{position:absolute;right:30px;bottom:65px;opacity:.6}
.artplayer-video-player .artplayer-loading{display:none;position:absolute;z-index:60;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center;pointer-events:none} .artplayer-video-player .artplayer-loading{display:none;position:absolute;z-index:60;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center;pointer-events:none}
.artplayer-video-player .artplayer-layers{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none}.artplayer-video-player .artplayer-layers .art-layer{pointer-events:all}
.artplayer-video-player .artplayer-notice{display:none;font-size:14px;position:absolute;z-index:70;left:0;top:0;padding:10px;width:100%;pointer-events:none}.artplayer-video-player .artplayer-notice .artplayer-notice-inner{display:inline-block;padding:5px 10px;color:#fff;background:rgba(0,0,0,.6);border-radius:3px} .artplayer-video-player .artplayer-notice{display:none;font-size:14px;position:absolute;z-index:70;left:0;top:0;padding:10px;width:100%;pointer-events:none}.artplayer-video-player .artplayer-notice .artplayer-notice-inner{display:inline-block;padding:5px 10px;color:#fff;background:rgba(0,0,0,.6);border-radius:3px}
.artplayer-video-player .artplayer-contextmenu{display:none;position:absolute;z-index:110;left:0;top:0;min-width:200px;padding:5px 0;background:rgba(0,0,0,.8);border-radius:3px}.artplayer-video-player .artplayer-contextmenu .art-contextmenu{cursor:pointer;font-size:13px;display:block;color:#fff;padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 2px rgba(0,0,0,.5);border-bottom:1px solid hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-contextmenu a{color:#fff;text-decoration:none}.artplayer-video-player .artplayer-contextmenu .art-contextmenu span{display:inline-block;padding:0 7px}.artplayer-video-player .artplayer-contextmenu .art-contextmenu span.current,.artplayer-video-player .artplayer-contextmenu .art-contextmenu span:hover{color:#00c9ff}.artplayer-video-player .artplayer-contextmenu .art-contextmenu:hover{background-color:hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-contextmenu:last-child{border-bottom:none} .artplayer-video-player .artplayer-contextmenu{display:none;position:absolute;z-index:110;left:0;top:0;min-width:200px;padding:5px 0;background:rgba(0,0,0,.8);border-radius:3px}.artplayer-video-player .artplayer-contextmenu .art-contextmenu{cursor:pointer;font-size:13px;display:block;color:#fff;padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 2px rgba(0,0,0,.5);border-bottom:1px solid hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-contextmenu a{color:#fff;text-decoration:none}.artplayer-video-player .artplayer-contextmenu .art-contextmenu span{display:inline-block;padding:0 7px}.artplayer-video-player .artplayer-contextmenu .art-contextmenu span.current,.artplayer-video-player .artplayer-contextmenu .art-contextmenu span:hover{color:#00c9ff}.artplayer-video-player .artplayer-contextmenu .art-contextmenu:hover{background-color:hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-contextmenu:last-child{border-bottom:none}
.artplayer-video-player .artplayer-bottom{position:absolute;z-index:50;left:0;right:0;bottom:0;height:100px;padding:60px 10px 0;opacity:0;visibility:hidden;transition:all .2s ease-in-out;pointer-events:none;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.artplayer-video-player .artplayer-bottom .artplayer-progress{position:relative;pointer-events:all}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress{position:relative;height:5px;padding:1px 0;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner{position:relative;height:100%;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-loaded{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;height:100%;width:0;background:hsla(0,0%,100%,.4)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-played{position:absolute;z-index:20;left:0;top:0;right:0;bottom:0;height:100%;width:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;height:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span{display:inline-block;position:absolute;left:0;top:0;width:7px;height:3px;background:#fff;border-radius:3px}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator{display:none;position:absolute;z-index:40;top:-5px;left:-6.5px;width:13px;height:13px;border-radius:50%}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator.art-show-indicator{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-tip{display:none;position:absolute;z-index:50;top:-25px;left:0;height:20px;padding:0 5px;line-height:20px;color:#fff;font-size:12px;text-align:center;background:rgba(0,0,0,.7);border-radius:3px;font-weight:700}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-indicator,.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-tip{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-thumbnails{display:none;position:absolute;bottom:8px;left:0;pointer-events:none;background-color:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-bottom .artplayer-controls{position:relative;pointer-events:all;display:flex;align-items:center;justify-content:space-between;height:36px}.artplayer-video-player .artplayer-bottom .artplayer-controls .artplayer-controls-left,.artplayer-video-player .artplayer-bottom .artplayer-controls .artplayer-controls-right{display:flex}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control{opacity:.9;font-size:12px;height:36px;line-height:36px;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control .art-icon{display:flex;align-items:center;justify-content:center;float:left;height:36px;width:36px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control:hover{opacity:1}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel{position:relative;float:left;width:0;height:100%;transition:margin .2s cubic-bezier(.4,0,1,1),width .2s cubic-bezier(.4,0,1,1);overflow:hidden}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:12px;margin-top:-6px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before{left:-54px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after{left:6px;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after,.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before{content:"";position:absolute;display:block;top:50%;height:3px;margin-top:-2px;width:60px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume:Line truncated .artplayer-video-player .artplayer-bottom{position:absolute;z-index:50;left:0;right:0;bottom:0;height:100px;padding:60px 10px 0;opacity:0;visibility:hidden;transition:all .2s ease-in-out;pointer-events:none;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.artplayer-video-player .artplayer-bottom .artplayer-progress{position:relative;pointer-events:all}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress{position:relative;height:5px;padding:1px 0;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner{position:relative;height:100%;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-loaded{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;height:100%;width:0;background:hsla(0,0%,100%,.4)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-played{position:absolute;z-index:20;left:0;top:0;right:0;bottom:0;height:100%;width:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;height:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span{display:inline-block;position:absolute;left:0;top:0;width:7px;height:3px;background:#fff;border-radius:3px}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator{display:none;position:absolute;z-index:40;top:-5px;left:-6.5px;width:13px;height:13px;border-radius:50%}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator.art-show-indicator{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-tip{display:none;position:absolute;z-index:50;top:-25px;left:0;height:20px;padding:0 5px;line-height:20px;color:#fff;font-size:12px;text-align:center;background:rgba(0,0,0,.7);border-radius:3px;font-weight:700}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-indicator,.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-tip{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-thumbnails{display:none;position:absolute;bottom:8px;left:0;pointer-events:none;background-color:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-bottom .artplayer-controls{position:relative;pointer-events:all;display:flex;align-items:center;justify-content:space-between;height:36px}.artplayer-video-player .artplayer-bottom .artplayer-controls .artplayer-controls-left,.artplayer-video-player .artplayer-bottom .artplayer-controls .artplayer-controls-right{display:flex}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control{opacity:.9;font-size:12px;height:36px;line-height:36px;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control .art-icon{display:flex;align-items:center;justify-content:center;float:left;height:36px;width:36px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control:hover{opacity:1}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel{position:relative;float:left;width:0;height:100%;transition:margin .2s cubic-bezier(.4,0,1,1),width .2s cubic-bezier(.4,0,1,1);overflow:hidden}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:12px;margin-top:-6px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before{left:-54px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after{left:6px;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after,.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before{content:"";position:absolute;display:block;top:50%;height:3px;margin-top:-2px;width:60px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume:Line truncated
.artplayer-video-player.artplayer-hide-cursor *{cursor:none!important} .artplayer-video-player.artplayer-hide-cursor *{cursor:none!important}
.artplayer-video-player .artplayer-info{display:none;position:absolute;left:10px;top:10px;z-index:90;width:350px;min-height:150px;padding:10px;color:#fff;font-size:12px;font-family:Noto Sans CJK SC DemiLight,Roboto,Segoe UI,Tahoma,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;background:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-info .art-info-item{display:flex;margin-bottom:5px}.artplayer-video-player .artplayer-info .art-info-item .art-info-title{width:100px;text-align:right}.artplayer-video-player .artplayer-info .art-info-item .art-info-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:5px}.artplayer-video-player .artplayer-info .artplayer-info-close{position:absolute;top:5px;right:5px;cursor:pointer} .artplayer-video-player .artplayer-info{display:none;position:absolute;left:10px;top:10px;z-index:90;width:350px;min-height:150px;padding:10px;color:#fff;font-size:12px;font-family:Noto Sans CJK SC DemiLight,Roboto,Segoe UI,Tahoma,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;background:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-info .art-info-item{display:flex;margin-bottom:5px}.artplayer-video-player .artplayer-info .art-info-item .art-info-title{width:100px;text-align:right}.artplayer-video-player .artplayer-info .art-info-item .art-info-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:5px}.artplayer-video-player .artplayer-info .artplayer-info-close{position:absolute;top:5px;right:5px;cursor:pointer}
.artplayer-video-player .artplayer-setting{display:none;position:absolute;z-index:80;left:0;top:0;height:100%;width:100%;align-items:center;justify-content:center;pointer-events:none}.artplayer-video-player .artplayer-setting .artplayer-setting-inner{position:relative;width:300px;height:250px;font-size:12px;background:rgba(0,0,0,.8);border-radius:3px;pointer-events:all;overflow:hidden}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body{overflow-y:auto;width:100%;height:100%}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting{border-bottom:1px solid hsla(0,0%,100%,.1);padding:12px 20px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-header{color:#fff;margin-bottom:10px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-body{color:hsla(0,0%,100%,.8)}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-close{position:absolute;top:0;right:0;width:20px;height:20px;line-height:20px;text-align:center;color:hsla(0,0%,100%,.8);background:rgba(0,0,0,.5);font-size:20px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns{display:flex;margin-left:-4px;margin-right:-4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn{flex:1;padding:0 4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn span{display:block;height:20px;line-height:20px;text-align:center;color:#fff;background:hsla(0,0%,100%,.3);border-radius:2px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn.current span,.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn:hover span{color:#fff;background:#00a1d6} .artplayer-video-player .artplayer-setting{display:none;position:absolute;z-index:80;left:0;top:0;height:100%;width:100%;align-items:center;justify-content:center;pointer-events:none}.artplayer-video-player .artplayer-setting .artplayer-setting-inner{position:relative;width:300px;height:250px;font-size:12px;background:rgba(0,0,0,.8);border-radius:3px;pointer-events:all;overflow:hidden}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body{overflow-y:auto;width:100%;height:100%}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting{border-bottom:1px solid hsla(0,0%,100%,.1);padding:12px 20px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-header{color:#fff;margin-bottom:10px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-body{color:hsla(0,0%,100%,.8)}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-close{position:absolute;top:0;right:0;width:20px;height:20px;line-height:20px;text-align:center;color:hsla(0,0%,100%,.8);background:rgba(0,0,0,.5);font-size:20px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns{display:flex;margin-left:-4px;margin-right:-4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn{flex:1;padding:0 4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn span{display:block;height:20px;line-height:20px;text-align:center;color:#fff;background:hsla(0,0%,100%,.3);border-radius:2px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn.current span,.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn:hover span{color:#fff;background:#00a1d6}
.artplayer-video-player.artplayer-web-fullscreen{position:fixed;z-index:9999;width:100%;height:100%;left:0;top:0;right:0;bottom:0}
.artplayer-video-player[data-aspect-ratio] video{box-sizing:content-box;-o-object-fit:fill;object-fit:fill} .artplayer-video-player[data-aspect-ratio] video{box-sizing:content-box;-o-object-fit:fill;object-fit:fill}
.artplayer-video-player.artplayer-web-fullscreen{position:fixed;z-index:9999;width:100%;height:100%;left:0;top:0;right:0;bottom:0}
.artplayer-video-player .artplayer-pip-header{display:none;position:absolute;z-index:100;left:0;top:0;right:0;height:35px;line-height:35px;color:#fff;background:rgba(0,0,0,.5);align-items:center;justify-content:space-between;opacity:0;visibility:hidden;transition:all .2s ease-in-out}.artplayer-video-player .artplayer-pip-header .artplayer-pip-title{flex:1;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:move}.artplayer-video-player .artplayer-pip-header .artplayer-pip-close{width:35px;text-align:center;font-size:22px;cursor:pointer}.artplayer-video-player.is-dragging{opacity:.7}.artplayer-video-player.artplayer-pip{position:fixed;z-index:9999;right:20px;bottom:20px;width:400px;height:225px;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 3px 6px 0 rgba(0,0,0,.2)}.artplayer-video-player.artplayer-pip .artplayer-pip-header{display:flex}.artplayer-video-player.artplayer-pip.artplayer-hover .artplayer-pip-header{opacity:1;visibility:visible}.artplayer-video-player.artplayer-pip .artplayer-mask{display:flex;align-items:center;justify-content:center}.artplayer-video-player.artplayer-pip .artplayer-mask .art-icon-playBig{position:static}.artplayer-video-player.artplayer-pip .artplayer-bottom,.artplayer-video-player.artplayer-pip .artplayer-contextmenu,.artplayer-video-player.artplayer-pip .artplayer-danmu,.artplayer-video-player.artplayer-pip .artplayer-info,.artplayer-video-player.artplayer-pip .artplayer-layers,.artplayer-video-player.artplayer-pip .artplayer-notice,.artplayer-video-player.artplayer-pip .artplayer-setting,.artplayer-video-player.artplayer-pip .artplayer-subtitle{display:none!important} .artplayer-video-player .artplayer-pip-header{display:none;position:absolute;z-index:100;left:0;top:0;right:0;height:35px;line-height:35px;color:#fff;background:rgba(0,0,0,.5);align-items:center;justify-content:space-between;opacity:0;visibility:hidden;transition:all .2s ease-in-out}.artplayer-video-player .artplayer-pip-header .artplayer-pip-title{flex:1;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:move}.artplayer-video-player .artplayer-pip-header .artplayer-pip-close{width:35px;text-align:center;font-size:22px;cursor:pointer}.artplayer-video-player.is-dragging{opacity:.7}.artplayer-video-player.artplayer-pip{position:fixed;z-index:9999;right:20px;bottom:20px;width:400px;height:225px;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 3px 6px 0 rgba(0,0,0,.2)}.artplayer-video-player.artplayer-pip .artplayer-pip-header{display:flex}.artplayer-video-player.artplayer-pip.artplayer-hover .artplayer-pip-header{opacity:1;visibility:visible}.artplayer-video-player.artplayer-pip .artplayer-mask{display:flex;align-items:center;justify-content:center}.artplayer-video-player.artplayer-pip .artplayer-mask .art-icon-playBig{position:static}.artplayer-video-player.artplayer-pip .artplayer-bottom,.artplayer-video-player.artplayer-pip .artplayer-contextmenu,.artplayer-video-player.artplayer-pip .artplayer-danmu,.artplayer-video-player.artplayer-pip .artplayer-info,.artplayer-video-player.artplayer-pip .artplayer-layers,.artplayer-video-player.artplayer-pip .artplayer-notice,.artplayer-video-player.artplayer-pip .artplayer-setting,.artplayer-video-player.artplayer-pip .artplayer-subtitle{display:none!important}
.artplayer-auto-size{display:flex;align-items:center;justify-content:center} .artplayer-auto-size{display:flex;align-items:center;justify-content:center}
.artplayer-video-player[data-flip=horizontal] .artplayer-video{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.artplayer-video-player[data-flip=vertical] .artplayer-video{-webkit-transform:scaleY(-1);transform:scaleY(-1)} .artplayer-video-player[data-flip=horizontal] .artplayer-video{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.artplayer-video-player[data-flip=vertical] .artplayer-video{-webkit-transform:scaleY(-1);transform:scaleY(-1)}
docs/lab/js/artplayer.js
+159 -146
View File
@@ -747,36 +747,71 @@
}); });
}; };
var Template = function Template(art) { var Template =
classCallCheck(this, Template); /*#__PURE__*/
function () {
function Template(art) {
var _this = this;
var refs = art.refs; classCallCheck(this, Template);
refs.$container.innerHTML = "\n <div class=\"artplayer-video-player\">\n <video data-index=\"10\" class=\"artplayer-video\"></video>\n <div data-index=\"20\" class=\"artplayer-subtitle\"></div>\n <div data-index=\"30\" class=\"artplayer-layers\"></div>\n <div data-index=\"40\" class=\"artplayer-mask\"></div>\n <div data-index=\"50\" class=\"artplayer-bottom\">\n <div class=\"artplayer-progress\"></div>\n <div class=\"artplayer-controls\">\n <div class=\"artplayer-controls-left\"></div>\n <div class=\"artplayer-controls-right\"></div>\n </div>\n </div>\n <div data-index=\"60\" class=\"artplayer-loading\"></div>\n <div data-index=\"70\" class=\"artplayer-notice\">\n <div class=\"artplayer-notice-inner\"></div>\n </div>\n <div data-index=\"80\" class=\"artplayer-setting\">\n <div class=\"artplayer-setting-inner\">\n <div class=\"artplayer-setting-body\"></div>\n <div class=\"artplayer-setting-close\">\xD7</div>\n </div>\n </div>\n <div data-index=\"90\" class=\"artplayer-info\">\n <div class=\"artplayer-info-panel\"></div>\n <div class=\"artplayer-info-close\">[x]</div>\n </div>\n <div data-index=\"100\" class=\"artplayer-pip-header\">\n <div class=\"artplayer-pip-title\"></div>\n <div class=\"artplayer-pip-close\">\xD7</div>\n </div>\n <div data-index=\"110\" class=\"artplayer-contextmenu\"></div>\n </div>\n ";
refs.$player = refs.$container.querySelector('.artplayer-video-player'); if (art.option.container instanceof Element) {
refs.$video = refs.$container.querySelector('.artplayer-video'); this.$container = this.option.container;
refs.$subtitle = refs.$container.querySelector('.artplayer-subtitle'); } else {
refs.$bottom = refs.$container.querySelector('.artplayer-bottom'); this.$container = document.querySelector(art.option.container);
refs.$progress = refs.$container.querySelector('.artplayer-progress'); }
refs.$controls = refs.$container.querySelector('.artplayer-controls');
refs.$controlsLeft = refs.$container.querySelector('.artplayer-controls-left'); if (art.constructor.instances.some(function (art) {
refs.$controlsRight = refs.$container.querySelector('.artplayer-controls-right'); return art.template.$container === _this.$container;
refs.$layers = refs.$container.querySelector('.artplayer-layers'); })) {
refs.$loading = refs.$container.querySelector('.artplayer-loading'); errorHandle(false, 'Cannot mount multiple instances on the same dom element');
refs.$notice = refs.$container.querySelector('.artplayer-notice'); }
refs.$noticeInner = refs.$container.querySelector('.artplayer-notice-inner');
refs.$mask = refs.$container.querySelector('.artplayer-mask'); this.init();
refs.$setting = refs.$container.querySelector('.artplayer-setting'); }
refs.$settingInner = refs.$container.querySelector('.artplayer-setting-inner');
refs.$settingBody = refs.$container.querySelector('.artplayer-setting-body'); createClass(Template, [{
refs.$settingClose = refs.$container.querySelector('.artplayer-setting-close'); key: "init",
refs.$info = refs.$container.querySelector('.artplayer-info'); value: function init() {
refs.$infoPanel = refs.$container.querySelector('.artplayer-info-panel'); this.$container.innerHTML = "\n <div class=\"artplayer-video-player\">\n <video data-index=\"10\" class=\"artplayer-video\"></video>\n <div data-index=\"20\" class=\"artplayer-subtitle\"></div>\n <div data-index=\"30\" class=\"artplayer-layers\"></div>\n <div data-index=\"40\" class=\"artplayer-mask\"></div>\n <div data-index=\"50\" class=\"artplayer-bottom\">\n <div class=\"artplayer-progress\"></div>\n <div class=\"artplayer-controls\">\n <div class=\"artplayer-controls-left\"></div>\n <div class=\"artplayer-controls-right\"></div>\n </div>\n </div>\n <div data-index=\"60\" class=\"artplayer-loading\"></div>\n <div data-index=\"70\" class=\"artplayer-notice\">\n <div class=\"artplayer-notice-inner\"></div>\n </div>\n <div data-index=\"80\" class=\"artplayer-setting\">\n <div class=\"artplayer-setting-inner\">\n <div class=\"artplayer-setting-body\"></div>\n <div class=\"artplayer-setting-close\">\xD7</div>\n </div>\n </div>\n <div data-index=\"90\" class=\"artplayer-info\">\n <div class=\"artplayer-info-panel\"></div>\n <div class=\"artplayer-info-close\">[x]</div>\n </div>\n <div data-index=\"100\" class=\"artplayer-pip-header\">\n <div class=\"artplayer-pip-title\"></div>\n <div class=\"artplayer-pip-close\">\xD7</div>\n </div>\n <div data-index=\"110\" class=\"artplayer-contextmenu\"></div>\n </div>\n ";
refs.$infoClose = refs.$container.querySelector('.artplayer-info-close'); this.$player = this.$container.querySelector('.artplayer-video-player');
refs.$pipHeader = refs.$container.querySelector('.artplayer-pip-header'); this.$video = this.$container.querySelector('.artplayer-video');
refs.$pipTitle = refs.$container.querySelector('.artplayer-pip-title'); this.$subtitle = this.$container.querySelector('.artplayer-subtitle');
refs.$pipClose = refs.$container.querySelector('.artplayer-pip-close'); this.$bottom = this.$container.querySelector('.artplayer-bottom');
refs.$contextmenu = refs.$container.querySelector('.artplayer-contextmenu'); this.$progress = this.$container.querySelector('.artplayer-progress');
}; this.$controls = this.$container.querySelector('.artplayer-controls');
this.$controlsLeft = this.$container.querySelector('.artplayer-controls-left');
this.$controlsRight = this.$container.querySelector('.artplayer-controls-right');
this.$layers = this.$container.querySelector('.artplayer-layers');
this.$loading = this.$container.querySelector('.artplayer-loading');
this.$notice = this.$container.querySelector('.artplayer-notice');
this.$noticeInner = this.$container.querySelector('.artplayer-notice-inner');
this.$mask = this.$container.querySelector('.artplayer-mask');
this.$setting = this.$container.querySelector('.artplayer-setting');
this.$settingInner = this.$container.querySelector('.artplayer-setting-inner');
this.$settingBody = this.$container.querySelector('.artplayer-setting-body');
this.$settingClose = this.$container.querySelector('.artplayer-setting-close');
this.$info = this.$container.querySelector('.artplayer-info');
this.$infoPanel = this.$container.querySelector('.artplayer-info-panel');
this.$infoClose = this.$container.querySelector('.artplayer-info-close');
this.$pipHeader = this.$container.querySelector('.artplayer-pip-header');
this.$pipTitle = this.$container.querySelector('.artplayer-pip-title');
this.$pipClose = this.$container.querySelector('.artplayer-pip-close');
this.$contextmenu = this.$container.querySelector('.artplayer-contextmenu');
}
}, {
key: "destroy",
value: function destroy(removeHtml) {
if (removeHtml) {
this.$container.innerHTML = '';
} else {
this.refs.$player.classList.add('artplayer-destroy');
}
}
}]);
return Template;
}();
var i18nMap = { var i18nMap = {
'zh-cn': { 'zh-cn': {
@@ -884,7 +919,7 @@
var _art$option = art.option, var _art$option = art.option,
type = _art$option.type, type = _art$option.type,
customType = _art$option.customType, customType = _art$option.customType,
$video = art.refs.$video; $video = art.template.$video;
Object.defineProperty(player, 'returnUrl', { Object.defineProperty(player, 'returnUrl', {
writable: true, writable: true,
value: function value(url) { value: function value(url) {
@@ -911,7 +946,7 @@
function attrInit(art, player) { function attrInit(art, player) {
var option = art.option, var option = art.option,
$video = art.refs.$video; $video = art.template.$video;
Object.keys(option.moreVideoAttr).forEach(function (key) { Object.keys(option.moreVideoAttr).forEach(function (key) {
$video[key] = option.moreVideoAttr[key]; $video[key] = option.moreVideoAttr[key];
}); });
@@ -940,9 +975,9 @@
function eventInit(art, player) { function eventInit(art, player) {
var option = art.option, var option = art.option,
proxy = art.events.proxy, proxy = art.events.proxy,
_art$refs = art.refs, _art$template = art.template,
$player = _art$refs.$player, $player = _art$template.$player,
$video = _art$refs.$video, $video = _art$template.$video,
i18n = art.i18n, i18n = art.i18n,
notice = art.notice; notice = art.notice;
var firstCanplay = false; var firstCanplay = false;
@@ -1061,7 +1096,7 @@
} }
function playMix(art, player) { function playMix(art, player) {
var $video = art.refs.$video, var $video = art.template.$video,
i18n = art.i18n, i18n = art.i18n,
notice = art.notice, notice = art.notice,
mutex = art.option.mutex; mutex = art.option.mutex;
@@ -1091,7 +1126,7 @@
} }
function pauseMin(art, player) { function pauseMin(art, player) {
var $video = art.refs.$video, var $video = art.template.$video,
i18n = art.i18n, i18n = art.i18n,
notice = art.notice; notice = art.notice;
Object.defineProperty(player, 'pause', { Object.defineProperty(player, 'pause', {
@@ -1133,7 +1168,7 @@
} }
function volumeMix(art, player) { function volumeMix(art, player) {
var $video = art.refs.$video, var $video = art.template.$video,
i18n = art.i18n, i18n = art.i18n,
notice = art.notice, notice = art.notice,
storage = art.storage; storage = art.storage;
@@ -1168,10 +1203,10 @@
function currentTimeMix(art, player) { function currentTimeMix(art, player) {
Object.defineProperty(player, 'currentTime', { Object.defineProperty(player, 'currentTime', {
get: function get() { get: function get() {
return art.refs.$video.currentTime || 0; return art.template.$video.currentTime || 0;
}, },
set: function set(currentTime) { set: function set(currentTime) {
art.refs.$video.currentTime = currentTime; art.template.$video.currentTime = currentTime;
} }
}); });
} }
@@ -1179,7 +1214,7 @@
function durationMix(art, player) { function durationMix(art, player) {
Object.defineProperty(player, 'duration', { Object.defineProperty(player, 'duration', {
get: function get() { get: function get() {
return art.refs.$video.duration || 0; return art.template.$video.duration || 0;
} }
}); });
} }
@@ -1213,9 +1248,9 @@
} }
function playbackRateMix(art, player) { function playbackRateMix(art, player) {
var _art$refs = art.refs, var _art$template = art.template,
$video = _art$refs.$video, $video = _art$template.$video,
$player = _art$refs.$player, $player = _art$template.$player,
i18n = art.i18n, i18n = art.i18n,
notice = art.notice; notice = art.notice;
Object.defineProperty(player, 'playbackRateState', { Object.defineProperty(player, 'playbackRateState', {
@@ -1260,9 +1295,9 @@
} }
function aspectRatioMix(art, player) { function aspectRatioMix(art, player) {
var _art$refs = art.refs, var _art$template = art.template,
$video = _art$refs.$video, $video = _art$template.$video,
$player = _art$refs.$player, $player = _art$template.$player,
i18n = art.i18n, i18n = art.i18n,
notice = art.notice; notice = art.notice;
Object.defineProperty(player, 'aspectRatioState', { Object.defineProperty(player, 'aspectRatioState', {
@@ -1335,7 +1370,7 @@
function screenshotMix(art, player) { function screenshotMix(art, player) {
var option = art.option, var option = art.option,
notice = art.notice, notice = art.notice,
$video = art.refs.$video; $video = art.template.$video;
function captureFrame() { function captureFrame() {
var canvas = document.createElement('canvas'); var canvas = document.createElement('canvas');
@@ -1539,7 +1574,7 @@
function fullscreenMix(art, player) { function fullscreenMix(art, player) {
var notice = art.notice, var notice = art.notice,
destroyEvents = art.events.destroyEvents, destroyEvents = art.events.destroyEvents,
$player = art.refs.$player; $player = art.template.$player;
var screenfullChange = function screenfullChange() { var screenfullChange = function screenfullChange() {
art.emit('fullscreen', screenfull.isFullscreen); art.emit('fullscreen', screenfull.isFullscreen);
@@ -1593,7 +1628,7 @@
} }
function fullscreenWebMix(art, player) { function fullscreenWebMix(art, player) {
var $player = art.refs.$player; var $player = art.template.$player;
Object.defineProperty(player, 'fullscreenWebState', { Object.defineProperty(player, 'fullscreenWebState', {
get: function get() { get: function get() {
return $player.classList.contains('artplayer-web-fullscreen'); return $player.classList.contains('artplayer-web-fullscreen');
@@ -2952,7 +2987,7 @@
function nativePip(art, player) { function nativePip(art, player) {
var notice = art.notice, var notice = art.notice,
$video = art.refs.$video, $video = art.template.$video,
proxy = art.events.proxy; proxy = art.events.proxy;
$video.disablePictureInPicture = false; $video.disablePictureInPicture = false;
Object.defineProperty(player, 'pipState', { Object.defineProperty(player, 'pipState', {
@@ -2996,10 +3031,10 @@
function customPip(art, player) { function customPip(art, player) {
var option = art.option, var option = art.option,
i18n = art.i18n, i18n = art.i18n,
_art$refs = art.refs, _art$template = art.template,
$player = _art$refs.$player, $player = _art$template.$player,
$pipClose = _art$refs.$pipClose, $pipClose = _art$template.$pipClose,
$pipTitle = _art$refs.$pipTitle, $pipTitle = _art$template.$pipTitle,
_art$events = art.events, _art$events = art.events,
destroyEvents = _art$events.destroyEvents, destroyEvents = _art$events.destroyEvents,
proxy = _art$events.proxy; proxy = _art$events.proxy;
@@ -3078,7 +3113,7 @@
function seekMix$1(art, player) { function seekMix$1(art, player) {
Object.defineProperty(player, 'loaded', { Object.defineProperty(player, 'loaded', {
get: function get() { get: function get() {
return art.refs.$video.buffered.length ? art.refs.$video.buffered.end(art.refs.$video.buffered.length - 1) / art.refs.$video.duration : 0; return art.template.$video.buffered.length ? art.template.$video.buffered.end(art.template.$video.buffered.length - 1) / art.template.$video.duration : 0;
} }
}); });
} }
@@ -3086,16 +3121,16 @@
function seekMix$2(art, player) { function seekMix$2(art, player) {
Object.defineProperty(player, 'played', { Object.defineProperty(player, 'played', {
get: function get() { get: function get() {
return art.refs.$video.currentTime / art.refs.$video.duration; return art.template.$video.currentTime / art.template.$video.duration;
} }
}); });
} }
function resizeMix(art, player) { function resizeMix(art, player) {
var _art$refs = art.refs, var _art$template = art.template,
$container = _art$refs.$container, $container = _art$template.$container,
$player = _art$refs.$player, $player = _art$template.$player,
$video = _art$refs.$video; $video = _art$template.$video;
Object.defineProperty(player, 'autoSizeState', { Object.defineProperty(player, 'autoSizeState', {
get: function get() { get: function get() {
return $container.classList.contains('artplayer-auto-size'); return $container.classList.contains('artplayer-auto-size');
@@ -3141,20 +3176,20 @@
function flipMix(art, player) { function flipMix(art, player) {
Object.defineProperty(player, 'flipState', { Object.defineProperty(player, 'flipState', {
get: function get() { get: function get() {
return art.refs.$player.dataset.flip; return art.template.$player.dataset.flip;
} }
}); });
Object.defineProperty(player, 'flip', { Object.defineProperty(player, 'flip', {
value: function value(flip) { value: function value(flip) {
var flipList = ['normal', 'horizontal', 'vertical']; var flipList = ['normal', 'horizontal', 'vertical'];
errorHandle(flipList.includes(flip), "'flip' only accept ".concat(flipList.toString(), " as parameters")); errorHandle(flipList.includes(flip), "'flip' only accept ".concat(flipList.toString(), " as parameters"));
art.refs.$player.dataset.flip = flip; art.template.$player.dataset.flip = flip;
art.emit('flipChange', flip); art.emit('flipChange', flip);
} }
}); });
Object.defineProperty(player, 'flipRemove', { Object.defineProperty(player, 'flipRemove', {
value: function value() { value: function value() {
delete art.refs.$player.dataset.flip; delete art.template.$player.dataset.flip;
art.emit('flipRemove'); art.emit('flipRemove');
} }
}); });
@@ -3581,7 +3616,7 @@
} }
function getPosFromEvent(art, event) { function getPosFromEvent(art, event) {
var $progress = art.refs.$progress, var $progress = art.template.$progress,
player = art.player; player = art.player;
var _$progress$getBoundin = $progress.getBoundingClientRect(), var _$progress$getBoundin = $progress.getBoundingClientRect(),
@@ -3866,7 +3901,7 @@
return function (art) { return function (art) {
return objectSpread({}, controlOption, { return objectSpread({}, controlOption, {
mounted: function mounted($control) { mounted: function mounted($control) {
var $progress = art.refs.$progress, var $progress = art.template.$progress,
_art$events = art.events, _art$events = art.events,
proxy = _art$events.proxy, proxy = _art$events.proxy,
loadImg = _art$events.loadImg; loadImg = _art$events.loadImg;
@@ -4074,10 +4109,10 @@
key: "add", key: "add",
value: function add(item, callback) { value: function add(item, callback) {
var option = typeof item === 'function' ? item(this.art) : item; var option = typeof item === 'function' ? item(this.art) : item;
var _this$art$refs = this.art.refs, var _this$art$template = this.art.template,
$progress = _this$art$refs.$progress, $progress = _this$art$template.$progress,
$controlsLeft = _this$art$refs.$controlsLeft, $controlsLeft = _this$art$template.$controlsLeft,
$controlsRight = _this$art$refs.$controlsRight; $controlsRight = _this$art$template.$controlsRight;
var parent; var parent;
switch (option.position) { switch (option.position) {
@@ -4104,13 +4139,13 @@
}, { }, {
key: "show", key: "show",
value: function show() { value: function show() {
var $player = this.art.refs.$player; var $player = this.art.template.$player;
$player.classList.add('artplayer-controls-show'); $player.classList.add('artplayer-controls-show');
} }
}, { }, {
key: "hide", key: "hide",
value: function hide() { value: function hide() {
var $player = this.art.refs.$player; var $player = this.art.template.$player;
$player.classList.remove('artplayer-controls-show'); $player.classList.remove('artplayer-controls-show');
} }
}]); }]);
@@ -4186,7 +4221,7 @@
function version(menuOption) { function version(menuOption) {
return objectSpread({}, menuOption, { return objectSpread({}, menuOption, {
html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer 1.0.3</a>' html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer 1.0.4</a>'
}); });
} }
@@ -4223,9 +4258,9 @@
var _this$art = this.art, var _this$art = this.art,
option = _this$art.option, option = _this$art.option,
_this$art$refs = _this$art.refs, _this$art$template = _this$art.template,
$player = _this$art$refs.$player, $player = _this$art$template.$player,
$contextmenu = _this$art$refs.$contextmenu, $contextmenu = _this$art$template.$contextmenu,
proxy = _this$art.events.proxy; proxy = _this$art.events.proxy;
this.add(playbackRate({ this.add(playbackRate({
disable: !option.playbackRate, disable: !option.playbackRate,
@@ -4271,15 +4306,15 @@
}, { }, {
key: "add", key: "add",
value: function add(item, callback) { value: function add(item, callback) {
var $contextmenu = this.art.refs.$contextmenu; var $contextmenu = this.art.template.$contextmenu;
component(this.art, this, $contextmenu, item, callback, 'contextmenu'); component(this.art, this, $contextmenu, item, callback, 'contextmenu');
} }
}, { }, {
key: "setPos", key: "setPos",
value: function setPos(event) { value: function setPos(event) {
var _this$art$refs2 = this.art.refs, var _this$art$template2 = this.art.template,
$player = _this$art$refs2.$player, $player = _this$art$template2.$player,
$contextmenu = _this$art$refs2.$contextmenu; $contextmenu = _this$art$template2.$contextmenu;
var mouseX = event.clientX; var mouseX = event.clientX;
var mouseY = event.clientY; var mouseY = event.clientY;
@@ -4310,14 +4345,14 @@
}, { }, {
key: "hide", key: "hide",
value: function hide() { value: function hide() {
var $contextmenu = this.art.refs.$contextmenu; var $contextmenu = this.art.template.$contextmenu;
setStyle($contextmenu, 'display', 'none'); setStyle($contextmenu, 'display', 'none');
this.art.emit('contextmenu:hide', $contextmenu); this.art.emit('contextmenu:hide', $contextmenu);
} }
}, { }, {
key: "show", key: "show",
value: function show() { value: function show() {
var $contextmenu = this.art.refs.$contextmenu; var $contextmenu = this.art.template.$contextmenu;
setStyle($contextmenu, 'display', 'block'); setStyle($contextmenu, 'display', 'block');
this.art.emit('contextmenu:show', $contextmenu); this.art.emit('contextmenu:show', $contextmenu);
} }
@@ -4342,7 +4377,7 @@
var _this = this; var _this = this;
var _this$art = this.art, var _this$art = this.art,
$infoClose = _this$art.refs.$infoClose, $infoClose = _this$art.template.$infoClose,
proxy = _this$art.events.proxy; proxy = _this$art.events.proxy;
proxy($infoClose, 'click', function () { proxy($infoClose, 'click', function () {
_this.hide(); _this.hide();
@@ -4351,9 +4386,9 @@
}, { }, {
key: "show", key: "show",
value: function show() { value: function show() {
var _this$art$refs = this.art.refs, var _this$art$template = this.art.template,
$info = _this$art$refs.$info, $info = _this$art$template.$info,
$infoPanel = _this$art$refs.$infoPanel; $infoPanel = _this$art$template.$infoPanel;
setStyle($info, 'display', 'block'); setStyle($info, 'display', 'block');
if (!$infoPanel.innerHTML) { if (!$infoPanel.innerHTML) {
@@ -4368,7 +4403,7 @@
key: "creatInfo", key: "creatInfo",
value: function creatInfo() { value: function creatInfo() {
var infoHtml = []; var infoHtml = [];
infoHtml.push("\n <div class=\"art-info-item \">\n <div class=\"art-info-title\">Player version:</div>\n <div class=\"art-info-content\">1.0.3</div>\n </div>\n "); infoHtml.push("\n <div class=\"art-info-item \">\n <div class=\"art-info-title\">Player version:</div>\n <div class=\"art-info-content\">1.0.4</div>\n </div>\n ");
infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video url:</div>\n <div class=\"art-info-content\">".concat(this.art.option.url, "</div>\n </div>\n ")); infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video url:</div>\n <div class=\"art-info-content\">".concat(this.art.option.url, "</div>\n </div>\n "));
infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video volume:</div>\n <div class=\"art-info-content\" data-video=\"volume\"></div>\n </div>\n "); infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video volume:</div>\n <div class=\"art-info-content\" data-video=\"volume\"></div>\n </div>\n ");
infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video time:</div>\n <div class=\"art-info-content\" data-video=\"currentTime\"></div>\n </div>\n "); infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video time:</div>\n <div class=\"art-info-content\" data-video=\"currentTime\"></div>\n </div>\n ");
@@ -4379,9 +4414,9 @@
}, { }, {
key: "readInfo", key: "readInfo",
value: function readInfo() { value: function readInfo() {
var _this$art$refs2 = this.art.refs, var _this$art$template2 = this.art.template,
$infoPanel = _this$art$refs2.$infoPanel, $infoPanel = _this$art$template2.$infoPanel,
$video = _this$art$refs2.$video; $video = _this$art$template2.$video;
var types = Array.from($infoPanel.querySelectorAll('[data-video]')); var types = Array.from($infoPanel.querySelectorAll('[data-video]'));
types.forEach(function (item) { types.forEach(function (item) {
var value = $video[item.dataset.video]; var value = $video[item.dataset.video];
@@ -4403,7 +4438,7 @@
}, { }, {
key: "hide", key: "hide",
value: function hide() { value: function hide() {
var $info = this.art.refs.$info; var $info = this.art.template.$info;
setStyle($info, 'display', 'none'); setStyle($info, 'display', 'none');
clearTimeout(this.timer); clearTimeout(this.timer);
this.art.emit('info:hide', $info); this.art.emit('info:hide', $info);
@@ -4436,15 +4471,15 @@
var _this$art = this.art, var _this$art = this.art,
proxy = _this$art.events.proxy, proxy = _this$art.events.proxy,
subtitle = _this$art.option.subtitle, subtitle = _this$art.option.subtitle,
_this$art$refs = _this$art.refs, _this$art$template = _this$art.template,
$video = _this$art$refs.$video, $video = _this$art$template.$video,
$subtitle = _this$art$refs.$subtitle; $subtitle = _this$art$template.$subtitle;
setStyles($subtitle, subtitle.style || {}); setStyles($subtitle, subtitle.style || {});
var $track = document.createElement('track'); var $track = document.createElement('track');
$track.default = true; $track.default = true;
$track.kind = 'metadata'; $track.kind = 'metadata';
$video.appendChild($track); $video.appendChild($track);
this.art.refs.$track = $track; this.art.template.$track = $track;
this.load(subtitle.url).then(function (url) { this.load(subtitle.url).then(function (url) {
$track.src = url; $track.src = url;
@@ -4501,7 +4536,7 @@
key: "show", key: "show",
value: function show() { value: function show() {
var _this$art2 = this.art, var _this$art2 = this.art,
$subtitle = _this$art2.refs.$subtitle, $subtitle = _this$art2.template.$subtitle,
i18n = _this$art2.i18n, i18n = _this$art2.i18n,
notice = _this$art2.notice; notice = _this$art2.notice;
setStyle($subtitle, 'display', 'block'); setStyle($subtitle, 'display', 'block');
@@ -4513,7 +4548,7 @@
key: "hide", key: "hide",
value: function hide() { value: function hide() {
var _this$art3 = this.art, var _this$art3 = this.art,
$subtitle = _this$art3.refs.$subtitle, $subtitle = _this$art3.template.$subtitle,
i18n = _this$art3.i18n, i18n = _this$art3.i18n,
notice = _this$art3.notice; notice = _this$art3.notice;
setStyle($subtitle, 'display', 'none'); setStyle($subtitle, 'display', 'none');
@@ -4535,7 +4570,7 @@
value: function _switch(url) { value: function _switch(url) {
var _this2 = this; var _this2 = this;
var $track = this.art.refs.$track; var $track = this.art.template.$track;
errorHandle($track, 'You need to initialize the subtitle option first.'); errorHandle($track, 'You need to initialize the subtitle option first.');
this.load(url).then(function (url) { this.load(url).then(function (url) {
$track.src = url; $track.src = url;
@@ -4549,7 +4584,7 @@
}(); }();
function clickInit(art, events) { function clickInit(art, events) {
var $player = art.refs.$player; var $player = art.template.$player;
events.proxy(document, ['click', 'contextmenu'], function (event) { events.proxy(document, ['click', 'contextmenu'], function (event) {
if (event.composedPath().indexOf($player) > -1) { if (event.composedPath().indexOf($player) > -1) {
art.isFocus = true; art.isFocus = true;
@@ -4561,7 +4596,7 @@
} }
function hoverInit(art, events) { function hoverInit(art, events) {
var $player = art.refs.$player; var $player = art.template.$player;
events.hover($player, function () { events.hover($player, function () {
$player.classList.add('artplayer-hover'); $player.classList.add('artplayer-hover');
art.emit('hoverenter'); art.emit('hoverenter');
@@ -4572,9 +4607,9 @@
} }
function mousemoveInitInit(art, events) { function mousemoveInitInit(art, events) {
var _art$refs = art.refs, var _art$template = art.template,
$player = _art$refs.$player, $player = _art$template.$player,
$video = _art$refs.$video; $video = _art$template.$video;
var autoHide = debounce(function () { var autoHide = debounce(function () {
$player.classList.add('artplayer-hide-cursor'); $player.classList.add('artplayer-hide-cursor');
$player.classList.remove('artplayer-hover'); $player.classList.remove('artplayer-hover');
@@ -4855,7 +4890,7 @@
function resizeInit(art, events) { function resizeInit(art, events) {
var option = art.option, var option = art.option,
$player = art.refs.$player; $player = art.template.$player;
var resizeObserver = new ResizeObserver_2(function () { var resizeObserver = new ResizeObserver_2(function () {
sleep().then(function () { sleep().then(function () {
if (option.autoSize) { if (option.autoSize) {
@@ -4877,7 +4912,7 @@
} }
function doubleClickInit(art, events) { function doubleClickInit(art, events) {
var $video = art.refs.$video; var $video = art.template.$video;
events.proxy($video, 'dblclick', function () { events.proxy($video, 'dblclick', function () {
art.player.fullscreenToggle(); art.player.fullscreenToggle();
art.emit('dblclick'); art.emit('dblclick');
@@ -5060,20 +5095,20 @@
createClass(Layers, [{ createClass(Layers, [{
key: "add", key: "add",
value: function add(item, callback) { value: function add(item, callback) {
var $layers = this.art.refs.$layers; var $layers = this.art.template.$layers;
component(this.art, this, $layers, item, callback, 'layer'); component(this.art, this, $layers, item, callback, 'layer');
} }
}, { }, {
key: "show", key: "show",
value: function show() { value: function show() {
var $layers = this.art.refs.$layers; var $layers = this.art.template.$layers;
setStyle($layers, 'display', 'block'); setStyle($layers, 'display', 'block');
this.art.emit('layers:show', $layers); this.art.emit('layers:show', $layers);
} }
}, { }, {
key: "hide", key: "hide",
value: function hide() { value: function hide() {
var $layers = this.art.refs.$layers; var $layers = this.art.template.$layers;
setStyle($layers, 'display', 'none'); setStyle($layers, 'display', 'none');
this.art.emit('layers:hide', $layers); this.art.emit('layers:hide', $layers);
} }
@@ -5090,21 +5125,21 @@
this.art = art; this.art = art;
var option = art.option, var option = art.option,
$loading = art.refs.$loading; $loading = art.template.$loading;
append($loading, option.icons.loading || icons.loading); append($loading, option.icons.loading || icons.loading);
} }
createClass(Loading, [{ createClass(Loading, [{
key: "hide", key: "hide",
value: function hide() { value: function hide() {
var $loading = this.art.refs.$loading; var $loading = this.art.template.$loading;
setStyle($loading, 'display', 'none'); setStyle($loading, 'display', 'none');
this.art.emit('loading:hide', $loading); this.art.emit('loading:hide', $loading);
} }
}, { }, {
key: "show", key: "show",
value: function show() { value: function show() {
var $loading = this.art.refs.$loading; var $loading = this.art.template.$loading;
setStyle($loading, 'display', 'flex'); setStyle($loading, 'display', 'flex');
this.art.emit('loading:show', $loading); this.art.emit('loading:show', $loading);
} }
@@ -5130,9 +5165,9 @@
var autoHide = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; var autoHide = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1000; var time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1000;
var _this$art$refs = this.art.refs, var _this$art$template = this.art.template,
$notice = _this$art$refs.$notice, $notice = _this$art$template.$notice,
$noticeInner = _this$art$refs.$noticeInner; $noticeInner = _this$art$template.$noticeInner;
setStyle($notice, 'display', 'block'); setStyle($notice, 'display', 'block');
$noticeInner.innerHTML = msg instanceof Error ? msg.message.trim() : msg; $noticeInner.innerHTML = msg instanceof Error ? msg.message.trim() : msg;
@@ -5148,7 +5183,7 @@
}, { }, {
key: "hide", key: "hide",
value: function hide() { value: function hide() {
var $notice = this.art.refs.$notice; var $notice = this.art.template.$notice;
setStyle($notice, 'display', 'none'); setStyle($notice, 'display', 'none');
this.art.emit('notice:hide', $notice); this.art.emit('notice:hide', $notice);
} }
@@ -5165,7 +5200,7 @@
this.art = art; this.art = art;
var option = art.option, var option = art.option,
$mask = art.refs.$mask; $mask = art.template.$mask;
var $playBig = append($mask, '<div class="art-playBig"></div>'); var $playBig = append($mask, '<div class="art-playBig"></div>');
append($playBig, option.icons.playBig || icons.playBig); append($playBig, option.icons.playBig || icons.playBig);
} }
@@ -5173,14 +5208,14 @@
createClass(Mask, [{ createClass(Mask, [{
key: "show", key: "show",
value: function show() { value: function show() {
var $mask = this.art.refs.$mask; var $mask = this.art.template.$mask;
setStyle($mask, 'display', 'flex'); setStyle($mask, 'display', 'flex');
this.art.emit('mask:show', $mask); this.art.emit('mask:show', $mask);
} }
}, { }, {
key: "hide", key: "hide",
value: function hide() { value: function hide() {
var $mask = this.art.refs.$mask; var $mask = this.art.template.$mask;
setStyle($mask, 'display', 'none'); setStyle($mask, 'display', 'none');
this.art.emit('mask:show', $mask); this.art.emit('mask:show', $mask);
} }
@@ -5240,7 +5275,7 @@
var _this2 = this; var _this2 = this;
var _this$art = this.art, var _this$art = this.art,
$settingClose = _this$art.refs.$settingClose, $settingClose = _this$art.template.$settingClose,
proxy = _this$art.events.proxy; proxy = _this$art.events.proxy;
proxy($settingClose, 'click', function () { proxy($settingClose, 'click', function () {
_this2.hide(); _this2.hide();
@@ -5254,13 +5289,13 @@
}, { }, {
key: "add", key: "add",
value: function add(item, callback) { value: function add(item, callback) {
var $settingBody = this.art.refs.$settingBody; var $settingBody = this.art.template.$settingBody;
component(this.art, this, $settingBody, item, callback, 'setting'); component(this.art, this, $settingBody, item, callback, 'setting');
} }
}, { }, {
key: "show", key: "show",
value: function show() { value: function show() {
var $setting = this.art.refs.$setting; var $setting = this.art.template.$setting;
setStyle($setting, 'display', 'flex'); setStyle($setting, 'display', 'flex');
this.state = true; this.state = true;
this.art.emit('setting:show', $setting); this.art.emit('setting:show', $setting);
@@ -5268,7 +5303,7 @@
}, { }, {
key: "hide", key: "hide",
value: function hide() { value: function hide() {
var $setting = this.art.refs.$setting; var $setting = this.art.template.$setting;
setStyle($setting, 'display', 'none'); setStyle($setting, 'display', 'none');
this.state = false; this.state = false;
this.art.emit('setting:hide', $setting); this.art.emit('setting:hide', $setting);
@@ -5392,24 +5427,8 @@
createClass(Artplayer, [{ createClass(Artplayer, [{
key: "init", key: "init",
value: function init() { value: function init() {
var _this2 = this;
this.isFocus = false; this.isFocus = false;
this.isPlaying = false; this.isPlaying = false;
this.refs = {};
if (this.option.container instanceof Element) {
this.refs.$container = this.option.container;
} else {
this.refs.$container = document.querySelector(this.option.container);
}
if (Artplayer.instances.some(function (art) {
return art.refs.$container === _this2.refs.$container;
})) {
errorHandle(false, 'Cannot mount multiple instances on the same dom element');
}
this.whitelist = new Whitelist(this); this.whitelist = new Whitelist(this);
this.template = new Template(this); this.template = new Template(this);
this.storage = new Storage(this); this.storage = new Storage(this);
@@ -5436,21 +5455,15 @@
key: "destroy", key: "destroy",
value: function destroy() { value: function destroy() {
var removeHtml = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; var removeHtml = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
this.events.destroy();
Artplayer.instances.splice(Artplayer.instances.indexOf(this), 1); Artplayer.instances.splice(Artplayer.instances.indexOf(this), 1);
this.events.destroy();
if (removeHtml) { this.template.destroy(removeHtml);
this.refs.$container.innerHTML = '';
} else {
this.refs.$player.classList.add('artplayer-destroy');
}
this.emit('destroy'); this.emit('destroy');
} }
}], [{ }], [{
key: "version", key: "version",
get: function get() { get: function get() {
return '1.0.3'; return '1.0.4';
} }
}, { }, {
key: "env", key: "env",
docs/lab/js/artplayer.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":"artplayer.js","sources":["../../../packages/artplayer/node_modules/@babel/runtime/helpers/classCallCheck.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/createClass.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/typeof.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/inherits.js","../../../packages/artplayer/node_modules/tiny-emitter/index.js","../../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../../packages/artplayer/node_modules/deepmerge/dist/es.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/isNativeFunction.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/construct.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../../packages/artplayer/src/utils/error.js","../../../packages/artplayer/src/utils/dom.js","../../../packages/artplayer/src/utils/subtitle.js","../../../packages/artplayer/src/utils/index.js","../../../packages/artplayer/src/scheme/validElement.js","../../../packages/artplayer/src/scheme/validStringEmpty.js","../../../packages/artplayer/src/scheme/index.js","../../../packages/artplayer/src/config/mimeCodec.js","../../../packages/artplayer/src/config/mse.js","../../../packages/artplayer/src/config/video.js","../../../packages/artplayer/src/config/index.js","../../../packages/artplayer/src/whitelist.js","../../../packages/artplayer/src/template.js","../../../packages/artplayer/src/i18n.js","../../../packages/artplayer/src/player/attachUrlMix.js","../../../packages/artplayer/src/player/attrInit.js","../../../packages/artplayer/src/player/eventInit.js","../../../packages/artplayer/src/player/playMix.js","../../../packages/artplayer/src/player/pauseMin.js","../../../packages/artplayer/src/player/toggleMix.js","../../../packages/artplayer/src/player/seekMix.js","../../../packages/artplayer/src/player/volumeMix.js","../../../packages/artplayer/src/player/currentTimeMix.js","../../../packages/artplayer/src/player/durationMix.js","../../../packages/artplayer/src/player/switchQualityMix.js","../../../packages/artplayer/src/player/playbackRateMix.js","../../../packages/artplayer/src/player/aspectRatioMix.js","../../../packages/artplayer/src/player/screenshotMix.js","../../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../../packages/artplayer/src/player/fullscreenMix.js","../../../packages/artplayer/src/player/fullscreenWebMix.js","../../../packages/artplayer/node_modules/get-size/get-size.js","../../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../../packages/artplayer/node_modules/unipointer/unipointer.js","../../../packages/artplayer/node_modules/unidragger/unidragger.js","../../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../../packages/artplayer/src/player/pipMix.js","../../../packages/artplayer/src/player/loadedMix.js","../../../packages/artplayer/src/player/playedMix.js","../../../packages/artplayer/src/player/autoSizeMix.js","../../../packages/artplayer/src/player/flipMix.js","../../../packages/artplayer/src/player/index.js","../../../packages/artplayer/src/mse.js","../../../packages/artplayer/src/utils/component.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/defineProperty.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableRest.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/slicedToArray.js","../../../packages/artplayer/src/icons/index.js","../../../packages/artplayer/src/controls/fullscreen.js","../../../packages/artplayer/src/controls/fullscreenWeb.js","../../../packages/artplayer/src/controls/pip.js","../../../packages/artplayer/src/controls/playAndPause.js","../../../packages/artplayer/src/controls/progress.js","../../../packages/artplayer/src/controls/subtitle.js","../../../packages/artplayer/src/controls/time.js","../../../packages/artplayer/src/controls/volume.js","../../../packages/artplayer/src/controls/setting.js","../../../packages/artplayer/src/controls/thumbnails.js","../../../packages/artplayer/src/controls/screenshot.js","../../../packages/artplayer/src/controls/quality.js","../../../packages/artplayer/src/controls/index.js","../../../packages/artplayer/src/contextmenu/playbackRate.js","../../../packages/artplayer/src/contextmenu/aspectRatio.jLine truncated {"version":3,"file":"artplayer.js","sources":["../../../packages/artplayer/node_modules/@babel/runtime/helpers/classCallCheck.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/createClass.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/typeof.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/inherits.js","../../../packages/artplayer/node_modules/tiny-emitter/index.js","../../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../../packages/artplayer/node_modules/deepmerge/dist/es.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/isNativeFunction.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/construct.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../../packages/artplayer/src/utils/error.js","../../../packages/artplayer/src/utils/dom.js","../../../packages/artplayer/src/utils/subtitle.js","../../../packages/artplayer/src/utils/index.js","../../../packages/artplayer/src/scheme/validElement.js","../../../packages/artplayer/src/scheme/validStringEmpty.js","../../../packages/artplayer/src/scheme/index.js","../../../packages/artplayer/src/config/mimeCodec.js","../../../packages/artplayer/src/config/mse.js","../../../packages/artplayer/src/config/video.js","../../../packages/artplayer/src/config/index.js","../../../packages/artplayer/src/whitelist.js","../../../packages/artplayer/src/template.js","../../../packages/artplayer/src/i18n.js","../../../packages/artplayer/src/player/attachUrlMix.js","../../../packages/artplayer/src/player/attrInit.js","../../../packages/artplayer/src/player/eventInit.js","../../../packages/artplayer/src/player/playMix.js","../../../packages/artplayer/src/player/pauseMin.js","../../../packages/artplayer/src/player/toggleMix.js","../../../packages/artplayer/src/player/seekMix.js","../../../packages/artplayer/src/player/volumeMix.js","../../../packages/artplayer/src/player/currentTimeMix.js","../../../packages/artplayer/src/player/durationMix.js","../../../packages/artplayer/src/player/switchQualityMix.js","../../../packages/artplayer/src/player/playbackRateMix.js","../../../packages/artplayer/src/player/aspectRatioMix.js","../../../packages/artplayer/src/player/screenshotMix.js","../../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../../packages/artplayer/src/player/fullscreenMix.js","../../../packages/artplayer/src/player/fullscreenWebMix.js","../../../packages/artplayer/node_modules/get-size/get-size.js","../../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../../packages/artplayer/node_modules/unipointer/unipointer.js","../../../packages/artplayer/node_modules/unidragger/unidragger.js","../../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../../packages/artplayer/src/player/pipMix.js","../../../packages/artplayer/src/player/loadedMix.js","../../../packages/artplayer/src/player/playedMix.js","../../../packages/artplayer/src/player/autoSizeMix.js","../../../packages/artplayer/src/player/flipMix.js","../../../packages/artplayer/src/player/index.js","../../../packages/artplayer/src/mse.js","../../../packages/artplayer/src/utils/component.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/defineProperty.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableRest.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/slicedToArray.js","../../../packages/artplayer/src/icons/index.js","../../../packages/artplayer/src/controls/fullscreen.js","../../../packages/artplayer/src/controls/fullscreenWeb.js","../../../packages/artplayer/src/controls/pip.js","../../../packages/artplayer/src/controls/playAndPause.js","../../../packages/artplayer/src/controls/progress.js","../../../packages/artplayer/src/controls/subtitle.js","../../../packages/artplayer/src/controls/time.js","../../../packages/artplayer/src/controls/volume.js","../../../packages/artplayer/src/controls/setting.js","../../../packages/artplayer/src/controls/thumbnails.js","../../../packages/artplayer/src/controls/screenshot.js","../../../packages/artplayer/src/controls/quality.js","../../../packages/artplayer/src/controls/index.js","../../../packages/artplayer/src/contextmenu/playbackRate.js","../../../packages/artplayer/src/contextmenu/aspectRatio.jLine truncated
packages/artplayer/src/contextmenu/index.js
+5 -5
View File
@@ -18,7 +18,7 @@ export default class Contextmenu {
init() { init() {
const { const {
option, option,
refs: { $player, $contextmenu }, template: { $player, $contextmenu },
events: { proxy }, events: { proxy },
} = this.art; } = this.art;
@@ -70,12 +70,12 @@ export default class Contextmenu {
} }
add(item, callback) { add(item, callback) {
const { $contextmenu } = this.art.refs; const { $contextmenu } = this.art.template;
component(this.art, this, $contextmenu, item, callback, 'contextmenu'); component(this.art, this, $contextmenu, item, callback, 'contextmenu');
} }
setPos(event) { setPos(event) {
const { $player, $contextmenu } = this.art.refs; const { $player, $contextmenu } = this.art.template;
const mouseX = event.clientX; const mouseX = event.clientX;
const mouseY = event.clientY; const mouseY = event.clientY;
const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = $player.getBoundingClientRect(); const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = $player.getBoundingClientRect();
@@ -96,13 +96,13 @@ export default class Contextmenu {
} }
hide() { hide() {
const { $contextmenu } = this.art.refs; const { $contextmenu } = this.art.template;
setStyle($contextmenu, 'display', 'none'); setStyle($contextmenu, 'display', 'none');
this.art.emit('contextmenu:hide', $contextmenu); this.art.emit('contextmenu:hide', $contextmenu);
} }
show() { show() {
const { $contextmenu } = this.art.refs; const { $contextmenu } = this.art.template;
setStyle($contextmenu, 'display', 'block'); setStyle($contextmenu, 'display', 'block');
this.art.emit('contextmenu:show', $contextmenu); this.art.emit('contextmenu:show', $contextmenu);
} }
packages/artplayer/src/controls/index.js
+3 -3
View File
@@ -139,7 +139,7 @@ export default class Controls {
add(item, callback) { add(item, callback) {
const option = typeof item === 'function' ? item(this.art) : item; const option = typeof item === 'function' ? item(this.art) : item;
const { $progress, $controlsLeft, $controlsRight } = this.art.refs; const { $progress, $controlsLeft, $controlsRight } = this.art.template;
let parent; let parent;
switch (option.position) { switch (option.position) {
case 'top': case 'top':
@@ -161,12 +161,12 @@ export default class Controls {
} }
show() { show() {
const { $player } = this.art.refs; const { $player } = this.art.template;
$player.classList.add('artplayer-controls-show'); $player.classList.add('artplayer-controls-show');
} }
hide() { hide() {
const { $player } = this.art.refs; const { $player } = this.art.template;
$player.classList.remove('artplayer-controls-show'); $player.classList.remove('artplayer-controls-show');
} }
} }
packages/artplayer/src/controls/progress.js
+1 -1
View File
@@ -2,7 +2,7 @@ import { append, clamp, secondToTime, setStyle, getStyle } from '../utils';
export function getPosFromEvent(art, event) { export function getPosFromEvent(art, event) {
const { const {
refs: { $progress }, template: { $progress },
player, player,
} = art; } = art;
const { left } = $progress.getBoundingClientRect(); const { left } = $progress.getBoundingClientRect();
packages/artplayer/src/controls/thumbnails.js
+1 -1
View File
@@ -6,7 +6,7 @@ export default function thumbnails(controlOption) {
...controlOption, ...controlOption,
mounted: $control => { mounted: $control => {
const { const {
refs: { $progress }, template: { $progress },
events: { proxy, loadImg }, events: { proxy, loadImg },
} = art; } = art;
let loading = false; let loading = false;
packages/artplayer/src/events/clickInit.js
+1 -1
View File
@@ -1,6 +1,6 @@
export default function clickInit(art, events) { export default function clickInit(art, events) {
const { const {
refs: { $player }, template: { $player },
} = art; } = art;
events.proxy(document, ['click', 'contextmenu'], event => { events.proxy(document, ['click', 'contextmenu'], event => {
if (event.composedPath().indexOf($player) > -1) { if (event.composedPath().indexOf($player) > -1) {
packages/artplayer/src/events/doubleClickInit.js
+1 -1
View File
@@ -1,6 +1,6 @@
export default function doubleClickInit(art, events) { export default function doubleClickInit(art, events) {
const { const {
refs: { $video }, template: { $video },
} = art; } = art;
events.proxy($video, 'dblclick', () => { events.proxy($video, 'dblclick', () => {
art.player.fullscreenToggle(); art.player.fullscreenToggle();
packages/artplayer/src/events/hoverInit.js
+1 -1
View File
@@ -1,6 +1,6 @@
export default function hoverInit(art, events) { export default function hoverInit(art, events) {
const { const {
refs: { $player }, template: { $player },
} = art; } = art;
events.hover( events.hover(
$player, $player,
packages/artplayer/src/events/mousemoveInit.js
+1 -1
View File
@@ -2,7 +2,7 @@ import { debounce } from '../utils';
export default function mousemoveInitInit(art, events) { export default function mousemoveInitInit(art, events) {
const { const {
refs: { $player, $video }, template: { $player, $video },
} = art; } = art;
const autoHide = debounce(() => { const autoHide = debounce(() => {
packages/artplayer/src/events/resizeInit.js
+1 -1
View File
@@ -4,7 +4,7 @@ import { sleep } from '../utils';
export default function resizeInit(art, events) { export default function resizeInit(art, events) {
const { const {
option, option,
refs: { $player }, template: { $player },
} = art; } = art;
const resizeObserver = new ResizeObserver(() => { const resizeObserver = new ResizeObserver(() => {
sleep().then(() => { sleep().then(() => {
packages/artplayer/src/index.js
+3 -18
View File
@@ -109,18 +109,7 @@ class Artplayer extends Emitter {
init() { init() {
this.isFocus = false; this.isFocus = false;
this.isPlaying = false; this.isPlaying = false;
this.refs = {};
if (this.option.container instanceof Element) {
this.refs.$container = this.option.container;
} else {
this.refs.$container = document.querySelector(this.option.container);
}
if (Artplayer.instances.some(art => art.refs.$container === this.refs.$container)) {
utils.errorHandle(false, 'Cannot mount multiple instances on the same dom element');
}
this.whitelist = new Whitelist(this); this.whitelist = new Whitelist(this);
this.template = new Template(this); this.template = new Template(this);
this.storage = new Storage(this); this.storage = new Storage(this);
@@ -146,13 +135,9 @@ class Artplayer extends Emitter {
} }
destroy(removeHtml = false) { destroy(removeHtml = false) {
this.events.destroy();
Artplayer.instances.splice(Artplayer.instances.indexOf(this), 1); Artplayer.instances.splice(Artplayer.instances.indexOf(this), 1);
if (removeHtml) { this.events.destroy();
this.refs.$container.innerHTML = ''; this.template.destroy(removeHtml);
} else {
this.refs.$player.classList.add('artplayer-destroy');
}
this.emit('destroy'); this.emit('destroy');
} }
} }
packages/artplayer/src/info.js
+4 -4
View File
@@ -8,7 +8,7 @@ export default class Info {
init() { init() {
const { const {
refs: { $infoClose }, template: { $infoClose },
events: { proxy }, events: { proxy },
} = this.art; } = this.art;
proxy($infoClose, 'click', () => { proxy($infoClose, 'click', () => {
@@ -17,7 +17,7 @@ export default class Info {
} }
show() { show() {
const { $info, $infoPanel } = this.art.refs; const { $info, $infoPanel } = this.art.template;
setStyle($info, 'display', 'block'); setStyle($info, 'display', 'block');
if (!$infoPanel.innerHTML) { if (!$infoPanel.innerHTML) {
append($infoPanel, this.creatInfo()); append($infoPanel, this.creatInfo());
@@ -78,7 +78,7 @@ export default class Info {
} }
readInfo() { readInfo() {
const { $infoPanel, $video } = this.art.refs; const { $infoPanel, $video } = this.art.template;
const types = Array.from($infoPanel.querySelectorAll('[data-video]')); const types = Array.from($infoPanel.querySelectorAll('[data-video]'));
types.forEach(item => { types.forEach(item => {
const value = $video[item.dataset.video]; const value = $video[item.dataset.video];
@@ -95,7 +95,7 @@ export default class Info {
} }
hide() { hide() {
const { $info } = this.art.refs; const { $info } = this.art.template;
setStyle($info, 'display', 'none'); setStyle($info, 'display', 'none');
clearTimeout(this.timer); clearTimeout(this.timer);
this.art.emit('info:hide', $info); this.art.emit('info:hide', $info);
packages/artplayer/src/layers.js
+3 -3
View File
@@ -12,18 +12,18 @@ export default class Layers {
} }
add(item, callback) { add(item, callback) {
const { $layers } = this.art.refs; const { $layers } = this.art.template;
component(this.art, this, $layers, item, callback, 'layer'); component(this.art, this, $layers, item, callback, 'layer');
} }
show() { show() {
const { $layers } = this.art.refs; const { $layers } = this.art.template;
setStyle($layers, 'display', 'block'); setStyle($layers, 'display', 'block');
this.art.emit('layers:show', $layers); this.art.emit('layers:show', $layers);
} }
hide() { hide() {
const { $layers } = this.art.refs; const { $layers } = this.art.template;
setStyle($layers, 'display', 'none'); setStyle($layers, 'display', 'none');
this.art.emit('layers:hide', $layers); this.art.emit('layers:hide', $layers);
} }
packages/artplayer/src/loading.js
+3 -3
View File
@@ -6,19 +6,19 @@ export default class Loading {
this.art = art; this.art = art;
const { const {
option, option,
refs: { $loading }, template: { $loading },
} = art; } = art;
append($loading, option.icons.loading || icons.loading); append($loading, option.icons.loading || icons.loading);
} }
hide() { hide() {
const { $loading } = this.art.refs; const { $loading } = this.art.template;
setStyle($loading, 'display', 'none'); setStyle($loading, 'display', 'none');
this.art.emit('loading:hide', $loading); this.art.emit('loading:hide', $loading);
} }
show() { show() {
const { $loading } = this.art.refs; const { $loading } = this.art.template;
setStyle($loading, 'display', 'flex'); setStyle($loading, 'display', 'flex');
this.art.emit('loading:show', $loading); this.art.emit('loading:show', $loading);
} }
packages/artplayer/src/mask.js
+3 -3
View File
@@ -6,20 +6,20 @@ export default class Mask {
this.art = art; this.art = art;
const { const {
option, option,
refs: { $mask }, template: { $mask },
} = art; } = art;
const $playBig = append($mask, '<div class="art-playBig"></div>'); const $playBig = append($mask, '<div class="art-playBig"></div>');
append($playBig, option.icons.playBig || icons.playBig); append($playBig, option.icons.playBig || icons.playBig);
} }
show() { show() {
const { $mask } = this.art.refs; const { $mask } = this.art.template;
setStyle($mask, 'display', 'flex'); setStyle($mask, 'display', 'flex');
this.art.emit('mask:show', $mask); this.art.emit('mask:show', $mask);
} }
hide() { hide() {
const { $mask } = this.art.refs; const { $mask } = this.art.template;
setStyle($mask, 'display', 'none'); setStyle($mask, 'display', 'none');
this.art.emit('mask:show', $mask); this.art.emit('mask:show', $mask);
} }
packages/artplayer/src/notice.js
+2 -2
View File
@@ -7,7 +7,7 @@ export default class Notice {
} }
show(msg, autoHide = true, time = 1000) { show(msg, autoHide = true, time = 1000) {
const { $notice, $noticeInner } = this.art.refs; const { $notice, $noticeInner } = this.art.template;
setStyle($notice, 'display', 'block'); setStyle($notice, 'display', 'block');
$noticeInner.innerHTML = msg instanceof Error ? msg.message.trim() : msg; $noticeInner.innerHTML = msg instanceof Error ? msg.message.trim() : msg;
if (autoHide) { if (autoHide) {
@@ -20,7 +20,7 @@ export default class Notice {
} }
hide() { hide() {
const { $notice } = this.art.refs; const { $notice } = this.art.template;
setStyle($notice, 'display', 'none'); setStyle($notice, 'display', 'none');
this.art.emit('notice:hide', $notice); this.art.emit('notice:hide', $notice);
} }
packages/artplayer/src/player/aspectRatioMix.js
+1 -1
View File
@@ -2,7 +2,7 @@ import { setStyle, errorHandle } from '../utils';
export default function aspectRatioMix(art, player) { export default function aspectRatioMix(art, player) {
const { const {
refs: { $video, $player }, template: { $video, $player },
i18n, i18n,
notice, notice,
} = art; } = art;
packages/artplayer/src/player/attachUrlMix.js
+1 -1
View File
@@ -3,7 +3,7 @@ import { getExt } from '../utils';
export default function attachUrlMix(art, player) { export default function attachUrlMix(art, player) {
const { const {
option: { type, customType }, option: { type, customType },
refs: { $video }, template: { $video },
} = art; } = art;
Object.defineProperty(player, 'returnUrl', { Object.defineProperty(player, 'returnUrl', {
packages/artplayer/src/player/attrInit.js
+1 -1
View File
@@ -3,7 +3,7 @@ import { clamp, sleep } from '../utils';
export default function attrInit(art, player) { export default function attrInit(art, player) {
const { const {
option, option,
refs: { $video }, template: { $video },
} = art; } = art;
Object.keys(option.moreVideoAttr).forEach(key => { Object.keys(option.moreVideoAttr).forEach(key => {
$video[key] = option.moreVideoAttr[key]; $video[key] = option.moreVideoAttr[key];
packages/artplayer/src/player/autoSizeMix.js
+1 -1
View File
@@ -2,7 +2,7 @@ import { setStyle } from '../utils';
export default function resizeMix(art, player) { export default function resizeMix(art, player) {
const { const {
refs: { $container, $player, $video }, template: { $container, $player, $video },
} = art; } = art;
Object.defineProperty(player, 'autoSizeState', { Object.defineProperty(player, 'autoSizeState', {
packages/artplayer/src/player/currentTimeMix.js
+2 -2
View File
@@ -1,8 +1,8 @@
export default function currentTimeMix(art, player) { export default function currentTimeMix(art, player) {
Object.defineProperty(player, 'currentTime', { Object.defineProperty(player, 'currentTime', {
get: () => art.refs.$video.currentTime || 0, get: () => art.template.$video.currentTime || 0,
set: currentTime => { set: currentTime => {
art.refs.$video.currentTime = currentTime; art.template.$video.currentTime = currentTime;
}, },
}); });
} }
packages/artplayer/src/player/durationMix.js
+1 -1
View File
@@ -1,5 +1,5 @@
export default function durationMix(art, player) { export default function durationMix(art, player) {
Object.defineProperty(player, 'duration', { Object.defineProperty(player, 'duration', {
get: () => art.refs.$video.duration || 0, get: () => art.template.$video.duration || 0,
}); });
} }
packages/artplayer/src/player/eventInit.js
+1 -1
View File
@@ -5,7 +5,7 @@ export default function eventInit(art, player) {
const { const {
option, option,
events: { proxy }, events: { proxy },
refs: { $player, $video }, template: { $player, $video },
i18n, i18n,
notice, notice,
} = art; } = art;
packages/artplayer/src/player/flipMix.js
+3 -3
View File
@@ -2,21 +2,21 @@ import { errorHandle } from '../utils';
export default function flipMix(art, player) { export default function flipMix(art, player) {
Object.defineProperty(player, 'flipState', { Object.defineProperty(player, 'flipState', {
get: () => art.refs.$player.dataset.flip, get: () => art.template.$player.dataset.flip,
}); });
Object.defineProperty(player, 'flip', { Object.defineProperty(player, 'flip', {
value: flip => { value: flip => {
const flipList = ['normal', 'horizontal', 'vertical']; const flipList = ['normal', 'horizontal', 'vertical'];
errorHandle(flipList.includes(flip), `'flip' only accept ${flipList.toString()} as parameters`); errorHandle(flipList.includes(flip), `'flip' only accept ${flipList.toString()} as parameters`);
art.refs.$player.dataset.flip = flip; art.template.$player.dataset.flip = flip;
art.emit('flipChange', flip); art.emit('flipChange', flip);
}, },
}); });
Object.defineProperty(player, 'flipRemove', { Object.defineProperty(player, 'flipRemove', {
value: () => { value: () => {
delete art.refs.$player.dataset.flip; delete art.template.$player.dataset.flip;
art.emit('flipRemove'); art.emit('flipRemove');
}, },
}); });
packages/artplayer/src/player/fullscreenMix.js
+1 -1
View File
@@ -4,7 +4,7 @@ export default function fullscreenMix(art, player) {
const { const {
notice, notice,
events: { destroyEvents }, events: { destroyEvents },
refs: { $player }, template: { $player },
} = art; } = art;
const screenfullChange = () => { const screenfullChange = () => {
packages/artplayer/src/player/fullscreenWebMix.js
+1 -1
View File
@@ -1,6 +1,6 @@
export default function fullscreenWebMix(art, player) { export default function fullscreenWebMix(art, player) {
const { const {
refs: { $player }, template: { $player },
} = art; } = art;
Object.defineProperty(player, 'fullscreenWebState', { Object.defineProperty(player, 'fullscreenWebState', {
packages/artplayer/src/player/loadedMix.js
+2 -2
View File
@@ -1,8 +1,8 @@
export default function seekMix(art, player) { export default function seekMix(art, player) {
Object.defineProperty(player, 'loaded', { Object.defineProperty(player, 'loaded', {
get: () => get: () =>
art.refs.$video.buffered.length art.template.$video.buffered.length
? art.refs.$video.buffered.end(art.refs.$video.buffered.length - 1) / art.refs.$video.duration ? art.template.$video.buffered.end(art.template.$video.buffered.length - 1) / art.template.$video.duration
: 0, : 0,
}); });
} }
packages/artplayer/src/player/pauseMin.js
+1 -1
View File
@@ -1,6 +1,6 @@
export default function pauseMin(art, player) { export default function pauseMin(art, player) {
const { const {
refs: { $video }, template: { $video },
i18n, i18n,
notice, notice,
} = art; } = art;
packages/artplayer/src/player/pipMix.js
+2 -2
View File
@@ -4,7 +4,7 @@ import { setStyle, append } from '../utils';
function nativePip(art, player) { function nativePip(art, player) {
const { const {
notice, notice,
refs: { $video }, template: { $video },
events: { proxy }, events: { proxy },
} = art; } = art;
@@ -54,7 +54,7 @@ function customPip(art, player) {
const { const {
option, option,
i18n, i18n,
refs: { $player, $pipClose, $pipTitle }, template: { $player, $pipClose, $pipTitle },
events: { destroyEvents, proxy }, events: { destroyEvents, proxy },
} = art; } = art;
let cachePos = null; let cachePos = null;
packages/artplayer/src/player/playMix.js
+1 -1
View File
@@ -1,6 +1,6 @@
export default function playMix(art, player) { export default function playMix(art, player) {
const { const {
refs: { $video }, template: { $video },
i18n, i18n,
notice, notice,
option: { mutex }, option: { mutex },
packages/artplayer/src/player/playbackRateMix.js
+1 -1
View File
@@ -2,7 +2,7 @@ import { errorHandle } from '../utils';
export default function playbackRateMix(art, player) { export default function playbackRateMix(art, player) {
const { const {
refs: { $video, $player }, template: { $video, $player },
i18n, i18n,
notice, notice,
} = art; } = art;
packages/artplayer/src/player/playedMix.js
+1 -1
View File
@@ -1,5 +1,5 @@
export default function seekMix(art, player) { export default function seekMix(art, player) {
Object.defineProperty(player, 'played', { Object.defineProperty(player, 'played', {
get: () => art.refs.$video.currentTime / art.refs.$video.duration, get: () => art.template.$video.currentTime / art.template.$video.duration,
}); });
} }
packages/artplayer/src/player/screenshotMix.js
+1 -1
View File
@@ -4,7 +4,7 @@ export default function screenshotMix(art, player) {
const { const {
option, option,
notice, notice,
refs: { $video }, template: { $video },
} = art; } = art;
function captureFrame() { function captureFrame() {
packages/artplayer/src/player/volumeMix.js
+1 -1
View File
@@ -2,7 +2,7 @@ import { clamp } from '../utils';
export default function volumeMix(art, player) { export default function volumeMix(art, player) {
const { const {
refs: { $video }, template: { $video },
i18n, i18n,
notice, notice,
storage, storage,
packages/artplayer/src/setting/index.js
+4 -4
View File
@@ -16,7 +16,7 @@ export default class Setting {
init() { init() {
const { const {
refs: { $settingClose }, template: { $settingClose },
events: { proxy }, events: { proxy },
} = this.art; } = this.art;
@@ -32,19 +32,19 @@ export default class Setting {
} }
add(item, callback) { add(item, callback) {
const { $settingBody } = this.art.refs; const { $settingBody } = this.art.template;
component(this.art, this, $settingBody, item, callback, 'setting'); component(this.art, this, $settingBody, item, callback, 'setting');
} }
show() { show() {
const { $setting } = this.art.refs; const { $setting } = this.art.template;
setStyle($setting, 'display', 'flex'); setStyle($setting, 'display', 'flex');
this.state = true; this.state = true;
this.art.emit('setting:show', $setting); this.art.emit('setting:show', $setting);
} }
hide() { hide() {
const { $setting } = this.art.refs; const { $setting } = this.art.template;
setStyle($setting, 'display', 'none'); setStyle($setting, 'display', 'none');
this.state = false; this.state = false;
this.art.emit('setting:hide', $setting); this.art.emit('setting:hide', $setting);
packages/artplayer/src/subtitle.js
+5 -5
View File
@@ -15,14 +15,14 @@ export default class Subtitle {
const { const {
events: { proxy }, events: { proxy },
option: { subtitle }, option: { subtitle },
refs: { $video, $subtitle }, template: { $video, $subtitle },
} = this.art; } = this.art;
setStyles($subtitle, subtitle.style || {}); setStyles($subtitle, subtitle.style || {});
const $track = document.createElement('track'); const $track = document.createElement('track');
$track.default = true; $track.default = true;
$track.kind = 'metadata'; $track.kind = 'metadata';
$video.appendChild($track); $video.appendChild($track);
this.art.refs.$track = $track; this.art.template.$track = $track;
this.load(subtitle.url).then(url => { this.load(subtitle.url).then(url => {
$track.src = url; $track.src = url;
this.art.emit('subtitle:load', url); this.art.emit('subtitle:load', url);
@@ -71,7 +71,7 @@ export default class Subtitle {
show() { show() {
const { const {
refs: { $subtitle }, template: { $subtitle },
i18n, i18n,
notice, notice,
} = this.art; } = this.art;
@@ -83,7 +83,7 @@ export default class Subtitle {
hide() { hide() {
const { const {
refs: { $subtitle }, template: { $subtitle },
i18n, i18n,
notice, notice,
} = this.art; } = this.art;
@@ -102,7 +102,7 @@ export default class Subtitle {
} }
switch(url) { switch(url) {
const { $track } = this.art.refs; const { $track } = this.art.template;
errorHandle($track, 'You need to initialize the subtitle option first.'); errorHandle($track, 'You need to initialize the subtitle option first.');
this.load(url).then(url => { this.load(url).then(url => {
$track.src = url; $track.src = url;
packages/artplayer/src/template.js
+49 -26
View File
@@ -1,7 +1,22 @@
import { errorHandle } from './utils';
export default class Template { export default class Template {
constructor(art) { constructor(art) {
const { refs } = art; if (art.option.container instanceof Element) {
refs.$container.innerHTML = ` this.$container = this.option.container;
} else {
this.$container = document.querySelector(art.option.container);
}
if (art.constructor.instances.some(art => art.template.$container === this.$container)) {
errorHandle(false, 'Cannot mount multiple instances on the same dom element');
}
this.init();
}
init() {
this.$container.innerHTML = `
<div class="artplayer-video-player"> <div class="artplayer-video-player">
<video data-index="10" class="artplayer-video"></video> <video data-index="10" class="artplayer-video"></video>
<div data-index="20" class="artplayer-subtitle"></div> <div data-index="20" class="artplayer-subtitle"></div>
@@ -35,29 +50,37 @@ export default class Template {
<div data-index="110" class="artplayer-contextmenu"></div> <div data-index="110" class="artplayer-contextmenu"></div>
</div> </div>
`; `;
refs.$player = refs.$container.querySelector('.artplayer-video-player'); this.$player = this.$container.querySelector('.artplayer-video-player');
refs.$video = refs.$container.querySelector('.artplayer-video'); this.$video = this.$container.querySelector('.artplayer-video');
refs.$subtitle = refs.$container.querySelector('.artplayer-subtitle'); this.$subtitle = this.$container.querySelector('.artplayer-subtitle');
refs.$bottom = refs.$container.querySelector('.artplayer-bottom'); this.$bottom = this.$container.querySelector('.artplayer-bottom');
refs.$progress = refs.$container.querySelector('.artplayer-progress'); this.$progress = this.$container.querySelector('.artplayer-progress');
refs.$controls = refs.$container.querySelector('.artplayer-controls'); this.$controls = this.$container.querySelector('.artplayer-controls');
refs.$controlsLeft = refs.$container.querySelector('.artplayer-controls-left'); this.$controlsLeft = this.$container.querySelector('.artplayer-controls-left');
refs.$controlsRight = refs.$container.querySelector('.artplayer-controls-right'); this.$controlsRight = this.$container.querySelector('.artplayer-controls-right');
refs.$layers = refs.$container.querySelector('.artplayer-layers'); this.$layers = this.$container.querySelector('.artplayer-layers');
refs.$loading = refs.$container.querySelector('.artplayer-loading'); this.$loading = this.$container.querySelector('.artplayer-loading');
refs.$notice = refs.$container.querySelector('.artplayer-notice'); this.$notice = this.$container.querySelector('.artplayer-notice');
refs.$noticeInner = refs.$container.querySelector('.artplayer-notice-inner'); this.$noticeInner = this.$container.querySelector('.artplayer-notice-inner');
refs.$mask = refs.$container.querySelector('.artplayer-mask'); this.$mask = this.$container.querySelector('.artplayer-mask');
refs.$setting = refs.$container.querySelector('.artplayer-setting'); this.$setting = this.$container.querySelector('.artplayer-setting');
refs.$settingInner = refs.$container.querySelector('.artplayer-setting-inner'); this.$settingInner = this.$container.querySelector('.artplayer-setting-inner');
refs.$settingBody = refs.$container.querySelector('.artplayer-setting-body'); this.$settingBody = this.$container.querySelector('.artplayer-setting-body');
refs.$settingClose = refs.$container.querySelector('.artplayer-setting-close'); this.$settingClose = this.$container.querySelector('.artplayer-setting-close');
refs.$info = refs.$container.querySelector('.artplayer-info'); this.$info = this.$container.querySelector('.artplayer-info');
refs.$infoPanel = refs.$container.querySelector('.artplayer-info-panel'); this.$infoPanel = this.$container.querySelector('.artplayer-info-panel');
refs.$infoClose = refs.$container.querySelector('.artplayer-info-close'); this.$infoClose = this.$container.querySelector('.artplayer-info-close');
refs.$pipHeader = refs.$container.querySelector('.artplayer-pip-header'); this.$pipHeader = this.$container.querySelector('.artplayer-pip-header');
refs.$pipTitle = refs.$container.querySelector('.artplayer-pip-title'); this.$pipTitle = this.$container.querySelector('.artplayer-pip-title');
refs.$pipClose = refs.$container.querySelector('.artplayer-pip-close'); this.$pipClose = this.$container.querySelector('.artplayer-pip-close');
refs.$contextmenu = refs.$container.querySelector('.artplayer-contextmenu'); this.$contextmenu = this.$container.querySelector('.artplayer-contextmenu');
}
destroy(removeHtml) {
if (removeHtml) {
this.$container.innerHTML = '';
} else {
this.refs.$player.classList.add('artplayer-destroy');
}
} }
} }