You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
264 lines
5.9 KiB
264 lines
5.9 KiB
<!--
|
|
版本声明：
|
|
* 由于 WanlLive、WanlChat、WanlPay 以下代码开发难度较大，已将相关代码独立申请著作权，受法律保护！！！
|
|
* 无论你购买任何版本，均不允许复制到第三方直接、间接使用，且也不能以学习为目的参考和借鉴！！
|
|
* 你仅有在 WanlShop 中使用、二次开发权利，否则我们会追究法律责任
|
|
* 深圳前海万联科技有限公司 @www.i36k.com
|
|
* 法律顾问：易法通 @http://www.yifatong.com/
|
|
-->
|
|
<template>
|
|
<view class="flex justify-center align-center" :style="{ width: `${width}px` }">
|
|
<!-- 1.0.9临时 -->
|
|
<!-- :initial-time="startTime" -->
|
|
<video
|
|
:id="`video${videoId}`"
|
|
ref="`video${videoId}`"
|
|
class="flex justify-center align-center"
|
|
:style="{ height: `${height}px`, width: `${width}px` }"
|
|
:src="src"
|
|
:controls="false"
|
|
:show-play-btn="false"
|
|
:enable-progress-gesture="false"
|
|
:object-fit="videoFit"
|
|
:muted="!initialize || !play"
|
|
loop
|
|
@play="continuePlay"
|
|
@timeupdate="timeupdate"
|
|
/>
|
|
<view class="position-absolute" v-if="!play && !OpenCover">
|
|
<text class="icon"></text>
|
|
</view>
|
|
<!-- 封面图片 -->
|
|
<view class="position-absolute" v-if="OpenCover">
|
|
<image
|
|
:style="{ height: `${height}px`, width: `${width}px` }"
|
|
:src="coverUrl"
|
|
mode="aspectFill"
|
|
/>
|
|
<!-- #ifndef H5 -->
|
|
<view class="position-center align-center justify-center">
|
|
<text class="icon icon-spin"></text>
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
<!-- 上阴影 -->
|
|
<view class="video-top"/>
|
|
<!-- 下阴影 -->
|
|
<view class="video-bottom"/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
videoId: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
src: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
play: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
width: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
|
|
objectFit: {
|
|
type: String,
|
|
default: 'cover'
|
|
},
|
|
coverUrl: { //视频封面的图片
|
|
type: String,
|
|
default: ''
|
|
},
|
|
initialTime: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
gDuration: {
|
|
type: Number,
|
|
default: 999
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
videoFit: 'cover', // 优化HBuilder展示bug
|
|
time: 0, // 时间类
|
|
duration: 0, // 视频时长
|
|
OpenCover: true, // 是否开启封面
|
|
initialize: false, // 初始化
|
|
videoTimer: null,// 计时器
|
|
}
|
|
},
|
|
mounted() {
|
|
// 修复HBuilder X 3.1.22 App端视频展示BUG，如果官方修复此问题video直接调用objectFit
|
|
this.videoFit = this.objectFit
|
|
// #ifdef APP-PLUS
|
|
let sys = uni.getSystemInfoSync();
|
|
if(sys.platform === 'ios'){
|
|
if(this.objectFit === 'cover'){
|
|
this.videoFit = 'fill'
|
|
}
|
|
}
|
|
// #endif
|
|
let video = `video${this.videoId}`;
|
|
this.videoContext = uni.createVideoContext(video, this);
|
|
setTimeout(() => {
|
|
this.videoContext.play();
|
|
}, 10);
|
|
},
|
|
methods: {
|
|
continuePlay() {
|
|
if (!this.initialize) {
|
|
setTimeout(() => {
|
|
this.initialize = true;
|
|
this.videoPlay();
|
|
}, 100);
|
|
}
|
|
},
|
|
// 拖动滑块 1.0.9临时
|
|
// changeCurrent(e) {
|
|
// this.time = e.detail.value;
|
|
// this.videoContext.seek(this.time);
|
|
// },
|
|
timeupdate(event) {
|
|
// 1.0.9临时
|
|
// this.duration = event.detail.duration;
|
|
// if (this.time >= event.detail.duration) this.time = 0;
|
|
// this.time = event.detail.currentTime;
|
|
},
|
|
videoPlay() {
|
|
if (this.videoTimer) {
|
|
clearTimeout(this.videoTimer);
|
|
}
|
|
this.videoTimer = setTimeout(() => {
|
|
if (this.play) {
|
|
this.videoContext.play();
|
|
this.OpenCover = false;
|
|
} else {
|
|
this.videoContext.pause();
|
|
// 1.0.9临时
|
|
// this.$emit('pause', this.time);
|
|
}
|
|
});
|
|
// if (this.play) {
|
|
// this.videoContext.play();
|
|
// this.OpenCover = false;
|
|
// } else {
|
|
// this.videoContext.pause();
|
|
// this.$emit('pause', this.time);
|
|
// }
|
|
}
|
|
},
|
|
watch: {
|
|
//防抖 防止视频播放暂停太快
|
|
play: function(newVal, oldVal) {
|
|
if (this.initialize) this.videoPlay();
|
|
},
|
|
// 1.0.9临时
|
|
// startTime: {
|
|
// immediate: true,
|
|
// handler(newVal, oldVal) {
|
|
// this.time = newVal;
|
|
// }
|
|
// },
|
|
gDuration: {
|
|
immediate: true,
|
|
handler(newVal, oldVal) {
|
|
this.duration = newVal;
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
barWidth() {
|
|
let width = (this.time / this.duration) * parseInt(this.width);
|
|
return `${width}px`;
|
|
},
|
|
// 1.0.9临时
|
|
// startTime() {
|
|
// return this.initialTime;
|
|
// }
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
@import '@/static/style/wanlnvue.css';
|
|
|
|
|
|
.icon{
|
|
opacity: 0.6;
|
|
font-size: 120rpx;
|
|
color: #fff;
|
|
}
|
|
.icon-spin{
|
|
//#ifndef APP-PLUS-NVUE
|
|
animation: spin 1.5s infinite linear;
|
|
//#endif
|
|
}
|
|
.video-top{
|
|
position: absolute;
|
|
top:0;
|
|
background-image: linear-gradient(to top , rgba(0,0,0,0) , rgba(0,0,0,0.4));
|
|
width: 750rpx;
|
|
height: 300rpx;
|
|
}
|
|
.video-bottom{
|
|
position: absolute;
|
|
bottom: 0;
|
|
background-image: linear-gradient(to top , rgba(0,0,0,0.4) , rgba(0,0,0,0));
|
|
width: 750rpx;
|
|
height: 300rpx;
|
|
}
|
|
.slider-view{
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 30px;
|
|
width: 750rpx;
|
|
}
|
|
.progressBar{
|
|
border-radius: 2rpx;
|
|
height: 4rpx;
|
|
background-color: rgba(255,255,255,0.3);
|
|
z-index: 999999;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
//#ifndef APP-PLUS-NVUE
|
|
animation: flicker 4s linear infinite;
|
|
animation-direction:alternate;
|
|
//#endif
|
|
}
|
|
/* #ifndef APP-PLUS-NVUE */
|
|
@keyframes flicker {
|
|
0% { box-shadow:0 0 0 #FFFFFF; }
|
|
/** 暂停效果 */
|
|
10% { box-shadow:0 0 2upx #FFFFFF; }
|
|
50% { box-shadow:0 0 10upx #FFFFFF; }
|
|
60% { box-shadow:0 0 12upx #FFFFFF; }
|
|
90% { box-shadow:0 0 18upx #FFFFFF; }
|
|
100% { box-shadow:0 0 20upx #FFFFFF; }
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: rotate(359deg);
|
|
transform: rotate(359deg);
|
|
}
|
|
}
|
|
/* #endif */
|
|
</style>
|
|
|
|
|