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

add useSSR

Browse Source
This commit is contained in:
Harvey committed 2021-10-29 17:33:06 +08:00
1 parent 7eeba80319
commit d5b4851a8f
9 files changed
+306 -44
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/assets/js/ssr.js
+121
View File
@@ -0,0 +1,121 @@
var art = new Artplayer({
useSSR: true,
container: '.artplayer-app',
url: 'https://artplayer.org/assets/sample/video.mp4',
title: 'One More Time One More Chance',
poster: '/assets/sample/poster.jpg',
volume: 0.5,
isLive: false,
muted: false,
autoplay: false,
pip: true,
autoSize: true,
autoMini: true,
screenshot: true,
setting: true,
loop: true,
flip: true,
rotate: true,
playbackRate: true,
aspectRatio: true,
fullscreen: true,
fullscreenWeb: true,
subtitleOffset: true,
miniProgressBar: true,
localVideo: true,
localSubtitle: true,
networkMonitor: false,
mutex: true,
light: true,
backdrop: true,
log: true,
theme: '#ffad00',
lang: navigator.language.toLowerCase(),
moreVideoAttr: {
crossOrigin: 'anonymous',
},
contextmenu: [
{
html: 'Custom menu',
click: function (contextmenu) {
console.info('You clicked on the custom menu');
contextmenu.show = false;
},
},
],
layers: [
{
html: `<img style="width: 100px" src="/assets/sample/layer.png">`,
click: function () {
console.info('You clicked on the custom layer');
},
style: {
position: 'absolute',
top: '20px',
right: '20px',
opacity: '.9',
},
},
],
quality: [
{
default: true,
name: 'SD 480P',
url: '/assets/sample/video.mp4',
},
{
name: 'HD 720P',
url: '/assets/sample/video.mp4',
},
],
thumbnails: {
url: '/assets/sample/thumbnails.png',
number: 100,
width: 160,
height: 90,
column: 10,
},
subtitle: {
url: '/assets/sample/subtitle.srt',
style: {
color: '#03A9F4',
},
encoding: 'utf-8',
bilingual: true,
},
highlight: [
{
time: 60,
text: 'One more chance',
},
{
time: 120,
text: '谁でもいいはずなのに',
},
{
time: 180,
text: '夏の想い出がまわる',
},
{
time: 240,
text: 'こんなとこにあるはずもないのに',
},
{
time: 300,
text: '终わり',
},
],
controls: [
{
position: 'right',
html: 'Control',
click: function () {
console.info('You clicked on the custom control');
},
},
],
icons: {
loading: '<img src="/assets/img/ploading.gif">',
state: '<img src="/assets/img/state.png">',
},
});
docs/ssr.html
+93
View File
@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Artplayer.js</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="keywords" content="artplayer, player, js, html5, video" />
<meta name="description" content="ArtPlayer.js is a modern and full featured HTML5 video player" />
<link rel="shortcut icon" href="./assets/img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="./assets/css/normalize.css">
<style>
html,
body {
height: 100%;
}
.container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.artplayer-app {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div class="container">
<div class="artplayer-app">
<div class="art-undercover"></div>
<div class="art-video-player art-subtitle-show art-layer-show" style="--theme: red">
<video class="art-video"></video>
<div class="art-poster"></div>
<div class="art-subtitle"></div>
<div class="art-danmuku"></div>
<div class="art-layers"></div>
<div class="art-mask">
<div class="art-state"></div>
</div>
<div class="art-bottom">
<div class="art-progress"></div>
<div class="art-controls">
<div class="art-controls-left"></div>
<div class="art-controls-right"></div>
</div>
</div>
<div class="art-loading"></div>
<div class="art-notice">
<div class="art-notice-inner"></div>
</div>
<div class="art-settings">
<div class="art-setting-inner">
<div class="art-setting-body"></div>
</div>
</div>
<div class="art-mini-header">
<div class="art-mini-title"></div>
<div class="art-mini-close">×</div>
</div>
<div class="art-contextmenus"></div>
</div>
</div>
</div>
<script src="./uncompiled/artplayer.js?t=6"></script>
<script src="./assets/js/ssr.js"></script>
<script>
var isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
window.location.hostname === '[::1]' ||
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
var _hmt = _hmt || [];
(function () {
if (!isLocalhost) {
var hm = document.createElement('script');
hm.src = 'https://hm.baidu.com/hm.js?b6c9b8bafbf5fe7225160101dafbbc7d';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(hm, s);
}
})();
</script>
</body>
</html>
docs/uncompiled/artplayer.js
+64 -34
View File
@@ -786,6 +786,7 @@
localVideo: b,
localSubtitle: b,
networkMonitor: b,
useSSR: b,
plugins: [f],
whitelist: ["".concat(s, "|").concat(f, "|").concat(r)],
layers: [component],
@@ -882,13 +883,23 @@
value: function query$1(className) {
return query(className, this.$container);
}
}, {
key: "html",
value: function html() {
var theme = this.art.option.theme;
return "\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\"></video>\n <div class=\"art-poster\"></div>\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.30</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-mini-header\">\n <div class=\"art-mini-title\"></div>\n <div class=\"art-mini-close\">\xD7</div>\n </div>\n <div class=\"art-contextmenus\"></div>\n </div>\n ");
}
}, {
key: "desktop",
value: function desktop() {
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\"></video>\n <div class=\"art-poster\"></div>\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.30</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-mini-header\">\n <div class=\"art-mini-title\"></div>\n <div class=\"art-mini-close\">\xD7</div>\n </div>\n <div class=\"art-contextmenus\"></div>\n </div>\n ");
backdrop = _this$art$option.backdrop,
useSSR = _this$art$option.useSSR;
if (!useSSR) {
this.$container.innerHTML = this.html();
}
this.$undercover = this.query('.art-undercover');
this.$player = this.query('.art-video-player');
this.$video = this.query('.art-video');
@@ -919,8 +930,11 @@
if (backdrop) {
addClass(this.$settingInner, 'art-backdrop-filter');
addClass(this.$info, 'art-backdrop-filter');
addClass(this.$contextmenu, 'art-backdrop-filter');
if (this.$info) {
addClass(this.$info, 'art-backdrop-filter');
}
}
if (this.art.isMobile) {
@@ -3602,41 +3616,56 @@
classCallCheck(this, Info);
_this = _super.call(this, art);
_this.art = art;
_this.name = 'info';
var _art$template = art.template,
$infoPanel = _art$template.$infoPanel,
$infoClose = _art$template.$infoClose,
$video = _art$template.$video,
proxy = art.events.proxy;
proxy($infoClose, 'click', function () {
_this.show = false;
});
var timer = null;
var types = queryAll('[data-video]', $infoPanel);
art.on('destroy', function () {
clearTimeout(timer);
});
function loop() {
types.forEach(function (item) {
var value = $video[item.dataset.video];
item.innerText = typeof value === 'number' ? value.toFixed(2) : value;
});
timer = setTimeout(function () {
loop();
}, 1000);
if (_this.art.template.$info) {
_this.init();
}
art.on('info', function (value) {
clearTimeout(timer);
if (value) {
loop();
}
});
return _this;
}
createClass(Info, [{
key: "init",
value: function init() {
var _this2 = this;
var _this$art = this.art,
_this$art$template = _this$art.template,
$infoPanel = _this$art$template.$infoPanel,
$infoClose = _this$art$template.$infoClose,
$video = _this$art$template.$video,
proxy = _this$art.events.proxy;
proxy($infoClose, 'click', function () {
_this2.show = false;
});
var timer = null;
var types = queryAll('[data-video]', $infoPanel);
this.art.on('destroy', function () {
clearTimeout(timer);
});
function loop() {
types.forEach(function (item) {
var value = $video[item.dataset.video];
item.innerText = typeof value === 'number' ? value.toFixed(2) : value;
});
timer = setTimeout(function () {
loop();
}, 1000);
}
this.art.on('info', function (value) {
clearTimeout(timer);
if (value) {
loop();
}
});
}
}]);
return Info;
}(Component);
@@ -3889,7 +3918,7 @@
function viewInit(art, events) {
var player = art.player,
autoMini = art.option.autoMini,
option = art.option,
$container = art.template.$container;
var scrollFn = throttle(function () {
art.emit('view', isInViewport($container, 50));
@@ -3898,7 +3927,7 @@
scrollFn();
});
art.on('view', function (state) {
if (autoMini) {
if (option.autoMini) {
player.mini = !state;
}
});
@@ -5069,6 +5098,7 @@
localVideo: false,
localSubtitle: false,
networkMonitor: false,
useSSR: false,
layers: [],
contextmenu: [],
controls: [],
docs/uncompiled/artplayer.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/classCallCheck.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/createClass.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/inherits.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/typeof.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/isNativeFunction.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/construct.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/iterableToArray.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/exclusiveInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.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/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/_screenfull@5.0.2@screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/fullscreenRotateMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/lightMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMin.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/superPropBase.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/src/control/quality.js","..Line truncated
{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/classCallCheck.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/createClass.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/inherits.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/typeof.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/isNativeFunction.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/construct.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/iterableToArray.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/exclusiveInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.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/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/_screenfull@5.0.2@screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/fullscreenRotateMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/lightMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMin.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/superPropBase.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/src/control/quality.js","..Line truncated
packages/artplayer/src/index.js
+1
View File
@@ -131,6 +131,7 @@ export default class Artplayer extends Emitter {
localVideo: false,
localSubtitle: false,
networkMonitor: false,
useSSR: false,
layers: [],
contextmenu: [],
controls: [],
packages/artplayer/src/info.js
+10 -5
View File
@@ -4,13 +4,18 @@ import Component from './utils/component';
export default class Info extends Component {
constructor(art) {
super(art);
this.art = art;
this.name = 'info';
if (this.art.template.$info) {
this.init();
}
}
init() {
const {
template: { $infoPanel, $infoClose, $video },
events: { proxy },
} = art;
} = this.art;
proxy($infoClose, 'click', () => {
this.show = false;
@@ -19,12 +24,12 @@ export default class Info extends Component {
let timer = null;
const types = queryAll('[data-video]', $infoPanel);
art.on('destroy', () => {
this.art.on('destroy', () => {
clearTimeout(timer);
});
function loop() {
types.forEach(item => {
types.forEach((item) => {
const value = $video[item.dataset.video];
item.innerText = typeof value === 'number' ? value.toFixed(2) : value;
});
@@ -33,7 +38,7 @@ export default class Info extends Component {
}, 1000);
}
art.on('info', value => {
this.art.on('info', (value) => {
clearTimeout(timer);
if (value) {
loop();
packages/artplayer/src/scheme/index.js
+1
View File
@@ -57,6 +57,7 @@ export default {
localVideo: b,
localSubtitle: b,
networkMonitor: b,
useSSR: b,
plugins: [f],
whitelist: [`${s}|${f}|${r}`],
layers: [component],
packages/artplayer/src/template.js
+14 -4
View File
@@ -27,9 +27,9 @@ export default class Template {
return query(className, this.$container);
}
desktop() {
const { theme, backdrop } = this.art.option;
this.$container.innerHTML = `
html() {
const { theme } = this.art.option;
return `
<div class="art-undercover"></div>
<div class="art-video-player art-subtitle-show art-layer-show" style="--theme: ${theme}">
<video class="art-video"></video>
@@ -94,6 +94,14 @@ export default class Template {
<div class="art-contextmenus"></div>
</div>
`;
}
desktop() {
const { backdrop, useSSR } = this.art.option;
if (!useSSR) {
this.$container.innerHTML = this.html();
}
this.$undercover = this.query('.art-undercover');
this.$player = this.query('.art-video-player');
@@ -125,8 +133,10 @@ export default class Template {
if (backdrop) {
addClass(this.$settingInner, 'art-backdrop-filter');
addClass(this.$info, 'art-backdrop-filter');
addClass(this.$contextmenu, 'art-backdrop-filter');
if (this.$info) {
addClass(this.$info, 'art-backdrop-filter');
}
}
if (this.art.isMobile) {
packages/artplayer/types/artplayer.d.ts
Vendored
+1
View File
@@ -47,6 +47,7 @@ export default class Artplayer {
localVideo?: boolean;
localSubtitle?: boolean;
networkMonitor?: boolean;
useSSR?: boolean;
plugins?: Function[];
whitelist?: (string | Function | RegExp)[];
layers?: Component[];