<template>
<view class="Intelligence">
<view class="Intelligence-list">
<intelligenceList :list="list1"></intelligenceList>
<intelligenceList :list="list2"></intelligenceList>
</view>
</view> </template>
<script>
import intelligenceList from './components/video-list.vue'
import {
QueryVideoHallList
} from "@/api/WebContent.js"
import minix from "@/minix/index.js"
export default {
components: {
intelligenceList,
},
mixins: [minix],
computed: {
list1() {
let list = []
this.list.forEach((item, i) => {
if (i % 2 == 0) {
list.push(item)
}
})
return list;
},
list2() {
let list = []
this.list.forEach((item, i) => {
if (i % 2 != 0) {
list.push(item)
}
})
return list;
}
},
data() {
return {
query: {
PageIndex: 1,
PageSize: 20,
},
TotalCount:0,
list: [],
}
},
async onLoad(e) {
},
async onShow() {
await this.init()
},
methods: {
reciveMessage(DataList) {
if (this.query.PageIndex == 1) {
this.list = DataList;
} else {
this.list = this.list.concat(DataList);
}
if (this.list.length === this.TotalCount) {
this.nomore = true;
} else {
this.nomore = false;
}
console.log(DataList);
},
async init() {
try {
let res = await QueryVideoHallList(this.query);
console.log(res);
let {
DataList,
TotalCount
} = res.Value;
this.TotalCount = TotalCount;
this.createPoster(DataList);
// this.$ownerInstance.callMethod('createPoster', DataList);
return false;
if (this.query.PageIndex == 1) {
this.list = DataList;
} else {
this.list = this.list.concat(DataList);
}
if (this.list.length === this.TotalCount) {
this.nomore = true;
} else {
this.nomore = false;
}
} catch (e) {
//TODO handle the exception
console.log(e)
}
}
}
} </script>
<script module="renderScript" lang="renderjs">
export default {
methods: {
async createPoster(val) {
console.log(val,'vvvvvvvvvvvv')
var videoCanList = [],
curDateList = []
val.forEach((item, index) => {
var promise = new Promise((reslove, reject) => {
// 在缓存中创建video标签
var video = document.createElement("VIDEO")
// 通过setAttribute给video dom元素添加自动播放的属性，因为视频播放才能获取封面图
video.currentTime = 5
video.setAttribute('crossOrigin', 'anonymous');
video.setAttribute('autoplay', 'autoplay')
// 再添加一个静音的属性，否则自动播放会有声音
video.setAttribute('muted', 'muted')
// 上面我们只是创建了video标签，视频播放需要内部的source的标签，scr为播放源
video.innerHTML = '<source src=' + item.VideoPathUrl + ' type="audio/mp4">'
// 再创建canvas画布标签
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// video注册canplay自动播放事件
video.addEventListener('canplay', function() {
// 创建画布的宽高属性节点，就是图片的大小，单位PX
var anw = document.createAttribute("width");
anw.nodeValue = 500;
var anh = document.createAttribute("height");
anh.nodeValue = 300;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
// 画布渲染
ctx.drawImage(video, 0, 0, 500, 300);
// 生成图片
var base64 = canvas.toDataURL('image/png') // 这就是封面图片的base64编码
// 视频结束播放的事件
video.pause()
item.baseImg = base64;
curDateList.unshift({ // 这里是我自己的数据处理模块
type: 'video',
videoUrl: item.url,
img: base64
})
reslove(item) // promise函数成功的回调
}, false)
})
videoCanList.push(promise)
})
try {
let ttt = await Promise.all(videoCanList)
console.log(ttt);
} catch (e) {
console.log(e);
//TODO handle the exception
}
Promise.all(videoCanList).then(res => {
console.log(res);
this.$ownerInstance.callMethod('reciveMessage', res)
}).catch(err => {
console.log(err, 'errrrrrrrrrr');
//TODO handle the exception
})
},
}
} </script>
