故事 前不久干项目，涉及到在线学习，简单来说就是对文章、视频进行在线学习，这个时候问题出现了，就是在上传视频的时候，速度很是慢，除此之外，视频播放也是卡的鸭皮，然后就开始疯狂网上搜刮知识，最终解决方案如下。 解决方案 1、视频采用切片上传，通过调用后端切片上传接口进行上传 2、切片上传结束后通过合并切片接口进行合并成为完整的视频 3、调用ffmpeg工具进行视频转m3u8格式形成ts切片 4、ts切片多线程上传至MinIO or OSS 5、返回m3u8格式文件地址，前端集成播放器进行播放。 实现过程 1、下载ffmpeg 为了开发方便，建议下载windows和linux两个版本 地址：Download FFmpeg 💩 比较懒的也可以跳过，毕竟代码里面我已经弄好了💩 PS：此处需要注意，由于网上说的基本都需要配置环境变量，所以此处需要注意，下载的文件，按上图方式选择自己适合的版本下载解压。不需要配置环境变量 2、开始构建springBoot程序 1）导入依赖： 关键依赖项 ... <ffmpeg.version>0.6.2</ffmpeg.version>....
有更新！

大文件上传、视频上传转m3u8

故事 最近干项目，之前由于一直是做后端的，前端自己也会一部分，然后这次遇到一个iframe的问题。大概问题如下： 由于页面采用React写的，其中嵌入iframe，但是页面需要在web和app中进行使用，这时候就需要iframe根据页面大小进行等比例缩放。 思路 iframe大家都知道是内嵌网页时使用的。之前也尝试过object进行内嵌还是没很好解决。既然iframe它能够设置初始时的宽高、也能够设置旋转、缩放参数。那是不是逐步有了思路？ 1：页面打开时候就获取页面或者容器的高度 2：iframe加载完成时候获取iframe的body高度 3：页面宽度/body宽度=缩放比例 4：按照比例缩放，重新设置iframe宽度，高度 说干就干 原来的iframe <iframe src={'xxxxxxxx'} className={styles.xxx} ></iframe> 改造后的iframe const {iwidth,iheight,itransform,itransformOrigin} = this.state; let iframeStyle = { ....

React 设置iframe自适应全屏

故事 刚刚搞定了iframe宽高自适应问题，又来新问题了，由于iframe内嵌的是另一套开源系统的网页。哦豁这个时候，iframe中有一些点击事件，我需要对那些事件进行自定义实现。 思考方案 1：将iframe中的JS方法进行重写或者覆盖 失败！由于不想改源码，以后也不一定用得到，得不偿失。 2：让iframe中的标签上的事件调用父页面自己实现的方法 最终实现 说干就干 <iframe id = 'iframe' src={'xxxx'} frameborder='0' onLoad={() => { let doc = document.getElementById("iframe").contentWindow.document.getElementsByTagName("body")[0]; let imgs = doc.children[0]; imgs.setAttribute("onclick","javascript:window.parent.downLoadFile()") imgs.alt = "下载文件"; imgs.title = "下载文件"; ....

React 实现 iframe内dom绑定事件修改