ZF sun
c739d691a2
1. 新增鸿蒙平台专属video组件渲染分支 2. 新增窗口宽度初始化逻辑用于计算鸿蒙视频高度 3. 针对不同平台调整视频容器样式计算逻辑 4. 补充视频加载元数据和错误回调 5. 修复微信小程序视频比例适配逻辑
305 lines
6.7 KiB
Vue
305 lines
6.7 KiB
Vue
<template>
|
||
<view class="video-container" :style="containerStyle">
|
||
<!-- H5端使用原生video标签 -->
|
||
<!-- #ifdef H5 -->
|
||
<video
|
||
ref="videoRef"
|
||
data-component-name="diy-video"
|
||
class="diy-video h5-video"
|
||
:src="videoUrl"
|
||
:poster="posterUrl"
|
||
:style="videoWarpCss"
|
||
controls
|
||
preload="metadata"
|
||
@loadedmetadata="onVideoLoaded"
|
||
@click="handlerClick(videoUrl)"
|
||
></video>
|
||
<!-- #endif -->
|
||
|
||
<!-- 微信小程序端使用uni-app的video组件 -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<video
|
||
ref="videoRef"
|
||
data-component-name="diy-video"
|
||
class="diy-video mp-video"
|
||
:src="videoUrl"
|
||
:poster="posterUrl"
|
||
:style="videoWarpCss"
|
||
controls
|
||
object-fit="cover"
|
||
@loadedmetadata="onVideoLoaded"
|
||
@error="onVideoError"
|
||
></video>
|
||
<!-- #endif -->
|
||
|
||
<!-- 鸿蒙元服务端使用uni-app的video组件 -->
|
||
<!-- #ifdef MP-HARMONY -->
|
||
<video
|
||
ref="videoRef"
|
||
data-component-name="diy-video"
|
||
class="diy-video harmony-video"
|
||
:src="videoUrl"
|
||
:poster="posterUrl"
|
||
:style="videoWarpCss"
|
||
controls
|
||
object-fit="cover"
|
||
@loadedmetadata="onVideoLoaded"
|
||
@error="onVideoError"
|
||
></video>
|
||
<!-- #endif -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// 视频
|
||
import DiyMinx from './minx.js'
|
||
export default {
|
||
name: 'diy-video',
|
||
props: {
|
||
value: {
|
||
type: Object
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
videoRatio: null,
|
||
videoUrl: '',
|
||
posterUrl: '',
|
||
windowWidth: 0
|
||
};
|
||
},
|
||
created() {
|
||
this.initVideoData();
|
||
this.initWindowWidth();
|
||
},
|
||
mixins: [DiyMinx],
|
||
watch: {
|
||
value: {
|
||
immediate: true,
|
||
handler(newVal) {
|
||
if (newVal) {
|
||
this.initVideoData();
|
||
}
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
videoWarpCss: function () {
|
||
var obj = '';
|
||
if (this.value && this.value.componentAngle == 'round') {
|
||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||
}
|
||
return obj;
|
||
},
|
||
// 动态计算容器比例
|
||
containerStyle() {
|
||
let style = '';
|
||
|
||
// #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;';
|
||
}
|
||
// #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%;';
|
||
}
|
||
// #endif
|
||
|
||
// #ifdef MP-HARMONY
|
||
style += 'width: 100%;';
|
||
style += 'height: ' + this.harmonyVideoHeight + '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: {
|
||
// 初始化视频数据
|
||
initVideoData() {
|
||
this.videoUrl = this.getVideoUrl();
|
||
this.posterUrl = this.getPosterUrl();
|
||
// H5端：预加载视频获取宽高
|
||
// #ifdef H5
|
||
this.preloadVideoForRatio();
|
||
// #endif
|
||
},
|
||
|
||
// 初始化窗口宽度
|
||
initWindowWidth() {
|
||
try {
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
this.windowWidth = systemInfo.windowWidth || 375;
|
||
} catch (e) {
|
||
this.windowWidth = 375;
|
||
}
|
||
},
|
||
|
||
// 获取视频URL
|
||
getVideoUrl() {
|
||
if (!this.value || !this.value.videoUrl) return '';
|
||
const videoUrl = this.value.videoUrl;
|
||
// 如果是完整的http/https链接，直接使用
|
||
if (videoUrl.indexOf('http://') === 0 || videoUrl.indexOf('https://') === 0) {
|
||
return videoUrl;
|
||
}
|
||
// 否则使用$util.img()处理
|
||
return this.$util.img(videoUrl);
|
||
},
|
||
|
||
// 获取封面图URL
|
||
getPosterUrl() {
|
||
if (!this.value || !this.value.imageUrl) return '';
|
||
return this.$util.img(this.value.imageUrl);
|
||
},
|
||
|
||
// H5端：预加载视频获取宽高比例
|
||
preloadVideoForRatio() {
|
||
const videoUrl = this.videoUrl;
|
||
if (!videoUrl) return;
|
||
|
||
const video = document.createElement('video');
|
||
video.preload = 'metadata';
|
||
video.src = videoUrl;
|
||
video.muted = true;
|
||
video.playsInline = true;
|
||
|
||
video.addEventListener('loadedmetadata', () => {
|
||
const width = video.videoWidth;
|
||
const height = video.videoHeight;
|
||
|
||
if (width && height) {
|
||
this.videoRatio = width >= height ? 'landscape' : 'portrait';
|
||
}
|
||
});
|
||
|
||
video.addEventListener('error', (e) => {
|
||
console.error(this.$lang('components-diy.diy-video.h5PreloadFailed') + ':', e);
|
||
});
|
||
|
||
// 触发加载
|
||
video.load();
|
||
},
|
||
|
||
// 视频加载完成事件（组件内video标签）
|
||
onVideoLoaded(event) {
|
||
let width = 0;
|
||
let height = 0;
|
||
|
||
// #ifdef H5
|
||
if (event && event.target) {
|
||
width = event.target.videoWidth || 0;
|
||
height = event.target.videoHeight || 0;
|
||
}
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN
|
||
if (event && event.detail) {
|
||
width = event.detail.width || 0;
|
||
height = event.detail.height || 0;
|
||
}
|
||
// #endif
|
||
|
||
// #ifdef MP-HARMONY
|
||
if (event && event.detail) {
|
||
width = event.detail.width || 0;
|
||
height = event.detail.height || 0;
|
||
}
|
||
// #endif
|
||
|
||
if (width && height) {
|
||
this.videoRatio = width >= height ? 'landscape' : 'portrait';
|
||
}
|
||
},
|
||
|
||
// 视频播放事件
|
||
onVideoPlay() {
|
||
},
|
||
|
||
// 视频暂停事件
|
||
onVideoPause() {
|
||
},
|
||
|
||
// 视频错误事件
|
||
onVideoError(event) {
|
||
console.error(this.$lang('components-diy.diy-video.videoLoadFailed') + ':', event);
|
||
},
|
||
|
||
async handlerClick(videoUrl) {
|
||
await this.__$emitEvent({
|
||
eventName: 'video-tap', data: videoUrl, promiseCallback: (event, handler, awaitedResult) => {
|
||
if (!awaitedResult) return;
|
||
}
|
||
})
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.video-container {
|
||
width: 100%;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background-color: #000;
|
||
}
|
||
|
||
/* 基础样式 */
|
||
.diy-video {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
/* H5端样式 */
|
||
/* #ifdef H5 */
|
||
.h5-video {
|
||
object-fit: cover;
|
||
}
|
||
/* #endif */
|
||
|
||
/* 微信小程序端样式 */
|
||
/* #ifdef MP-WEIXIN */
|
||
.mp-video {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
/* #endif */
|
||
|
||
/* 鸿蒙元服务端样式 */
|
||
/* #ifdef MP-HARMONY */
|
||
.harmony-video {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
box-sizing: border-box;
|
||
}
|
||
/* #endif */
|
||
</style>
|