flv视频轮播功能(单个时)

1.轮播思路

获取八个视频源的地址。

将这些地址分成两组，每组包含四个地址。

在页面中创建一个四分屏布局的视频播放器。

将第一组的四个视频地址分别插入到四分屏布局的四个视频框中。

设置一个定时器，每10秒执行一次。

每次定时器触发时，将第二组的四个视频地址分别插入到四分屏布局的四个视频框中，覆盖原来的视频地址。

继续等待10秒后，再次执行定时器，将第一组的四个视频地址重新插入到四分屏布局的四个视频框中，覆盖第二组的视频地址。

<div @click=”getHandList “&gt;选择数据</div&gt;

  <img @click=”stopClick” src=”@/assets/images/1p.png” class=”imgStyle” alt=””&gt;停止

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 &amp;&amp; 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 })

  }

}

代码007普通

打赏 收藏 海报 链接