133 lines
2.8 KiB
Vue
133 lines
2.8 KiB
Vue
<template>
|
||
<view class="video-container">
|
||
<!-- H5端使用原生video标签 -->
|
||
<!-- #ifdef H5 -->
|
||
<video
|
||
data-component-name="diy-video"
|
||
class="diy-video h5-video"
|
||
:src="getVideoUrl()"
|
||
:poster="$util.img(value.imageUrl)"
|
||
:style="videoWarpCss"
|
||
controls
|
||
preload="auto"
|
||
@click="handlerClick(getVideoUrl())"
|
||
></video>
|
||
<!-- #endif -->
|
||
|
||
<!-- 微信小程序端使用uni-app的video组件 -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<video
|
||
data-component-name="diy-video"
|
||
class="diy-video mp-video"
|
||
:src="getVideoUrl()"
|
||
:poster="$util.img(value.imageUrl)"
|
||
:style="videoWarpCss"
|
||
objectFit="cover"
|
||
controls
|
||
@tap="handlerClick(getVideoUrl())"
|
||
></video>
|
||
<!-- #endif -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// 视频
|
||
import DiyMinx from './minx.js'
|
||
export default {
|
||
name: 'diy-video',
|
||
props: {
|
||
value: {
|
||
type: Object
|
||
}
|
||
},
|
||
data() {
|
||
return {};
|
||
},
|
||
created() { },
|
||
mixins: [DiyMinx],
|
||
watch: {
|
||
// 组件刷新监听
|
||
componentRefresh: function (nval) { }
|
||
},
|
||
computed: {
|
||
videoWarpCss: function () {
|
||
var obj = '';
|
||
if (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;
|
||
}
|
||
},
|
||
methods: {
|
||
// 获取视频URL，根据格式决定是否使用$util.img()处理
|
||
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);
|
||
},
|
||
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;
|
||
}
|
||
|
||
/* 基础样式 */
|
||
.diy-video {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* H5端样式 - 横屏 */
|
||
/* #ifdef H5 */
|
||
.video-container {
|
||
aspect-ratio: 16/9;
|
||
}
|
||
|
||
.h5-video {
|
||
display: block;
|
||
object-fit: cover;
|
||
}
|
||
/* #endif */
|
||
|
||
/* 微信小程序端样式 - 竖屏 */
|
||
/* #ifdef MP-WEIXIN */
|
||
.video-container {
|
||
aspect-ratio: 9/16;
|
||
}
|
||
|
||
.mp-video {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.mp-video>>>.uni-video-container {
|
||
background-color: transparent;
|
||
height: 100%;
|
||
}
|
||
|
||
.mp-video>>>.uni-video-control {
|
||
display: flex;
|
||
}
|
||
/* #endif */
|
||
</style> |