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

字幕添加word-break: break-all

Browse Source
This commit is contained in:
Harvey committed 2020-04-14 13:06:17 +08:00
1 parent 687df9fd5e
commit 4285201fa9
2 files changed
+7 -5
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/uncompiled/artplayer.js
+5 -5
View File
@@ -150,7 +150,7 @@
var css$1 = ".art-video-player .art-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;cursor:pointer}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInZpZGVvLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsNkJBQ0UsaUJBQWtCLENBQ2xCLFVBQVcsQ0FDWCxNQUFPLENBQ1AsS0FBTSxDQUNOLE9BQVEsQ0FDUixRQUFTLENBQ1QsVUFBVyxDQUNYLFdBQVksQ0FDWixxQkFBc0IsQ0FDdEIsY0FBaUIiLCJmaWxlIjoidmlkZW8uc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi5hcnQtdmlkZW8tcGxheWVyIC5hcnQtdmlkZW8ge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHotaW5kZXg6IDEwO1xuICBsZWZ0OiAwO1xuICB0b3A6IDA7XG4gIHJpZ2h0OiAwO1xuICBib3R0b206IDA7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGJhY2tncm91bmQtY29sb3I6ICMwMDA7XG4gIGN1cnNvcjogcG9pbnRlcjsgfVxuIl19 */";
styleInject(css$1);
var css$2 = ".art-video-player .art-subtitle{display:none;position:absolute;z-index:20;bottom:40px;width:100%;padding:0 20px;text-align:center;color:#fff;font-size:20px;pointer-events:none;text-shadow:.5px .5px .5px rgba(0,0,0,.5)}.art-video-player .art-subtitle p{margin:5px 0}.art-video-player.art-subtitle-show .art-subtitle{display:block}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN1YnRpdGxlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsZ0NBQ0UsWUFBYSxDQUNiLGlCQUFrQixDQUNsQixVQUFXLENBQ1gsV0FBWSxDQUNaLFVBQVcsQ0FDWCxjQUFlLENBQ2YsaUJBQWtCLENBQ2xCLFVBQVcsQ0FDWCxjQUFlLENBQ2YsbUJBQW9CLENBQ3BCLHlDQUFtRCxDQUNuRCxrQ0FDRSxZQUFlLENBRW5CLGtEQUNFLGFBQWdCIiwiZmlsZSI6InN1YnRpdGxlLnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuYXJ0LXZpZGVvLXBsYXllciAuYXJ0LXN1YnRpdGxlIHtcbiAgZGlzcGxheTogbm9uZTtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB6LWluZGV4OiAyMDtcbiAgYm90dG9tOiA0MHB4O1xuICB3aWR0aDogMTAwJTtcbiAgcGFkZGluZzogMCAyMHB4O1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gIGNvbG9yOiAjZmZmO1xuICBmb250LXNpemU6IDIwcHg7XG4gIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICB0ZXh0LXNoYWRvdzogMC41cHggMC41cHggMC41cHggcmdiYSgwLCAwLCAwLCAwLjUpOyB9XG4gIC5hcnQtdmlkZW8tcGxheWVyIC5hcnQtc3VidGl0bGUgcCB7XG4gICAgbWFyZ2luOiA1cHggMDsgfVxuXG4uYXJ0LXZpZGVvLXBsYXllci5hcnQtc3VidGl0bGUtc2hvdyAuYXJ0LXN1YnRpdGxlIHtcbiAgZGlzcGxheTogYmxvY2s7IH1cbiJdfQ== */";
var css$2 = ".art-video-player .art-subtitle{display:none;position:absolute;z-index:20;bottom:40px;width:100%;padding:0 20px;text-align:center;color:#fff;font-size:20px;pointer-events:none;text-shadow:.5px .5px .5px rgba(0,0,0,.5)}.art-video-player .art-subtitle p{word-break:break-all;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin:5px 0}.art-video-player.art-subtitle-show .art-subtitle{display:block}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN1YnRpdGxlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsZ0NBQ0UsWUFBYSxDQUNiLGlCQUFrQixDQUNsQixVQUFXLENBQ1gsV0FBWSxDQUNaLFVBQVcsQ0FDWCxjQUFlLENBQ2YsaUJBQWtCLENBQ2xCLFVBQVcsQ0FDWCxjQUFlLENBQ2YsbUJBQW9CLENBQ3BCLHlDQUFtRCxDQUNuRCxrQ0FDRSxvQkFBcUIsQ0FDckIsMEJBQW1CLENBQW5CLHVCQUFtQixDQUFuQixrQkFBbUIsQ0FDbkIsWUFBZSxDQUVuQixrREFDRSxhQUFnQiIsImZpbGUiOiJzdWJ0aXRsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmFydC12aWRlby1wbGF5ZXIgLmFydC1zdWJ0aXRsZSB7XG4gIGRpc3BsYXk6IG5vbmU7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgei1pbmRleDogMjA7XG4gIGJvdHRvbTogNDBweDtcbiAgd2lkdGg6IDEwMCU7XG4gIHBhZGRpbmc6IDAgMjBweDtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBjb2xvcjogI2ZmZjtcbiAgZm9udC1zaXplOiAyMHB4O1xuICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgdGV4dC1zaGFkb3c6IDAuNXB4IDAuNXB4IDAuNXB4IHJnYmEoMCwgMCwgMCwgMC41KTsgfVxuICAuYXJ0LXZpZGVvLXBsYXllciAuYXJ0LXN1YnRpdGxlIHAge1xuICAgIHdvcmQtYnJlYWs6IGJyZWFrLWFsbDtcbiAgICBoZWlnaHQ6IGZpdC1jb250ZW50O1xuICAgIG1hcmdpbjogNXB4IDA7IH1cblxuLmFydC12aWRlby1wbGF5ZXIuYXJ0LXN1YnRpdGxlLXNob3cgLmFydC1zdWJ0aXRsZSB7XG4gIGRpc3BsYXk6IGJsb2NrOyB9XG4iXX0= */";
styleInject(css$2);
var css$3 = ".art-video-player .art-danmuku{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;pointer-events:none}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRhbm11a3Uuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSwrQkFDRSxpQkFBa0IsQ0FDbEIsVUFBVyxDQUNYLE1BQU8sQ0FDUCxLQUFNLENBQ04sT0FBUSxDQUNSLFFBQVMsQ0FDVCxVQUFXLENBQ1gsV0FBWSxDQUNaLGVBQWdCLENBQ2hCLG1CQUFzQiIsImZpbGUiOiJkYW5tdWt1LnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuYXJ0LXZpZGVvLXBsYXllciAuYXJ0LWRhbm11a3Uge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHotaW5kZXg6IDMwO1xuICBsZWZ0OiAwO1xuICB0b3A6IDA7XG4gIHJpZ2h0OiAwO1xuICBib3R0b206IDA7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHBvaW50ZXItZXZlbnRzOiBub25lOyB9XG4iXX0= */";
@@ -899,7 +899,7 @@
var _this$art$option = this.art.option,
theme = _this$art$option.theme,
backdrop = _this$art$option.backdrop;
this.$container.innerHTML = "\n <div class=\"art-undercover\"></div>\n <div class=\"art-video-player art-subtitle-show art-layer-show\" style=\"--theme: ".concat(theme, "\">\n <video class=\"art-video\">\n <track default kind=\"metadata\"></track>\n </video>\n <div class=\"art-subtitle\"></div>\n <div class=\"art-danmuku\"></div>\n <div class=\"art-layers\"></div>\n <div class=\"art-mask\">\n <div class=\"art-state\"></div>\n </div>\n <div class=\"art-bottom\">\n <div class=\"art-progress\"></div>\n <div class=\"art-controls\">\n <div class=\"art-controls-left\"></div>\n <div class=\"art-controls-right\"></div>\n </div>\n </div>\n <div class=\"art-loading\"></div>\n <div class=\"art-notice\">\n <div class=\"art-notice-inner\"></div>\n </div>\n <div class=\"art-settings\">\n <div class=\"art-setting-inner\">\n <div class=\"art-setting-body\"></div>\n </div>\n </div>\n <div class=\"art-info\">\n <div class=\"art-info-panel\">\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Player version:</div>\n <div class=\"art-info-content\">3.5.1</div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video url:</div>\n <div class=\"art-info-content\" data-video=\"src\"></div>\n </div>\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 <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 <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video duration:</div>\n <div class=\"art-info-content\" data-video=\"duration\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video resolution:</div>\n <div class=\"art-info-content\">\n <span data-video=\"videoWidth\"></span> x <span data-video=\"videoHeight\"></span>\n </div>\n </div>\n </div>\n <div class=\"art-info-close\">[x]</div>\n </div>\n <div class=\"art-pip-header\">\n <div class=\"art-pip-title\"></div>\n <div class=\"art-pip-close\">\xD7</div>\n </div>\n <div class=\"art-contextmenus\"></div>\n </div>\n ");
this.$container.innerHTML = "\n <div class=\"art-undercover\"></div>\n <div class=\"art-video-player art-subtitle-show art-layer-show\" style=\"--theme: ".concat(theme, "\">\n <video class=\"art-video\">\n <track default kind=\"metadata\"></track>\n </video>\n <div class=\"art-subtitle\"></div>\n <div class=\"art-danmuku\"></div>\n <div class=\"art-layers\"></div>\n <div class=\"art-mask\">\n <div class=\"art-state\"></div>\n </div>\n <div class=\"art-bottom\">\n <div class=\"art-progress\"></div>\n <div class=\"art-controls\">\n <div class=\"art-controls-left\"></div>\n <div class=\"art-controls-right\"></div>\n </div>\n </div>\n <div class=\"art-loading\"></div>\n <div class=\"art-notice\">\n <div class=\"art-notice-inner\"></div>\n </div>\n <div class=\"art-settings\">\n <div class=\"art-setting-inner\">\n <div class=\"art-setting-body\"></div>\n </div>\n </div>\n <div class=\"art-info\">\n <div class=\"art-info-panel\">\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Player version:</div>\n <div class=\"art-info-content\">3.5.2</div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video url:</div>\n <div class=\"art-info-content\" data-video=\"src\"></div>\n </div>\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 <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 <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video duration:</div>\n <div class=\"art-info-content\" data-video=\"duration\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video resolution:</div>\n <div class=\"art-info-content\">\n <span data-video=\"videoWidth\"></span> x <span data-video=\"videoHeight\"></span>\n </div>\n </div>\n </div>\n <div class=\"art-info-close\">[x]</div>\n </div>\n <div class=\"art-pip-header\">\n <div class=\"art-pip-title\"></div>\n <div class=\"art-pip-close\">\xD7</div>\n </div>\n <div class=\"art-contextmenus\"></div>\n </div>\n ");
this.$undercover = this.query('.art-undercover');
this.$player = this.query('.art-video-player');
this.$video = this.query('.art-video');
@@ -3069,7 +3069,7 @@
function version(option) {
return _objectSpread$f({}, option, {
html: '<a href="https://artplayer.org" target="_blank">ArtPlayer 3.5.1</a>'
html: '<a href="https://artplayer.org" target="_blank">ArtPlayer 3.5.2</a>'
});
}
@@ -4432,7 +4432,7 @@
}], [{
key: "version",
get: function get() {
return '3.5.1';
return '3.5.2';
}
}, {
key: "env",
@@ -4537,7 +4537,7 @@
value: []
}); // eslint-disable-next-line no-console
console.log('%c ArtPlayer %c 3.5.1 %c https://artplayer.org', 'color: #fff; background: #5f5f5f', 'color: #fff; background: #4bc729', '');
console.log('%c ArtPlayer %c 3.5.2 %c https://artplayer.org', 'color: #fff; background: #5f5f5f', 'color: #fff; background: #4bc729', '');
window.Artplayer = Artplayer;
return Artplayer;
packages/artplayer/src/style/subtitle.scss
+2
View File
@@ -13,6 +13,8 @@
text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5);
p {
word-break: break-all;
height: fit-content;
margin: 5px 0;
}
}