add posterMix

docs/assets/js/ssr.js

@@ -1,6 +1,17 @@
+const $container = document.querySelector('.artplayer-app');
+
+// 在服务器端可以直接访问 Artplayer.html 属性，返回供 ssr 使用的 html
+// 然后直接插值于播放器的容器里
+// const Artplayer = require('artplayer');
+// console.log(Artplayer.html);
+// 在浏览器端，开启 useSSR 即可
+
+// 模拟效果
+$container.innerHTML = Artplayer.html;
+
 var art = new Artplayer({
     useSSR: true,
-    container: '.artplayer-app',
+    container: $container,
     url: 'https://artplayer.org/assets/sample/video.mp4',
     title: 'One More Time One More Chance',
     poster: '/assets/sample/poster.jpg',

docs/ssr.html

@@ -33,40 +33,7 @@
 
 <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 class="artplayer-app"></div>
     </div>
     <script src="./uncompiled/artplayer.js?t=6"></script>
     <script src="./assets/js/ssr.js"></script>

docs/uncompiled/artplayer.js

@@ -225,7 +225,7 @@
     return Emitter;
   }();
 
-  var userAgent = window.navigator.userAgent;
+  var userAgent = typeof window !== 'undefined' ? window.navigator.userAgent : '';
   var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
   var isSafari = /^((?!chrome|android).)*safari/i.test(userAgent);
   var isWechat = /MicroMessenger/i.test(userAgent);
@@ -883,21 +883,16 @@
       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,
             backdrop = _this$art$option.backdrop,
+            theme = _this$art$option.theme,
             useSSR = _this$art$option.useSSR;
 
         if (!useSSR) {
-          this.$container.innerHTML = this.html();
+          this.$container.innerHTML = Template.html;
         }
 
         this.$undercover = this.query('.art-undercover');
@@ -927,6 +922,7 @@
         this.$miniTitle = this.query('.art-mini-title');
         this.$miniClose = this.query('.art-mini-close');
         this.$contextmenu = this.query('.art-contextmenus');
+        setStyle(this.$player, '--theme', theme);
 
         if (backdrop) {
           addClass(this.$settingInner, 'art-backdrop-filter');
@@ -957,6 +953,11 @@
           addClass(this.$player, 'art-destroy');
         }
       }
+    }], [{
+      key: "html",
+      get: function get() {
+        return "\n          <div class=\"art-undercover\"></div>\n          <div class=\"art-video-player art-subtitle-show art-layer-show\">\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        ";
+      }
     }]);
 
     return Template;
@@ -2440,6 +2441,20 @@
     });
   }
 
+  function posterMix(art, player) {
+    var option = art.option,
+        $poster = art.template.$poster;
+    def(player, 'poster', {
+      get: function get() {
+        return option.poster;
+      },
+      set: function set(url) {
+        option.poster = url;
+        setStyle($poster, 'backgroundImage', "url(".concat(url, ")"));
+      }
+    });
+  }
+
   var Player = function Player(art) {
     classCallCheck(this, Player);
 
@@ -2472,6 +2487,7 @@
     miniMix(art, this);
     loopMin(art, this);
     rotateMix(art, this);
+    posterMix(art, this);
     proxyPropertys(art, this);
   };
 
@@ -5064,6 +5080,11 @@
       get: function get() {
         return optionValidator.kindOf;
       }
+    }, {
+      key: "html",
+      get: function get() {
+        return Template.html;
+      }
     }, {
       key: "option",
       get: function get() {

docs/uncompiled/artplayer.js.map

@@ -1 +1 @@
-{"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
+{"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/posterMix.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",".Line truncated

packages/artplayer/src/index.js

@@ -99,6 +99,10 @@ export default class Artplayer extends Emitter {
         return validator.kindOf;
     }
 
+    static get html() {
+        return Template.html;
+    }
+
     static get option() {
         return {
             container: '#artplayer',

packages/artplayer/src/player/index.js

@@ -27,6 +27,7 @@ import lightMix from './lightMix';
 import miniMix from './miniMix';
 import loopMin from './loopMin';
 import rotateMix from './rotateMix';
+import posterMix from './posterMix';
 import { proxyPropertys } from '../utils';
 
 export default class Player {
@@ -60,6 +61,7 @@ export default class Player {
         miniMix(art, this);
         loopMin(art, this);
         rotateMix(art, this);
+        posterMix(art, this);
         proxyPropertys(art, this);
     }
 }

packages/artplayer/src/player/posterMix.js

@@ -0,0 +1,16 @@
+import { def, setStyle } from '../utils';
+
+export default function posterMix(art, player) {
+    const {
+        option,
+        template: { $poster },
+    } = art;
+
+    def(player, 'poster', {
+        get: () => option.poster,
+        set(url) {
+            option.poster = url;
+            setStyle($poster, 'backgroundImage', `url(${url})`);
+        },
+    });
+}

packages/artplayer/src/template.js

@@ -1,4 +1,4 @@
-import { errorHandle, query, addClass } from './utils';
+import { errorHandle, query, addClass, setStyle } from './utils';
 
 export default class Template {
     constructor(art) {
@@ -23,15 +23,10 @@ export default class Template {
         }
     }
 
-    query(className) {
-        return query(className, this.$container);
-    }
-
-    html() {
-        const { theme } = this.art.option;
+    static get html() {
         return `
           <div class="art-undercover"></div>
-          <div class="art-video-player art-subtitle-show art-layer-show" style="--theme: ${theme}">
+          <div class="art-video-player art-subtitle-show art-layer-show">
             <video class="art-video"></video>
             <div class="art-poster"></div>
             <div class="art-subtitle"></div>
@@ -96,11 +91,15 @@ export default class Template {
         `;
     }
 
+    query(className) {
+        return query(className, this.$container);
+    }
+
     desktop() {
-        const { backdrop, useSSR } = this.art.option;
+        const { backdrop, theme, useSSR } = this.art.option;
 
         if (!useSSR) {
-            this.$container.innerHTML = this.html();
+            this.$container.innerHTML = Template.html;
         }
 
         this.$undercover = this.query('.art-undercover');
@@ -131,6 +130,8 @@ export default class Template {
         this.$miniClose = this.query('.art-mini-close');
         this.$contextmenu = this.query('.art-contextmenus');
 
+        setStyle(this.$player, '--theme', theme);
+
         if (backdrop) {
             addClass(this.$settingInner, 'art-backdrop-filter');
             addClass(this.$contextmenu, 'art-backdrop-filter');

packages/artplayer/src/utils/compatibility.js

@@ -1,4 +1,4 @@
-export const userAgent = window.navigator.userAgent;
+export const userAgent = typeof window !== 'undefined' ? window.navigator.userAgent : '';
 export const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
 export const isSafari = /^((?!chrome|android).)*safari/i.test(userAgent);
 export const isWechat = /MicroMessenger/i.test(userAgent);