目录
页面层级结构的加载和回退
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遇到的问题
代码
后端
前端