一、简介

二、前后端框架

前端框架

后端框架

三、视频播放

四、nginx部署

nginx命令

五、后端打包

六、代码地址

一、简介

想做一个简单的视频播放器，能够在局域网播放硬盘上的视频。

如下图所示，从硬盘指定位置读取视频数据，由服务器返回视频流，在浏览器端播放。

二、前后端框架

前端框架

前端使用的uni-app组件开发，打包成H5的格式，然后由Nginx部署访问前端工程。

开发工具为HbuilderX。

后端框架

后端使用spring boot 2.1.6.RELEASE 搭建的整体maven工程。

三、视频播放

视频播放直接读取硬盘上MP4文件，然后通过HttpServletResponse返回给前端，前端使用Video的组件进行播放。

如下是视频播放的后端代码，

/*** 播放视频** @param vo* @param response*/public void playVideo(Map<String, String> otherInfo, VideoInfoVo vo, HttpServletResponse response) {String accountName = otherInfo.get("accountName");try  {OutputStream outputStream = response.getOutputStream();String filePath = vo.getFilePath();File file = new File(filePath);if (file.exists()) {RandomAccessFile targetFile = new RandomAccessFile(file, "r");long fileLength = targetFile.length();long range = 0;/*解决： java.io.IOException: 你的主机中的软件中止了一个已建立的连接获取服务器视频流时可能存在跨域问题*/response.addHeader("Access-Control-Allow-Origin","*");//设置内容类型response.setHeader("Content-Type", "video/mp4");//设置此次相应返回的数据长度response.setHeader("Content-Length", String.valueOf(fileLength - range));//设置此次相应返回的数据范围response.setHeader("Content-Range", "bytes " + range + "-" + (fileLength - 1) + "/" + fileLength);//返回码需要为206，而不是200response.setStatus(HttpServletResponse.SC_PARTIAL_CONTENT);//设定文件读取开始位置（以字节为单位）targetFile.seek(range);byte[] cache = new byte[1024 * 300];int flag;while ((flag = targetFile.read(cache)) != -1) {try {outputStream.write(cache, 0, flag);} catch (IOException ioe) {/*经过测试发现，前端使用video会调用三次playVideo方法，前两次第一次应该是探测是否能连接第二次是获取视频长度第三次是获取视频流，在第三次时会报 远程主机强制关闭了一个连接，应该是给客户端传递数据后，客户端主动关闭了连接*/}}} else {String message = "file: not exists";//解决编码问题response.setHeader("Content-Type", "application/json");outputStream.write(message.getBytes(StandardCharsets.UTF_8));}try{outputStream.flush();}catch (IOException ioe){/*经过测试发现，前端使用video会调用三次playVideo方法，前两次第一次应该是探测是否能连接第二次是获取视频长度第三次是获取视频流，在第三次时会报 远程主机强制关闭了一个连接，应该是给客户端传递数据后，客户端主动关闭了连接*/}} catch (IOException e) {log.error("", e);}}

如下是前端Video组件的使用，

<video id="myVideo" ref="video1" :src="videoUrl"v-if="showVideo"@error="videoErrorCallback" @timeupdate="timeUpdate"@loadedmetadata="loadedMetaData"loop=true:initial-time="startTime":danmu-list="danmuList" enable-danmu danmu-btn controlsstyle="width: 100%;"></video>

onLoad(e) {// e.vId = "1337781752"this.videoId = e.vId;this.videoUrl = getVideoUrl(this.videoId);this.videoUrl += "/"+this.loginNamethis.videoUrl =  encodeURI(this.videoUrl) // #ifndef MP-ALIPAYthis.videoContext = uni.createVideoContext('myVideo',this)// #endif},export function getVideoUrl(vId) {return root + 'video/playVideo/'+vId;
}

最终实现视频播放功能。

测试使用的是chrome浏览器。

四、nginx部署

在前端配置好路由模式，其他任何都不用修改，直接在HbuilderX中打H5的包。

将包打好后，将h5的包拷贝到nginx的html目录下，

修改nginx中conf目录下的nginx.conf文件，

修改访问端口为8090，
修改首页路径，此处是访问html/familysystem/index.html文件
修改拦截/baseUrl/，然后转发到后端地址。

http://localhost:8090/baseUrl/video/getRootDirectory?filePath=

这是nginx发送的请求，需要将baseUrl拦截替换。

所以最后请求路径就变为 http://localhost:8083/video/getRootDirectory?filePath=

如果 proxy_pass 配置为 http://localhost:8083 ; 没有以 / 结尾，

那么就不会替换拦截的baseUrl字段，

所以请求地址会变为 http://localhost:8083/baseUrl/video/getRootDirectory?filePath=

一个符号的差距，就有不同的方式，具体可以看此博客，前后端分离利用nginx转发请求后台接口地址-爱码网

在终端nginx所在目录下，输入 start nginx.exe启动nginx。

在浏览器端输入http://localhost:8090访问首页。

nginx命令

start nginx.exe 启动nginx

nginx -s stop 快速关闭Nginx，可能不保存相关信息，并迅速终止web服务。

nginx -s quit 平稳关闭Nginx，保存相关信息，有安排的结束web服务。

nginx -s reload 因改变了Nginx相关配置，需要重新加载配置而重载。

nginx -s reopen 重新打开日志文件。

nginx -c filename 为 Nginx 指定一个配置文件，来代替缺省的。

nginx -t 不运行，而仅仅测试配置文件。nginx 将检查配置文件的语法的正确性，并尝试打开配置文件中所引用到的文件。

nginx -v 显示 nginx 的版本。

nginx -V 显示 nginx 的版本，编译器版本和配置参数。

tasklist /fi "imagename eq nginx.exe" windows下查看nginx进程

五、后端打包

后端是个maven工程，直接在idea中package即可打成一个jar包。

在终端jar包所在目录，输入 java -jar XXXX.jar来启动jar包。

六、代码地址

https://gitee.com/king_software/family-system-fhttps://gitee.com/king_software/family-system-f

两个项目工程放在同一个仓库中了，真正的名字叫FamilySystem。

下载后改名分别导入到idea和hbuilderx中即可。

使用uni-app组件播放视频相关推荐

C#(Winform)程序无法使用Windows Media Player 组件播放视频文件
如果你的C#(Winform)程序无法使用Windows Media Player 组件播放视频文件(一旦点击播放立马程序闪退,但可以播放音频文件),请按照下面图例设置) 1.桌面右击鼠标找到独立显 ...
[Unity][安卓]VideoPlayer组件播放视频
播放的视频可以在3D物体,2D物体,UI上进行播放. 播放视频的同时会播放视频的声音. Unity 2019.4.19可用. 年代久远的EasyMovieTexture之类的插件貌似有很多问题. ...
Java后端接口返回视频流，使用video组件播放视频，实现分段下载
视频文件保存在不为人知的地方,总之前端不能直接访问的位置,需要通过后端接口取出来再返回给前端. 前端这样子播放 <video controls="controls" cont ...
uni.app流量主激励视频调用(示例为抖音小程序)
为了保证不重复调用广告组件,我们在全局app.vue文件引入,赋值到公共实例上 app.vue文件 <script>import * as config from '@/utils/con ...
uniapp H5页面嵌入微信小程序 ios 下 video组件播放视频设置 border-radius overflow:hidden 不生效
在ios 系统中, 设置border-radius 可能会不生效(安卓有效),直接给要设置的元素设置 border-radius属性,再添加下面的代码即可实现功能: -webkit-backface- ...
美团技术分享：大众点评App的短视频耗电量优化实战
美团技术专栏: 关注MAYOU18 前言美团测试团队负责App的质量保证工作,日常除了App的功能测试以外,还会重点关注App的性能测试.现在大家对手机越来越依赖,而上面各App的耗电量,直接影响了 ...
Windows Media Player播放视频导致程序闪退
在有的电脑上发现,使用Windows Media Player组件播放视频导致程序闪退. 发现是显卡问题,独立显卡换成集成显卡解决: 打开显卡控制面板->管理3D设置->集成图形-> ...
Android 小部件播放视频
最近在对小组件进行迭代, 之前已经解决过一些问题, 例如: 图片的圆角怎么在小组件上展示并兼容多个系统版本小组件后台怎么更新,如何将小组件拆分成单独模块对于小组件播放视频, 找不到直接可以调用的a ...
大众点评App的短视频耗电量优化实战，android应用案例开发大全第4版
一.案例分析短视频作为已被市场验证的新内容传播载体,能有效增加用户停留时长.大众点评App从9.3版本开始推出短视频相关内容,在各页面新增了短视频模块.在短视频功能测试中,我们发现如果在视频列表页中 ...

使用uni-app组件播放视频

一、简介

二、前后端框架

前端框架

后端框架

三、视频播放

四、nginx部署

nginx命令

五、后端打包

六、代码地址

使用uni-app组件播放视频相关推荐

最新文章

热门文章