<template>
<div class="video-sur">
<div class="header">
<img src="/img/icon.png" height="14px" alt="" srcset="" /><span
style="margin-left: 5px; display: inline-block"
>视频监控</span
>
</div>
<div class="video-list" v-if="videoList.length > 0">
<div
class="item"
v-for="item in videoList"
:id="item.id"
:key="item.id"
></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
videoList: [],
};
},
methods: {
setVideoList(data) {
let arr = [];
console.log(data);
data.map((res, index) => {
let obj = {
id: "video" + index,
name: res,
};
console.log(res, index);
arr[index] = obj;
});
this.$nextTick(() => { // 此处可以拿class 但是id却不行 因为是静态的 没有进入vue的缓存数据队列 也就是下一个队列里面 而是直接就渲染了 静态的 第一层是为了保证 v-if的节点 可以更新 第二层是在第一层的基础上面去拿到 id
this.$nextTick((_) => { // 此处可以拿id 因为id是动态的 所以拿下次队列的 最新 节点 信息 需要这样写
try {
arr.map((res) => {
new TcPlayer(res.id, {
flv: res.name, //增加了一个 flv 的播放地址，用于PC平台的播放 请替换成实际可用的播放地址
autoplay: true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
poster: "",
width: "100%", //视频的显示宽度，请尽量使用视频分辨率宽度
height: "140", //视频的显示高度，请尽量使用视频分辨率高度
});
});
} catch (err) {}
});
});
this.videoList = arr;
},
},
};
</script>
