关于我在uni-app练手中遇到的坑

目录

页面层级结构的加载和回退

filePath编码

对象的深度克隆

弹幕的加载

​编辑 

uni-app内置浏览器加载视频失败

后台报错 java.io.IOException: 你的主机中的软件中止了一个已建立的连接

 安卓里遍历uni-list-item错误

 手机自带浏览器无法加载视频

乱码问题

video中initial-time失效

手动设置视频初始时间

video的@progress失效

视频播放结束后,不能直接设置历史记录为结束时间

mybatis中关联查询

代码


       

前几周一直在用uni-app练手,于是乎写了一个视频播放器,从一开始粗糙版,到加入了数据库后的简易版。

        其中记录一下坑。

        代码的话已经提交到github,可能后续还会维护下去,看自己有什么好的想法吧。

        

页面层级结构的加载和回退

如图所示,在在加载数据后,进入第二层,第三层目录后,如何回退到父级目录。

这里就考虑一个数据接口,栈,先进后出。

页面中定义一个parentDir: [],

filePath编码

如果是运行在安卓手机中当app,则window.encodeURI是无效的,所以需要使用

this.nowFilePath = encodeURIComponent(this.nowFilePath);

对象的深度克隆

将一个object对象push到栈中时,加入的仅仅是这个对象的引用,改变了对象引用,栈里面的指向也会改变,所以需要深度克隆。

弹幕的加载

在页面上可以看到danmuList是一个数组,从后台请求这个视频的弹幕信息,而如果没有这个v-if的话,弹幕是不会展示的。

因为页面video组件已经加载完成,此时即使加载了弹幕数据,也压根无用。

 所以才需要在获取数据后展示video组件,如此加载弹幕。

uni-app内置浏览器加载视频失败

官网有说明,所以如果是调试,可以运行到chrome等浏览器

后台报错 java.io.IOException: 你的主机中的软件中止了一个已建立的连接

        此问题尚未真正解决 

这种有两种情况,第一种是视频的编码不符合video的编码格式。

HTML <video> 标签 | 菜鸟教程

所以如果不符合上述三种格式的,就需要使用代码转变格式。

com.lw.familysystem.video.VideoUtils#encode

第二中情况是视频流的跨域问题,

com.lw.familysystem.video.VideoService#playVideo

直接在此方法中加入允许跨域请求,

response.addHeader("Access-Contro1-A11ow-0rigin","*");

后记:其实还是会经常出现这个问题,但是不影响播放。

 安卓里遍历uni-list-item错误

<uni-list-item v-for="(item,index) in directories.childDirList" :key="item.filePath" :title="item.name"note="目录"thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"thumb-size="lg" rightText="点击进入" clickable link @click="toNext(item,index)"></uni-list-item>

在chrome中上述代码没问题,但是运行到手机中,就会出现,

TypeError: Invalid attempt to destructure non-iterable instance.

In order to be iterable, non-array objects must have a [Symbol.iterator]() method. at view.umd.min.js:1

 手机自带浏览器无法加载视频

这个问题暂时还没解决,换了手机里的chrome浏览器后,访问地址能加载视频。 

乱码问题

路径变成了ascii码,统一编码。

其实最好路径不要用中文,就不会有乱码。

 上述使用的是tag  V0.0.2中代码遇到的坑。

video中initial-time失效

猜测应该是只有当video第一次初始化,然后加载视频时有用,而我获取视频是在onLoad中加载视频,而video组件出现是在onShow中。

onLoad中请求后台视频数据时,video可能已经在页面加载,而此时还没有设置url,导致视频会出现加载失败,此时initial-time自然无效。

当onLoad中请求了视频数据后,给video设置了url后,虽然能播放后台数据,但此时initial-time已经没有效果了。

经验证,上述猜测错误,真正原因是在playVideo方法中,将response的返回状态码设置为200,而不是206。

返回206是客户端表明自己只需要目标URL上的部分资源的时候返回的,比如video组件只需要先知道视频的长度,而不需要全部加载视频。

而200则让完全加载视频信息等。

//返回码需要为206,而不是200
response.setStatus(HttpServletResponse.SC_PARTIAL_CONTENT);

手动设置视频初始时间

不可能每次都调整initial-time,所以需要手动设置,就需要使用到uni.createVideoContext创建的对象了。

所以就需要用到 videoContext.seek()方法了,

getVideoHistoryM() {var param = {loginName: this.loginName,videoId: this.videos[this.nowPlayIndex].videoId}getVideoHistory(param).then(res => {if (res?.result_code == "0") {if (res.data) {var history = res.data;this.startTime = history.playTime;this.videoContext.seek(this.startTime); //跳转到指定秒		}}});
},

video的@progress失效

当视频播放完后,一轮循环已经结束,再自动从头开始播放第一集的时候,此时并不会再进入@progress中的方法,所以就需要在@loadedmetadata 中的方法里判断下。

loadedMetaData(e) {//视频加载完毕const {duration} = e.detail// 记录视频总时间this.duration = durationif(!this.autoPlaying){if(!this.firstVideo){//非第一个视频,自动播放this.play();}}this.videoContext.playbackRate(1.5);
},
onProgressVideo(e){const {buffered} = e.detail;console.log(buffered)if(buffered>4){//视频加载了百分之 就自动播放if(!this.firstVideo){//非第一个视频,自动播放this.play();}}
},

视频播放结束后,不能直接设置历史记录为结束时间

比如,有个视频,时长18秒,再timeUpdate方法中监测到播放结束时,需要保存历史记录,那么此时不能保存为18秒,否则,下一刻再次点击这个视频时,就自动定位到18秒,然后跳转到下一个视频了,就永远也看不了这个视频了。

//播放结束后保存历史记录

this.currentPlayTime = 0;

this.savePlayHistoryM()

所以直接将当前时间重置,那么下次就是重头开始播放了。

mybatis中关联查询

left join 了多个表,需要将连接表的内容放入组合的vo中。如下所示,返回的Vo中内联了两个vo。

@Data
public class VideoPlayHistoryVo extends VideoPlayHistory {private String createTimeFmt;private String updateTimeFmt;private VideoPhysicsInfoVo videoPhysicsInfoVo;private VideoInfoVo videoInfoVo;
}

在xml中也需要编写内联的,association的property值要和VideoPlayHistoryVo中的内联名字相同。

<resultMap id="videoHistoryVoResultMap" type="com.lw.familysystem.vo.VideoPlayHistoryVo"><id property="historyId" column="history_id"/><result property="videoId" column="video_id"/><result property="accountName" column="account_name"/><result property="playTime" column="play_time"/><result property="playTimeVis" column="play_time_vis"/><result property="createTimeFmt" column="create_time_fmt"/><result property="updateTimeFmt" column="update_time_fmt"/><result property="createTime" column="create_time"/><result property="updateTime" column="update_time"/><association property="videoPhysicsInfoVo" javaType="VideoPhysicsInfoVo"><id property="videoId" column="video_id"/><result property="videoName" column="video_name"/><result property="infoId" column="info_id"/><result property="orderNo" column="order_no"/><result property="quarterInfo" column="quarter_info"/><result property="relativePath" column="relative_path"/><result property="createTimeFmt" column="create_time_fmt"/><result property="updateTimeFmt" column="update_time_fmt"/><result property="createTime" column="create_time"/><result property="updateTime" column="update_time"/></association><association property="videoInfoVo" javaType="VideoInfoVo"><id property="infoId" column="info_id"/><result property="videoName" column="info_name"/><result property="videoType" column="video_type"/><result property="orderNo" column="order_no"/><result property="categoryId" column="category_id"/><result property="relativePath" column="relative_path"/><result property="createTimeFmt" column="create_time_fmt"/><result property="updateTimeFmt" column="update_time_fmt"/><result property="createTime" column="create_time"/><result property="updateTime" column="update_time"/></association></resultMap>

在页面上就如下这样使用,例子可以看mine.vue

<uni-list-item v-for="(history,index) in histories" :key="index" :title="history.videoPhysicsInfoVo.videoName":note="history.videoInfoVo.videoName":rightText="''+history.playTimeVis" clickable link@click="toPlayVideoPage(history.videoPhysicsInfoVo.infoId,history.videoPhysicsInfoVo.videoId)"></uni-list-item>

        上述问题是 tag V0.0.3遇到的问题

代码

后端

前端

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/38460.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【哈士奇赠书活动 - 17期】-〖uni-app跨平台开发与应用从入门到实践〗

文章目录 ❤️‍&#x1f525; 赠书活动 - 《uni-app跨平台开发与应用从入门到实践》❤️‍&#x1f525; 编辑推荐❤️‍&#x1f525; 抽奖方式与截止时间❤️‍&#x1f525; 赠书活动 → 获奖名单 ❤️‍&#x1f525; 赠书活动 - 《uni-app跨平台开发与应用从入门到实践》…

1个月uni-app微信小程序开发上线实战专栏介绍

一、专栏介绍&#xff1a; 《uni-app开发微信小程序1个月上线实战》&#xff0c;目标带领1000位同学成功开发上线一个自己的个人小程序&#xff01; 作者介绍&#xff1a;国服第二切图仔——资深前端开发工程师&#xff0c;具有六年以上的前端开发经验&#xff0c;曾在多家知…

深入浅析,一步步用GPT打造你的聊天机器人

使用GPT基于你自己的文档构建聊天机器人的分步指南。 微信搜索关注《Python学研大本营》&#xff0c;加入读者群&#xff0c;分享更多精彩 与ChatGPT聊天很有趣&#xff0c;而且信息量很大 —— 与它闲聊可以探索一些新的想法。但这些都是比较随意的用例&#xff0c;新奇感很快…

深入理解Python中的依赖注入

一文带你深入了解Python依赖注入。 微信搜索关注《Python学研大本营》&#xff0c;加入读者群&#xff0c;分享更多精彩 简介 依赖注入是软件工程中使用的一种设计模式&#xff0c;它允许在创建对象时由外部提供其依赖关系&#xff0c;而不是自己创建这些依赖关系。换句话说&a…

独立开发变现周刊(第84期):一个地理位置API服务,月收入1.5万美元

分享独立开发、产品变现相关内容&#xff0c;每周五发布。 (合集&#xff1a;https://ezindie.com/weekly ) 目录 1、tiny.host: 简单部署你的web项目2、Verif Tools: 一个在线虚拟身份信息生成器3、screen.studio: 一个桌面端的录屏编辑工具4、一个地理位置API服务&#xff0c…

李彦宏:十年后不会写提示词或被淘汰;GitHub发布Copilot X,动动嘴就能生成代码;Vite 4.2 发布|极客头条...

「极客头条」—— 技术人员的新闻圈&#xff01; CSDN 的读者朋友们早上好哇&#xff0c;「极客头条」来啦&#xff0c;快来看今天都有哪些值得我们技术人关注的重要新闻吧。 整理 | 梦依丹 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 一分钟速览新闻点&#…

22个提升生产力的工具推荐,稳了

子曰&#xff1a;工欲善其事&#xff0c;必先利其器。 本文给大家推荐22个提高生产力的工具&#xff0c;总有一款符合你的需求。&#x1f604;&#x1f604;&#x1f604; 提高生产效率工具推荐 滴答清单/Todoist文件检索利器&#xff1a;Everything文件管理软件-Allen Explor…

百度抢先发布中国版ChatGPT——文心一言,现已开通测试申请

3月16日&#xff0c;百度抢先其他国内科技巨头一步&#xff0c;率先发布被誉为中国版ChatGPT的“文心一言”。 即日起&#xff0c;百度也通过“百度智能云”官网正式开发“文心一言”的预约&#xff0c;申请云服务测试。 但是&#xff0c;目前百度智能云只面向企业级客户开放文…

chatgpt赋能python:Python录制屏幕:如何用Python录制屏幕

Python录制屏幕&#xff1a;如何用Python录制屏幕 如果你曾经想过如何在电脑上录制自己的屏幕以制作教学视频或演示产品&#xff0c;那么你需要了解一些关于Python录制屏幕的知识。Python是一门强大的动态编程语言&#xff0c;因其易于学习、连接数据库和编写简洁的代码&#…

chatgpt赋能python:Python中常见的Module报错及解决方法

Python中常见的Module报错及解决方法 在Python编程过程中&#xff0c;经常会使用各种第三方库和模块&#xff0c;以提高代码的效率和可读性。然而&#xff0c;在使用这些模块时&#xff0c;我们有时会遭遇各种各样的错误和异常。本文将介绍Python中常见的Module报错现象及其解…

chatgpt赋能Python-pythonimport报错

Python中Import报错的处理方法 Python是一款非常流行的编程语言&#xff0c;也是众多开发者选择的首选。在代码中&#xff0c;我们通常会使用import语句来引入其他模块&#xff0c;但在实际开发过程中&#xff0c;我们有时会遇到ImportError&#xff1a;No module named XXX等…

chatgpt赋能Python-pythonnumpy报错

Python中Numpy出现报错的解决方法 介绍 Numpy是Python中常用的数学计算库&#xff0c;其支持高效的数组处理和运算&#xff0c;是很多数据科学工程师必备的编程工具之一。由于其强大的功能和灵活性&#xff0c;Numpy在各行各业都有广泛的应用。但有时候在使用Numpy时可能会出…

Open Ai 常见接口参数说明以及常见报错总结

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是阿牛&#xff0c;全栈领域优质创作者。&#x1f61c;&#x1f4dd; 个人主页&#xff1a;馆主阿牛&#x1f525;&#x1f389; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4d…

chatgpt赋能python:Python打开文件遇到的常见报错类型

Python打开文件遇到的常见报错类型 Python作为一种高级编程语言&#xff0c;在开发过程中经常需要读取或写入文件。然而&#xff0c;在实际操作中&#xff0c;我们经常会遇到一些FileNotFoundError、PermissionError等错误类型。在本文中&#xff0c;我将介绍常见的Python打开…

记者亲测GPT-4实际能力 围观10种职业“受虐”现场

出品&#xff5c;网易科技《智见焦点》 作者&#xff5c;赵芙瑶 编辑&#xff5c;丁广胜 作为OpenAI公司开发的一种生成式人工智能工具&#xff0c;有关学者以“阿拉丁神灯”和“潘多拉魔盒”来比喻ChatGPT所隐藏的潜能和可能带来的风险。自其发布以来&#xff0c;有关ChatGPT是…

文本聚类与摘要,让AI帮你做个总结

你好&#xff0c;我是徐文浩。 过去的十多讲里&#xff0c;我为你介绍了各种利用大语言模型的方法和技巧。特别是在过去两讲里&#xff0c;我们也尝试更加深入地利用开源代码帮我们完成一些工作。通过llama-index这样的开源库&#xff0c;我们能够将自己的数据和大语言模型连接…

物以类聚人以群分,通过GensimLda文本聚类构建人工智能个性化推荐系统(Python3.10)

众所周知&#xff0c;个性化推荐系统能够根据用户的兴趣、偏好等信息向用户推荐相关内容&#xff0c;使得用户更感兴趣&#xff0c;从而提升用户体验&#xff0c;提高用户粘度&#xff0c;之前我们曾经使用协同过滤算法构建过个性化推荐系统&#xff0c;但基于显式反馈的算法就…

01表盘控件-01汽车仪表盘-gaugecar

一、运行效果 二、功能特点 可设置范围值&#xff0c;支持负数值。可设置精确度&#xff0c;最大支持小数点后3位。可设置大刻度数量&#xff0c;小刻度数量。可设置开始旋转角度&#xff0c;结束旋转角度。可设置外圆背景、内圆背景、饼圆三种颜色、刻度尺颜色、文字颜色。自…

01表盘控件-17飞机仪表盘-gaugeplane

一、运行效果 二、功能特点 可设置外边框渐变颜色。可设置里边框渐变颜色。可设置主背景颜色、遮罩层颜色、刻度尺颜色。可设置线条颜色、文字颜色、指针颜色、遥感句柄颜色。可设置旋转角度。可设置滚动值。三、公共接口 public Q_SLOTS://设置外边框渐变颜色void setBorderO…

浅谈大数据之足球盘口赔率水位分析的思路与神准预测技巧(一)

足球运动是当今世界上开展最广、影响最大、最具魅力、拥有球迷数最多的体育项目之一&#xff0c;尤其是欧洲足球&#xff0c;每年赛事除了五大联赛&#xff08;英超、西甲、德甲、法甲、意甲&#xff09;之外&#xff0c;还会有欧冠&#xff08;欧洲冠军联赛&#xff09;&#…