fix(single): stop the video cover letterboxing inside its ratio box
The player init wrote an inline object-fit:contain on the video element, which outranked the injected stylesheet's object-fit:cover fill contract and left black bars above/below whenever the cover box ratio differed from the video. Drop the inline style so the stylesheet rule is the single source of truth, and pin the no-inline-style rule in the cover contract test.
This commit is contained in:
1 parent
6ffc5ba3d6
commit
7c0d5945ca
2 files changed
+7
-1
No files matched your search
@@ -83,7 +83,8 @@
|
|||||||
if (this.loop) this.video.loop = true;
|
if (this.loop) this.video.loop = true;
|
||||||
if (this.muted) this.video.muted = true;
|
if (this.muted) this.video.muted = true;
|
||||||
if (this.poster) this.video.poster = this.poster;
|
if (this.poster) this.video.poster = this.poster;
|
||||||
this.video.style.cssText = 'display:block;width:100%;height:100%;object-fit:contain;max-height:none;';
|
// 视频尺寸/裁切全部由注入样式表的 .aksrt-video video 规则决定,
|
||||||
|
// 禁止再加内联样式(内联 cover/contain 会覆盖契约导致信箱式黑边)。
|
||||||
|
|
||||||
// Play overlay
|
// Play overlay
|
||||||
this.overlay = document.createElement('div');
|
this.overlay = document.createElement('div');
|
||||||
|
|||||||
@@ -99,6 +99,11 @@ test('video cover: the player video fills and center-crops like the image cover'
|
|||||||
/max-height:70vh/,
|
/max-height:70vh/,
|
||||||
'封面盒高度由比例盒决定,不得再套 70vh 截断'
|
'封面盒高度由比例盒决定,不得再套 70vh 截断'
|
||||||
);
|
);
|
||||||
|
assert.doesNotMatch(
|
||||||
|
player,
|
||||||
|
/video\.style\.cssText/,
|
||||||
|
'视频不得携带内联样式:内联 object-fit 会以更高优先级覆盖注入样式表的 cover 契约,产生信箱式黑边'
|
||||||
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('video cover: play never runs against a sourceless player', () => {
|
test('video cover: play never runs against a sourceless player', () => {
|
||||||
|
|||||||
Reference in new issue
Block a user