1.轮播思路
将这些地址分成两组，每组包含四个地址。
每次定时器触发时，将第二组的四个视频地址分别插入到四分屏布局的四个视频框中，覆盖原来的视频地址。
继续等待10秒后，再次执行定时器，将第一组的四个视频地址重新插入到四分屏布局的四个视频框中，覆盖第二组的视频地址。
<div @click=”getHandList “>选择数据</div>
<img @click=”stopClick” src=”@/assets/images/1p.png” class=”imgStyle” alt=””>停止
const currentVideoIndex = ref(0)
const getHandList = (List) => {
if (onesetInterTimeInter.value) {
clearInterval(onesetInterTimeInter.value)
}
// 当多分屏进入单分屏的话currentVideoIndex.value 可能会有问题，不能保证选择的视频是从index=0开始的所以currentVideoIndex设置为0
// 看当前是几个屏,把几屏和数据源传入进行二维分组，huanuam 为 当前几分屏
twoDimensionalArray.value = convertToTwoDimensionalArray(List, huaNum.value);
console.log(twoDimensionalArray.value, ‘twoDimensionalArray.value’)
单屏
oneHua();
}
}
const convertToTwoDimensionalArray = (arr, num) => {
var rows = Math.ceil(length / num); // 计算行数
for (var i = 0; i < rows; i++) {
var row = arr.slice(i * num, (i + 1) * num); // 根据给定的数字切割一维数组
}
}
}
url.value.push({ “url“: twoDimensionalArray.value[currentVideoIndex.value][0].url, “id“: twoDimensionalArray.value[currentVideoIndex.value][0].id, “shename“: twoDimensionalArray.value[currentVideoIndex.value][0].shename, “index“: 0 });
// 默认索引0，取二维数组第一项的id 1为视频时，调用init改变dom和index
aaa(0, twoDimensionalArray.value[currentVideoIndex.value][0].id)
twoDimensionalArray.value.length > 1说明有1组以上的二维数据，那么就轮播，初次外，当别的分屏过来时，如果当前的画面大于数据源，那么则清除定时器，不轮播
if (twoDimensionalArray.value.length > 1) {
onesetInterTimeInter.value = setInterval(rotateVideo, setInterTime.value)
} else {
clearInterval(onesetInterTimeInter.value)
}
}
url.value = []
// 对数据twoDimensionalArray列表进行取余
currentVideoIndex.value = (currentVideoIndex.value + 1) % twoDimensionalArray.value.length
url.value.push({ “url“: twoDimensionalArray.value[currentVideoIndex.value][0].url, “id”: twoDimensionalArray.value[currentVideoIndex.value][0].id, “shename“: twoDimensionalArray.value[currentVideoIndex.value][0].shename, “index“: 0 });
// currentVideoIndex.value取余二维范围区间
aaa(currentVideoIndex.value, twoDimensionalArray.value[currentVideoIndex.value][0].id)
}
if (url.value && url.value.length) {
const item = url.value.find(item => item.id == id)
console.log(url.value, “init url”);
var videoElement = document.getElementById(“myFlvVideo” + 0); 固定
console.log(videoElement, “videoElement”);
{
url: item[“url”],
},
{
enableWorker: false, //启用分离的线程进行转换
autoCleanupSourceBuffer: true, //对SourceBuffer进行自动清理缓存
enableStashBuffer: false, //关闭IO隐藏缓冲区
stashInitialSize: 128, //减少首帧显示等待时长
fixAudioTimestampGap: false, //音频同步
}
);
player.attachMediaElement(videoElement);
// 断开重连
player.on(flvjs.Events.ERROR, (errorInfo, errType, errDetail) => {
this.$message.error(‘流媒体代理服务未找到，请检查‘);
}
console.log(i, flvPlayer.value[i], ‘—销毁’);
destoryVideo(flvPlayer.value[i].player)
init(i, flvPlayer.value[i].id)
});
}, 300)
flvPlayer.value = flvPlayer.value.filter(item => item.index != i)
console.log(flvPlayer.value, ‘flvPlayer.value’)
flvPlayer.value.push({ “id”: id, “player”: player, “index”: 0 })
}
}
原文地址:https://blog.csdn.net/weixin_53954018/article/details/134618733
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_21314.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
