zhengshuiqi 3 years ago
parent
commit
efabe2437f
  1. 73
      pages/index/index.vue

73
pages/index/index.vue

@ -12,6 +12,10 @@
export default {
data() {
return {
// interval: null,
// frameIndex: 0,
// frames: [],
html: '<video :autoplay="true" :enable-progress-gesture="true" muted="" style="width: 100%;" :src="item.goods_video" :mobilenet-hint-type="1" class="video_play" :http-cache="true" loop object-fit="contain" :direction="0" :show-mute-btn="true" @touchstart="touchStart" @touchend="touchEnd" @pause="VideoPuse()"></video>',
video: true,
// register
register: -1,
@ -325,6 +329,21 @@
},
methods: {
// onPlay() {
// this.frames = this.$refs.videoContext.getFrames()
// this.interval = setInterval(() => {
// this.frameIndex++
// if (this.frameIndex >= this.frames.length) {
// this.frameIndex = 0
// }
// }, 100)
// },
// onPause() {
// clearInterval(this.interval)
// },
// onTimeUpdate() {
// this.frameIndex = Math.floor(this.$refs.videoContext.currentTime * 10)
// },
isVideo() {
this.video = true
},
@ -1155,36 +1174,27 @@
block_name: item.short_name,
goodid: item.id
})
//
const videoContext = uni.createVideoContext('myVideo');
//
let videoFrames = [];
let videoDuration = 0;
uni.getVideoInfo({
src: item.goods_video,
success: (res) => {
videoDuration = res.duration;
let frameCount = Math.ceil(videoDuration * 25);
for (let i = 0; i < frameCount; i++) {
videoFrames.push(item.goods_video + '#t=' + (i / 25));
}
}
});
// setInterval
let currentFrameIndex = 0;
let interval = setInterval(() => {
if (currentFrameIndex >= videoFrames.length) {
clearInterval(interval);
return;
}
videoContext.src = videoFrames[currentFrameIndex];
currentFrameIndex++;
}, 40);
console.log(videoFrames);
// const canvas = uni.createCanvasContext('videoCanvas')
// canvas.width = 400
// canvas.height = 300
// setInterval(() => {
// const frame = item.goods_video.currentTime * item.goods_video.frameRate
// canvas.drawImage(item.goods_video, 0, 0, canvas.width, canvas.height)
// canvas.draw()
// }, 500 / item.goods_video.frameRate)
// let frames = item.goods_video.split(';');
// let i = 0;
// let interval = setInterval(() => {
// if (i < frames.length) {
// console.log(frames[i]);
// i++;
// } else {
// clearInterval(interval);
// }
// }, 1000);
// console.log(frames);
})
//////console.log(this.bestlist,'')
@ -1667,11 +1677,12 @@
<view v-for="(item,index) in leftList" :key="index">
<block v-if="item.goods_video">
<view style="position: relative; height: 225px;" >
<video :autoplay="true" :enable-progress-gesture="true" muted="" style="width: 100%;"
<video x-webkit-airplay="allow" x5-video-player-type="h5" :autoplay="true" :enable-progress-gesture="true" muted="" style="width: 100%;"
:mobilenet-hint-type="1" class="video_play" :http-cache="true" loop
object-fit="contain" :direction="0" :src="item.goods_video" :show-mute-btn="true"
@touchstart="touchStart" @touchend="touchEnd" @pause="VideoPuse()">
</video>
<!-- <video-context ref="videoContext" :src="item.goods_video" @play="onPlay" @pause="onPause" @timeupdate="onTimeUpdate"></video-context> -->
</view>
<view class="play_icon" v-show="!video" @click="isVideo"></view>
</block>
@ -1697,7 +1708,7 @@
<view v-for="(item1,index1) in rightList" :key="index1">
<block v-if="item1.goods_video">
<view style="position: relative; height: 225px;">
<video x5-video-player-type="h5-page" :autoplay="true" :enable-progress-gesture="true" muted="" style="width: 100%;"
<video x-webkit-airplay="allow" x5-video-player-type="h5" :autoplay="true" :enable-progress-gesture="true" muted="" style="width: 100%;"
:mobilenet-hint-type="1" class="video_play" :http-cache="true" @pause="VideoPuse()" loop
object-fit="contain" :direction="0" :src="item1.goods_video" :show-mute-btn="true"
@touchstart="touchStart" @touchend="touchEnd">

Loading…
Cancel
Save