做网站需要做手机版吗,广东东莞地图,做网站推广优化,黄冈工程建设标准造价信息网1.轮播思路
获取八个视频源的地址。
将这些地址分成两组#xff0c;每组包含四个地址。
在页面中创建一个四分屏布局的视频播放器。
将第一组的四个视频地址分别插入到四分屏布局的四个视频框中。
设置一个定时器#xff0c;每10秒执行一次。
每次定时器触发时#xf…1.轮播思路
获取八个视频源的地址。
将这些地址分成两组每组包含四个地址。
在页面中创建一个四分屏布局的视频播放器。
将第一组的四个视频地址分别插入到四分屏布局的四个视频框中。
设置一个定时器每10秒执行一次。
每次定时器触发时将第二组的四个视频地址分别插入到四分屏布局的四个视频框中覆盖原来的视频地址。
继续等待10秒后再次执行定时器将第一组的四个视频地址重新插入到四分屏布局的四个视频框中覆盖第二组的视频地址。 div clickgetHandList 选择数据/div img clickstopClick src/assets/images/1p.png classimgStyle alt停止
const currentVideoIndex ref(0)
当选择数据调用函数 list为数据
const getHandList (List) {
如果有定时器则先清除 if (onesetInterTimeInter.value) { clearInterval(onesetInterTimeInter.value) } // 提前清除二维数组对应的下标取余数 // 当多分屏进入单分屏的话currentVideoIndex.value 可能会有问题不能保证选择的视频是从index0开始的所以currentVideoIndex设置为0 currentVideoIndex.value 0 cutArray.value List // 看当前是几个屏,把几屏和数据源传入进行二维分组huanuam 为 当前几分屏 twoDimensionalArray.value convertToTwoDimensionalArray(List, huaNum.value); console.log(twoDimensionalArray.value, twoDimensionalArray.value) if (huaNum.value 1) {
单屏 oneHua(); }
}
// 根据当前几分屏分成几个二维数组
const convertToTwoDimensionalArray (arr, num) { var result []; var length arr.length; var rows Math.ceil(length / num); // 计算行数 for (var i 0; i rows; i) { var row arr.slice(i * num, (i 1) * num); // 根据给定的数字切割一维数组 result.push(row); } return result;
}
const oneHua () { // 添加当前的视频源 if (url.value.length) { url.value [] }
默认第一项第一个视频 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 }); clearonedestoryVideo() // // 赋值url // 默认索引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) }
}
const rotateVideo () { clearonedestoryVideo() 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)
}
aaa为初始化函数当单个屏时dom也应该只有一个
const aaa (i, id) { console.log(i, id, i-id); if (url.value url.value.length) { const item url.value.find(item item.id id) console.log(url.value, init url); console.log(item, item); let player null; var videoElement document.getElementById(myFlvVideo 0); 固定 console.log(videoElement, videoElement); player flvjs.createPlayer( { type: flv, url: item[url], }, { cors: true, // 是否跨域 enableWorker: false, //启用分离的线程进行转换 autoCleanupSourceBuffer: true, //对SourceBuffer进行自动清理缓存 enableStashBuffer: false, //关闭IO隐藏缓冲区 stashInitialSize: 128, //减少首帧显示等待时长 fixAudioTimestampGap: false, //音频同步 } ); player.attachMediaElement(videoElement); player.load(); // 断开重连 player.on(flvjs.Events.ERROR, (errorInfo, errType, errDetail) { if (errorInfo.code 404) { this.$message.error(流媒体代理服务未找到请检查); } console.log(i, flvPlayer.value[i], ---销毁); destoryVideo(flvPlayer.value[i].player) init(i, flvPlayer.value[i].id) }); setTimeout(function () { player.play() // 播放数据流 }, 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 }) } }
