城市文化网站开发背景东莞新闻最新消息今天
1.轮播思路
获取八个视频源的地址。
将这些地址分成两组，每组包含四个地址。
在页面中创建一个四分屏布局的视频播放器。
将第一组的四个视频地址分别插入到四分屏布局的四个视频框中。
设置一个定时器，每10秒执行一次。
每次定时器触发时，将第二组的四个视频地址分别插入到四分屏布局的四个视频框中，覆盖原来的视频地址。
继续等待10秒后，再次执行定时器，将第一组的四个视频地址重新插入到四分屏布局的四个视频框中，覆盖第二组的视频地址。
<div @click="getHandList ">选择数据</div>
<img @click="stopClick" src="@/assets/images/1p.png" class="imgStyle" alt="">停止
const currentVideoIndex = ref(0)
当选择数据调用函数 list为数据
const getHandList = (List) => {
如果有定时器，则先清除
if (onesetInterTimeInter.value) {
clearInterval(onesetInterTimeInter.value)
}
// 提前清除二维数组对应的下标取余数
// 当多分屏进入单分屏的话currentVideoIndex.value 可能会有问题，不能保证选择的视频是从index=0开始的所以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 })
}
}