diff --git a/components-diy/diy-video.vue b/components-diy/diy-video.vue index 28a4012..f770f7a 100644 --- a/components-diy/diy-video.vue +++ b/components-diy/diy-video.vue @@ -61,13 +61,14 @@ export default { } }, data() { - return { - videoRatio: null, - videoUrl: '', - posterUrl: '', - windowWidth: 0 - }; - }, + return { + videoWidth: 0, + videoHeight: 0, + videoUrl: '', + posterUrl: '', + windowWidth: 0 + }; + }, created() { this.initVideoData(); this.initWindowWidth(); @@ -97,44 +98,27 @@ export default { // 动态计算容器比例 containerStyle() { let style = ''; + const defaultRatio = 9 / 16; + + let ratio = defaultRatio; + if (this.videoWidth && this.videoHeight) { + ratio = this.videoHeight / this.videoWidth; + } // #ifdef H5 - if (this.videoRatio === 'landscape') { - style += 'aspect-ratio: 16 / 9;'; - } else if (this.videoRatio === 'portrait') { - style += 'aspect-ratio: 9 / 16;'; - } else { - style += 'aspect-ratio: 9 / 16;'; - } + style += 'padding-top: ' + (ratio * 100) + '%;'; // #endif // #ifdef MP-WEIXIN - if (this.videoRatio === 'landscape') { - style += 'padding-top: 56.25%;'; - } else if (this.videoRatio === 'portrait') { - style += 'padding-top: 177.78%;'; - } else { - style += 'padding-top: 177.78%;'; - } + style += 'padding-top: ' + (ratio * 100) + '%;'; // #endif // #ifdef MP-HARMONY style += 'width: 100%;'; - style += 'height: ' + this.harmonyVideoHeight + 'px;'; + style += 'height: ' + (this.windowWidth * ratio) + 'px;'; // #endif return style; - }, - - // 鸿蒙平台视频高度 - harmonyVideoHeight() { - if (!this.videoRatio) { - return (this.windowWidth * 9) / 16; - } - if (this.videoRatio === 'landscape') { - return (this.windowWidth * 9) / 16; - } - return (this.windowWidth * 16) / 9; } }, methods: { @@ -192,7 +176,8 @@ export default { const height = video.videoHeight; if (width && height) { - this.videoRatio = width >= height ? 'landscape' : 'portrait'; + this.videoWidth = width; + this.videoHeight = height; } }); @@ -231,7 +216,8 @@ export default { // #endif if (width && height) { - this.videoRatio = width >= height ? 'landscape' : 'portrait'; + this.videoWidth = width; + this.videoHeight = height; } }, @@ -277,6 +263,11 @@ export default { /* H5端样式 */ /* #ifdef H5 */ .h5-video { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; object-fit: cover; } /* #endif */