mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-13 15:56:15 -08:00
合并字幕插件
This commit is contained in:
Harvey Zack committed
1 parent
6c61a5678b
commit
acdb272393
17 files changed
+149
-165
No files matched your search
+6
-6
@@ -1124,11 +1124,11 @@ art.contextmenu.yourContextmenu.hide();
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
| propertie | type | Description |
|
||||
| --------- | ---------- | --------------- |
|
||||
| `switch` | `Function` | Switch subtitle |
|
||||
| `show` | `Function` | Show subtitle |
|
||||
| `hide` | `Function` | Hide subtitle |
|
||||
| propertie | type | Description |
|
||||
| --------- | ---------- | ------------- |
|
||||
| `init` | `Function` | Init subtitle |
|
||||
| `show` | `Function` | Show subtitle |
|
||||
| `hide` | `Function` | Hide subtitle |
|
||||
|
||||
[Run Code](/)
|
||||
|
||||
@@ -1143,7 +1143,7 @@ var art = new Artplayer({
|
||||
});
|
||||
|
||||
this.art.on('firstCanplay', () => {
|
||||
art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.vtt');
|
||||
art.subtitle.init(url + '/subtitle/one-more-time-one-more-chance.vtt');
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
@@ -40,10 +40,7 @@
|
||||
<script src="./plugins/consola.js"></script>
|
||||
<script src="./plugins/codemirror.js"></script>
|
||||
<script src="./plugins/javascript.js"></script>
|
||||
|
||||
<script src="../uncompiled/artplayer.js"></script>
|
||||
<script src="../uncompiled/artplayer-plugin-subtitle.js"></script>
|
||||
|
||||
<script src="./js/common.js"></script>
|
||||
<script>
|
||||
var _hmt = _hmt || [];
|
||||
|
||||
@@ -107,8 +107,7 @@ var art = new Artplayer({
|
||||
],
|
||||
icons: {
|
||||
loading: '<img src="https://static.hdslb.com/player/images/ploading.gif">',
|
||||
},
|
||||
plugins: [artplayerPluginSubtitle]
|
||||
}
|
||||
});
|
||||
|
||||
art.on('firstCanplay', () => {
|
||||
|
||||
@@ -23,10 +23,7 @@
|
||||
window.mocha.setup('bdd');
|
||||
window.expect = window.chai.expect;
|
||||
</script>
|
||||
|
||||
<script src="../compiled/artplayer.js"></script>
|
||||
<script src="../compiled/artplayer-plugin-subtitle.js"></script>
|
||||
|
||||
<script src="./index.test.js"></script>
|
||||
<script>
|
||||
mocha.checkLeaks();
|
||||
|
||||
@@ -4,14 +4,14 @@
|
||||
.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-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-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-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-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-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-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-web-fullscreen{position:fixed;z-index:9999;width:100%;height:100%;left:0;top:0;right:0;bottom:0}
|
||||
.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[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-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)}
|
||||
|
||||
+104
-26
@@ -565,6 +565,9 @@
|
||||
|
||||
return parent.lastElementChild;
|
||||
}
|
||||
function remove(child) {
|
||||
return child.parentNode.removeChild(child);
|
||||
}
|
||||
function insertByIndex(parent, child, index) {
|
||||
var childs = Array.from(parent.children);
|
||||
child.dataset.index = index;
|
||||
@@ -632,6 +635,7 @@
|
||||
isElement: isElement,
|
||||
mergeDeep: mergeDeep,
|
||||
append: append,
|
||||
remove: remove,
|
||||
insertByIndex: insertByIndex,
|
||||
setStyle: setStyle,
|
||||
setStyles: setStyles,
|
||||
@@ -4262,7 +4266,7 @@
|
||||
|
||||
function version(menuOption) {
|
||||
return objectSpread({}, menuOption, {
|
||||
html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer 1.0.4</a>'
|
||||
html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer 1.0.5</a>'
|
||||
});
|
||||
}
|
||||
|
||||
@@ -4444,7 +4448,7 @@
|
||||
key: "creatInfo",
|
||||
value: function creatInfo() {
|
||||
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.4</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.5</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 time:</div>\n <div class=\"art-info-content\" data-video=\"currentTime\"></div>\n </div>\n ");
|
||||
@@ -4500,13 +4504,13 @@
|
||||
var url = this.art.option.subtitle.url;
|
||||
|
||||
if (url) {
|
||||
this.init();
|
||||
this.init(url);
|
||||
}
|
||||
}
|
||||
|
||||
createClass(Subtitle, [{
|
||||
key: "init",
|
||||
value: function init() {
|
||||
value: function init(url) {
|
||||
var _this = this;
|
||||
|
||||
var _this$art = this.art,
|
||||
@@ -4514,15 +4518,20 @@
|
||||
subtitle = _this$art.option.subtitle,
|
||||
_this$art$template = _this$art.template,
|
||||
$video = _this$art$template.$video,
|
||||
$subtitle = _this$art$template.$subtitle;
|
||||
$subtitle = _this$art$template.$subtitle,
|
||||
$track = _this$art$template.$track;
|
||||
setStyles($subtitle, subtitle.style || {});
|
||||
var $track = document.createElement('track');
|
||||
$track.default = true;
|
||||
$track.kind = 'metadata';
|
||||
$video.appendChild($track);
|
||||
this.art.template.$track = $track;
|
||||
this.load(subtitle.url).then(function (url) {
|
||||
$track.src = url;
|
||||
|
||||
if (!$track) {
|
||||
var $newTrack = document.createElement('track');
|
||||
$newTrack.default = true;
|
||||
$newTrack.kind = 'metadata';
|
||||
$video.appendChild($newTrack);
|
||||
this.art.template.$track = $newTrack;
|
||||
}
|
||||
|
||||
this.load(url).then(function (url) {
|
||||
_this.art.template.$track.src = url;
|
||||
|
||||
_this.art.emit('subtitle:load', url);
|
||||
|
||||
@@ -4605,19 +4614,6 @@
|
||||
this.show();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: "switch",
|
||||
value: function _switch(url) {
|
||||
var _this2 = this;
|
||||
|
||||
var $track = this.art.template.$track;
|
||||
errorHandle($track, 'You need to initialize the subtitle option first.');
|
||||
this.load(url).then(function (url) {
|
||||
$track.src = url;
|
||||
|
||||
_this2.art.emit('subtitle:switch', url);
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
||||
return Subtitle;
|
||||
@@ -5465,6 +5461,86 @@
|
||||
return Storage;
|
||||
}();
|
||||
|
||||
function i18nMix(i18n) {
|
||||
i18n.update({
|
||||
'zh-cn': {
|
||||
'Subtitle offset time': '字幕偏移时间'
|
||||
},
|
||||
'zh-tw': {
|
||||
'Subtitle offset time': '字幕偏移時間'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function settingMix(art) {
|
||||
var i18n = art.i18n,
|
||||
proxy = art.events.proxy;
|
||||
return {
|
||||
title: 'Subtitle',
|
||||
name: 'subtitle',
|
||||
index: 20,
|
||||
html: "\n <div class=\"art-setting-header\">\n ".concat(i18n.get('Subtitle offset time'), ": <span class=\"art-subtitle-value\">0</span>s\n </div>\n <div class=\"art-setting-body\">\n <input\n style=\"width: 100%;height: 3px;outline: none;appearance: none;-moz-appearance: none;-webkit-appearance: none;background-color: #fff;\"\n class=\"art-subtitle-range\"\n type=\"range\"\n min=\"-5\"\n max=\"5\"\n step=\"0.5\"\n >\n </div>\n "),
|
||||
mounted: function mounted($setting) {
|
||||
var $range = $setting.querySelector('.art-subtitle-range');
|
||||
var $value = $setting.querySelector('.art-subtitle-value');
|
||||
proxy($range, 'change', function () {
|
||||
var value = $range.value;
|
||||
$value.innerText = value;
|
||||
art.plugins.artplayerPluginSubtitle.offset(Number(value));
|
||||
});
|
||||
art.on('subtitle:switch', function () {
|
||||
$range.value = 0;
|
||||
$value.innerText = 0;
|
||||
});
|
||||
art.on('artplayerPluginSubtitle:set', function (value) {
|
||||
if ($range.value !== value) {
|
||||
$range.value = value;
|
||||
$value.innerText = value;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function artplayerPluginSubtitle(art) {
|
||||
var clamp = art.constructor.utils.clamp;
|
||||
var setting = art.setting,
|
||||
notice = art.notice,
|
||||
template = art.template,
|
||||
i18n = art.i18n;
|
||||
i18nMix(i18n);
|
||||
setting.add(settingMix);
|
||||
var cuesCache = [];
|
||||
art.on('subtitle:switch', function () {
|
||||
cuesCache = [];
|
||||
});
|
||||
return {
|
||||
offset: function offset(value) {
|
||||
var cues = Array.from(template.$track.track.cues);
|
||||
var time = clamp(value, -5, 5);
|
||||
cues.forEach(function (cue, index) {
|
||||
if (!cuesCache[index]) {
|
||||
cuesCache[index] = {
|
||||
startTime: cue.startTime,
|
||||
endTime: cue.endTime
|
||||
};
|
||||
}
|
||||
|
||||
cue.startTime = cuesCache[index].startTime + time;
|
||||
cue.endTime = cuesCache[index].endTime + time;
|
||||
});
|
||||
notice.show("".concat(i18n.get('Subtitle offset time'), ": ").concat(value, "s"));
|
||||
art.emit('artplayerPluginSubtitle:set', value);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function artplayerPluginLocalPreview(art) {
|
||||
var getExt = art.constructor.utils.getExt;
|
||||
return {// TODO...
|
||||
};
|
||||
}
|
||||
|
||||
var Plugins =
|
||||
/*#__PURE__*/
|
||||
function () {
|
||||
@@ -5475,6 +5551,8 @@
|
||||
|
||||
this.art = art;
|
||||
this.id = 0;
|
||||
this.add(artplayerPluginSubtitle);
|
||||
this.add(artplayerPluginLocalPreview);
|
||||
art.option.plugins.forEach(function (plugin) {
|
||||
_this.add(plugin);
|
||||
});
|
||||
@@ -5613,7 +5691,7 @@
|
||||
}], [{
|
||||
key: "version",
|
||||
get: function get() {
|
||||
return '1.0.4';
|
||||
return '1.0.5';
|
||||
}
|
||||
}, {
|
||||
key: "env",
|
||||
|
||||
+1
-3
@@ -7,11 +7,9 @@
|
||||
"publish": "node ./node_modules/.bin/lerna publish",
|
||||
"dev:artplayer": "cross-env NODE_ENV=development cross-env TARGET=artplayer rollup -w -c scripts/config.js",
|
||||
"dev:artplayer-plugin-danmu": "cross-env NODE_ENV=development cross-env TARGET=artplayer-plugin-danmu rollup -w -c scripts/config.js",
|
||||
"dev:artplayer-plugin-subtitle": "cross-env NODE_ENV=development cross-env TARGET=artplayer-plugin-subtitle rollup -w -c scripts/config.js",
|
||||
"build:artplayer": "cross-env NODE_ENV=production TARGET=artplayer rollup -c scripts/config.js",
|
||||
"build:artplayer-plugin-danmu": "cross-env NODE_ENV=production TARGET=artplayer-plugin-danmu rollup -c scripts/config.js",
|
||||
"build:artplayer-plugin-subtitle": "cross-env NODE_ENV=production TARGET=artplayer-plugin-subtitle rollup -c scripts/config.js",
|
||||
"build:all": "npm-run-all build:artplayer build:artplayer-plugin-danmu build:artplayer-plugin-subtitle",
|
||||
"build:all": "npm-run-all build:artplayer build:artplayer-plugin-danmu",
|
||||
"test": "node ./node_modules/.bin/mocha-chrome ./docs/test/index.html --mocha '{\"ui\":\"bdd\"}'",
|
||||
"lint": "node ./node_modules/.bin/eslint packages/*/src"
|
||||
},
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
node_modules
|
||||
.DS_Store
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
test
|
||||
coverage
|
||||
.nyc_output
|
||||
.cache
|
||||
docs
|
||||
@@ -1 +0,0 @@
|
||||
package-lock=false
|
||||
@@ -1,53 +0,0 @@
|
||||
# artplayer-plugin-subtitle
|
||||
|
||||
Subtitle plugin for ArtPlayer
|
||||
|
||||
## Install
|
||||
|
||||
Install with `npm`
|
||||
|
||||
```
|
||||
$ npm install artplayer-plugin-subtitle
|
||||
```
|
||||
|
||||
Or install with `yarn`
|
||||
|
||||
```
|
||||
$ yarn add artplayer-plugin-subtitle
|
||||
```
|
||||
|
||||
```js
|
||||
import artplayerPluginSubtitle from 'artplayer-plugin-subtitle';
|
||||
```
|
||||
|
||||
Or umd builds are also available
|
||||
|
||||
```html
|
||||
<script src="path/to/artplayer-plugin-subtitle.js"></script>
|
||||
```
|
||||
|
||||
Will expose the global variable to `window.artplayerPluginSubtitle`.
|
||||
|
||||
## Usage
|
||||
|
||||
```html
|
||||
<div class="artplayer-app"></div>
|
||||
```
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: 'path/to/video.mp4',
|
||||
plugins: [
|
||||
artplayerPluginSubtitle,
|
||||
],
|
||||
});
|
||||
|
||||
// There will be a slider in the settings panel.
|
||||
// Or, you can set subtitle offset time by yourself, range from -5 to 5.
|
||||
art.artplayerPluginSubtitle.set(-1);
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
MIT © [Harvey Zack](https://www.zhw-island.com/)
|
||||
@@ -1,8 +0,0 @@
|
||||
/*!
|
||||
* artplayer-plugin-subtitle.js v1.0.4
|
||||
* Github: https://github.com/zhw2590582/ArtPlayer#readme
|
||||
* (c) 2017-2018 Harvey Zack
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t["artplayer-plugin-subtitle"]={})}(this,function(t){"use strict";function e(i){var t=i.i18n,a=i.events.proxy;return{title:"Subtitle",name:"subtitle",index:20,html:'\n <div class="art-setting-header">\n '.concat(t.get("Subtitle offset time"),': <span class="art-subtitle-value">0</span>s\n </div>\n <div class="art-setting-body">\n <input\n style="width: 100%;height: 3px;outline: none;appearance: none;-moz-appearance: none;-webkit-appearance: none;background-color: #fff;"\n class="art-subtitle-range"\n type="range"\n min="-5"\n max="5"\n step="0.5"\n >\n </div>\n '),mounted:function(t){var e=t.querySelector(".art-subtitle-range"),n=t.querySelector(".art-subtitle-value");a(e,"change",function(){var t=e.value;n.innerText=t,i.plugins.artplayerPluginSubtitle.offset(Number(t))}),i.on("subtitle:switch",function(){e.value=0,n.innerText=0}),i.on("artplayerPluginSubtitle:set",function(t){e.value!==t&&(e.value=t,n.innerText=t)})}}}function n(i){var a=i.constructor.utils.clamp,t=i.setting,r=i.notice,u=i.template,o=i.i18n;o.update({"zh-cn":{"Subtitle offset time":"字幕偏移时间"},"zh-tw":{"Subtitle offset time":"字幕偏移時間"}}),t.add(e);var l=[];return i.on("subtitle:switch",function(){l=[]}),{offset:function(t){var e=Array.from(u.$track.track.cues),n=a(t,-5,5);e.forEach(function(t,e){l[e]||(l[e]={startTime:t.startTime,endTime:t.endTime}),t.startTime=l[e].startTime+n,t.endTime=l[e].endTime+n}),r.show("".concat(o.get("Subtitle offset time"),": ").concat(t,"s")),i.emit("artplayerPluginSubtitle:set",t)}}}window.artplayerPluginSubtitle=n,t.default=n,Object.defineProperty(t,"__esModule",{value:!0})});
|
||||
@@ -1,24 +0,0 @@
|
||||
{
|
||||
"name": "artplayer-plugin-subtitle",
|
||||
"version": "1.0.5",
|
||||
"description": "Danmu plugin for ArtPlayer",
|
||||
"main": "dist/artplayer-plugin-subtitle.js",
|
||||
"style": "dist/artplayer-plugin-subtitle.css",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/zhw2590582/ArtPlayer.git"
|
||||
},
|
||||
"keywords": [
|
||||
"video",
|
||||
"player"
|
||||
],
|
||||
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/zhw2590582/ArtPlayer/issues"
|
||||
},
|
||||
"homepage": "https://github.com/zhw2590582/ArtPlayer#readme"
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export default function artplayerPluginLocalPreview(art) {
|
||||
const { getExt } = art.constructor.utils;
|
||||
const formats = ['mp4', 'ogg', 'webm', 'srt', 'vtt'];
|
||||
return {
|
||||
// TODO...
|
||||
};
|
||||
}
|
||||
+1
-4
@@ -57,7 +57,7 @@ function settingMix(art) {
|
||||
};
|
||||
}
|
||||
|
||||
function artplayerPluginSubtitle(art) {
|
||||
export default function artplayerPluginSubtitle(art) {
|
||||
const { clamp } = art.constructor.utils;
|
||||
const { setting, notice, template, i18n } = art;
|
||||
i18nMix(i18n);
|
||||
@@ -87,6 +87,3 @@ function artplayerPluginSubtitle(art) {
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
window.artplayerPluginSubtitle = artplayerPluginSubtitle;
|
||||
export default artplayerPluginSubtitle;
|
||||
@@ -1,7 +1,13 @@
|
||||
import artplayerPluginSubtitle from './artplayer-plugin-subtitle';
|
||||
import artplayerPluginLocalPreview from './artplayer-plugin-localPreview';
|
||||
|
||||
export default class Plugins {
|
||||
constructor(art) {
|
||||
this.art = art;
|
||||
this.id = 0;
|
||||
|
||||
this.add(artplayerPluginSubtitle);
|
||||
this.add(artplayerPluginLocalPreview);
|
||||
art.option.plugins.forEach(plugin => {
|
||||
this.add(plugin);
|
||||
});
|
||||
@@ -1,4 +1,4 @@
|
||||
import { errorHandle, setStyles, setStyle, srtToVtt, vttToBlob } from './utils';
|
||||
import { setStyles, setStyle, srtToVtt, vttToBlob } from './utils';
|
||||
|
||||
export default class Subtitle {
|
||||
constructor(art) {
|
||||
@@ -6,26 +6,31 @@ export default class Subtitle {
|
||||
this.state = true;
|
||||
const { url } = this.art.option.subtitle;
|
||||
if (url) {
|
||||
this.init();
|
||||
this.init(url);
|
||||
}
|
||||
}
|
||||
|
||||
init() {
|
||||
init(url) {
|
||||
const {
|
||||
events: { proxy },
|
||||
option: { subtitle },
|
||||
template: { $video, $subtitle },
|
||||
template: { $video, $subtitle, $track },
|
||||
} = this.art;
|
||||
|
||||
setStyles($subtitle, subtitle.style || {});
|
||||
const $track = document.createElement('track');
|
||||
$track.default = true;
|
||||
$track.kind = 'metadata';
|
||||
$video.appendChild($track);
|
||||
this.art.template.$track = $track;
|
||||
this.load(subtitle.url).then(url => {
|
||||
$track.src = url;
|
||||
|
||||
if (!$track) {
|
||||
const $newTrack = document.createElement('track');
|
||||
$newTrack.default = true;
|
||||
$newTrack.kind = 'metadata';
|
||||
$video.appendChild($newTrack);
|
||||
this.art.template.$track = $newTrack;
|
||||
}
|
||||
|
||||
this.load(url).then(url => {
|
||||
this.art.template.$track.src = url;
|
||||
this.art.emit('subtitle:load', url);
|
||||
|
||||
if ($video.textTracks && $video.textTracks[0]) {
|
||||
const [track] = $video.textTracks;
|
||||
proxy(track, 'cuechange', () => {
|
||||
@@ -100,13 +105,4 @@ export default class Subtitle {
|
||||
this.show();
|
||||
}
|
||||
}
|
||||
|
||||
switch(url) {
|
||||
const { $track } = this.art.template;
|
||||
errorHandle($track, 'You need to initialize the subtitle option first.');
|
||||
this.load(url).then(url => {
|
||||
$track.src = url;
|
||||
this.art.emit('subtitle:switch', url);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -104,6 +104,10 @@ export function append(parent, child) {
|
||||
return parent.lastElementChild;
|
||||
}
|
||||
|
||||
export function remove(child) {
|
||||
return child.parentNode.removeChild(child);
|
||||
}
|
||||
|
||||
export function insertByIndex(parent, child, index) {
|
||||
const childs = Array.from(parent.children);
|
||||
child.dataset.index = index;
|
||||
|
||||
Reference in new issue
Block a user