build all packages

packages/artplayer/src/player/attrInit.js

@@ -1,13 +1,13 @@
-import { clamp } from '../utils';
+import { clamp, setStyle } from '../utils';
 
 export default function attrInit(art, player) {
     const {
         option,
         storage,
-        template: { $video },
+        template: { $video, $poster },
     } = art;
 
-    Object.keys(option.moreVideoAttr).forEach(key => {
+    Object.keys(option.moreVideoAttr).forEach((key) => {
         $video[key] = option.moreVideoAttr[key];
     });
 
@@ -25,7 +25,8 @@ export default function attrInit(art, player) {
     }
 
     if (option.poster) {
-        $video.poster = option.poster;
+        // $video.poster = option.poster;
+        setStyle($poster, 'backgroundImage', `url(${option.poster})`);
     }
 
     if (option.autoplay) {

packages/artplayer/src/player/eventInit.js

@@ -1,11 +1,11 @@
 import config from '../config';
-import { sleep, addClass } from '../utils';
+import { sleep, addClass, setStyle } from '../utils';
 
 export default function eventInit(art, player) {
     const {
         option,
         events: { proxy },
-        template: { $player, $video },
+        template: { $player, $video, $poster },
         i18n,
         notice,
     } = art;
@@ -105,6 +105,7 @@ export default function eventInit(art, player) {
 
     art.on('video:play', () => {
         art.mask.show = false;
+        setStyle($poster, 'display', 'none');
     });
 
     art.on('video:playing', () => {

packages/artplayer/src/style/index.scss

@@ -1,5 +1,6 @@
 @import './artplayer.scss';
 @import './video.scss';
+@import './poster.scss';
 @import './subtitle.scss';
 @import './danmuku.scss';
 @import './layers.scss';

packages/artplayer/src/style/poster.scss

@@ -0,0 +1,17 @@
+.art-video-player {
+    .art-poster {
+        position: absolute;
+        z-index: 11;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        user-select: none;
+        pointer-events: none;
+    }
+}

packages/artplayer/src/template.js

@@ -33,6 +33,7 @@ export default class Template {
           <div class="art-undercover"></div>
           <div class="art-video-player art-subtitle-show art-layer-show" style="--theme: ${theme}">
             <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>
@@ -97,6 +98,7 @@ export default class Template {
         this.$undercover = this.query('.art-undercover');
         this.$player = this.query('.art-video-player');
         this.$video = this.query('.art-video');
+        this.$poster = this.query('.art-poster');
         this.$subtitle = this.query('.art-subtitle');
         this.$danmuku = this.query('.art-danmuku');
         this.$bottom = this.query('.art-bottom');