当前位置: 首页 > news >正文

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

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 })

  }

}

相关文章:

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

1.轮播思路 获取八个视频源的地址。 将这些地址分成两组&#xff0c;每组包含四个地址。 在页面中创建一个四分屏布局的视频播放器。 将第一组的四个视频地址分别插入到四分屏布局的四个视频框中。 设置一个定时器&#xff0c;每10秒执行一次。 每次定时器触发时&#xf…...

快速了解软件工程学概述(5种软件过程模型)

目录 1 、什么是软件&#xff1f;特点有哪些 &#xff1f; 2 、 软件危机 定义&#xff1a; 软件危机产生的原因 消除软件危机的方法 3 、软件工程 1.软件工程的介绍 &#xff08;1&#xff09;概念 &#xff08;2&#xff09;本质特征 (3)软件工程方法学&#xff08;方…...

sql21(Leetcode1174即时食物配送2)

代码&#xff1a; # Write your MySQL query statement belowselect round (sum(order_date customer_pref_delivery_date) * 100 /count(*),2 ) as immediate_percentage from Delivery where (customer_id, order_date) in (select customer_id, min(order_date)from deliv…...

Node——Node.js基础

对Node.js中的基础知识进行讲解&#xff0c;包括全局变量、全局对象、全局函数以及用于实现模块化编程的exports和module对象等内容&#xff0c;这些知识是学习Node.js应用开发的基础。 1、Node.js全局对象 全局&#xff0c;即程序中任何地方都可以使用&#xff0c;Node.js内…...

基于SSM的企业订单跟踪管理系统(有报告)。Javaee项目

演示视频&#xff1a; 基于SSM的企业订单跟踪管理系统&#xff08;有报告&#xff09;。Javaee项目 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring SpringM…...

中国吡啶行业市场研究与投资评估报告(2023版)

内容简介&#xff1a; 目前吡啶及其衍生物作为某些化学合成反应的催化剂&#xff0c;需求量在不断增加&#xff0c;因此吡啶在化学品合成领域的市场潜力最大。此外&#xff0c;对高效农药的需求量上升也是促进全球吡啶市场发展的另一关键因素。受人均可支配收入的持续增长和对…...

鼠标点击位置获取几何体对象_vtkAreaPicker_vtkInteractorStyleRubberBandPick

开发环境&#xff1a; Windows 11 家庭中文版Microsoft Visual Studio Community 2019VTK-9.3.0.rc0vtk-example参考代码 demo解决问题&#xff1a;框选或者点选某一区域&#xff0c;并获取区域prop3D对象&#xff08;红线内为有效区域&#xff0c;polydata组成的3d几何对象&a…...

【好玩的 Docker 项目】搭建一个简洁的记事本 ——minimalist-web-notepad

前言 搭建一个类似于 notepad 的纯文本笔记本,可以用来做记事本,也可以用来做临时记录的工具。 演示地址:https:/https://chinausdt.com 环境准备 腾讯香港轻量云应用服务器 1 核 1G(24 元 / 月款)域名一枚并做好解析Docker宝塔面板安装 Docker 更新、安装必备软件 BA…...

Linux4.5、进程状态

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 目录 进程状态介绍 Linux下具体进程状态 R状态 和 S状态 D状态 T状态 t状态 Z状态 X状态 进程状态介绍 首先&#xff0c;进程状态有运行&#xff0c;阻塞&#xff0c;挂起&#xff0c;这些只是一个大体的概括&am…...

C# Onnx PP-Vehicle 车辆分析(包含:车辆检测,识别车型和车辆颜色)

目录 效果 模型信息 mot_ppyoloe_s_36e_ppvehicle.onnx vehicle_attribute_model.onnx 项目 代码 下载 其他 C# Onnx PP-Vehicle 车辆分析&#xff08;包含&#xff1a;车辆检测&#xff0c;识别车型和车辆颜色&#xff09; 效果 模型信息 mot_ppyoloe_s_36e_ppvehi…...

OpenGL之Mesa3D编译for Ubuntu20.04(三十六)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生从来没有捷径,只有行动才是治疗恐惧和懒惰的唯一良药. 更多原创,欢迎关注:Android…...

ubuntu22.04 arrch64版操作系统编译zlmediakit

脚本 系统没有cmake&#xff0c;需要通过apt先进行下载&#xff0c;下面的脚本已经包含了 # 安装依赖 gcc-c.x86_64 这个不加的话会有问题 sudo yum -y install gcc gcc-c libssl-dev libsdl-dev libavcodec-dev libavutil-dev ffmpeg git openssl-devel gcc-c.x86_64 cm…...

Course1-Week1:机器学习简介

Course1-Week1&#xff1a;机器学习简介 文章目录 Course1-Week1&#xff1a;机器学习简介1. 课程简介1.1 课程大纲1.2 Optional Lab的使用 (Jupyter Notebooks)1.3 欢迎参加《机器学习》课程 2. 机器学习简介2.1 机器学习定义2.2 有监督学习2.3 无监督学习 3. 线性回归模型3.1…...

这19个JS代码技巧,后悔没有早点看到

在实际工作中&#xff0c;开发者常面临一些需巧妙编程解决的挑战。有时几行代码就能迎刃而解。本文整理了一系列实用代码片段&#xff0c;助您轻松处理URL、DOM操作、事件处理、日期处理以及用户偏好设置等常见问题。 这些精选代码片段均源自“30 seconds of code”——一个卓…...

Rust UI开发(一):使用iced构建UI时,如何在界面显示中文字符

注&#xff1a;此文适合于对rust有一些了解的朋友 iced是一个跨平台的GUI库&#xff0c;用于为rust语言程序构建UI界面。 iced的基本逻辑是&#xff1a; UI交互产生消息message&#xff0c;message传递给后台的update&#xff0c;在这个函数中编写逻辑&#xff0c;然后通过…...

ros2文件package.xml与cmakelists.txt比较

每次在ros2里面添加文件以后&#xff0c;都要修改packages.xml,与cmakelists.txt文件。...

vue3使用element plus树形选择器懒加载回显失败问题。

vue3使用element plus树形选择器懒加载回显时树形数据还未加载完成&#xff0c;回显时显示的的绑定值&#xff0c;不是要显示的名称。 解决1&#xff1a;不使用懒加载&#xff0c;一次性将数据返回完成 解决2&#xff1a;编辑回显时&#xff0c;拿到要显示的中文强制修改显示…...

Java基于springoot开发的企业招聘求职网站

演示视频&#xff1a; https://www.bilibili.com/video/BV1xw411n7Tu/?share_sourcecopy_web&vd_source11344bb73ef9b33550b8202d07ae139b 技术&#xff1a;springootmysqlvuejsbootstrappoi制作word模板 主要功能&#xff1a;求职者可以注册发布简历&#xff0c;选择简…...

数据结构 / 顺序表 / 顺序表概述和结构体定义

1. 顺序表概述 顺序表&#xff1a;线性表的顺序存储称为顺序表逻辑结构&#xff1a;线性结构(一对一)存储结构&#xff1a;顺序存储(使用一段连续的存储空间存储类型相同的数据元素)顺序表&#xff1a;逻辑相邻&#xff0c;物理也相邻顺序表是借助于数组实现&#xff0c;但是不…...

js最新随机字符串,进制数随机字符串,更优秀的随机字符串方式,你绝对没用过的随机字符串方式,可控制位数!

js最新随机字符串&#xff0c;进制数随机字符串&#xff0c;更优秀的随机字符串方式&#xff0c;你绝对没用过的随机字符串方式&#xff0c;可控制位数&#xff01; 函数封装和传参 首先我们&#xff0c;要封装这样一个函数&#xff0c;首先要确定&#xff0c;传入哪些参数。…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

云原生玩法三问:构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...