使用uni-app组件播放视频
Posted 伟衙内
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用uni-app组件播放视频相关的知识，希望对你有一定的参考价值。
目录
一、简介
想做一个简单的视频播放器，能够在局域网播放硬盘上的视频。
如下图所示，从硬盘指定位置读取视频数据，由服务器返回视频流，在浏览器端播放。
二、前后端框架
前端框架
前端使用的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，而不是200
response.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 controls
style="width: 100%;"></video>
onLoad(e)
// e.vId = "1337781752"
this.videoId = e.vId;
this.videoUrl = getVideoUrl(this.videoId);
this.videoUrl += "/"+this.loginName
this.videoUrl = encodeURI(this.videoUrl)
// #ifndef MP-ALIPAY
this.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-f
https://gitee.com/king_software/family-system-f
两个项目工程放在同一个仓库中了，真正的名字叫FamilySystem。
下载后改名分别导入到idea和hbuilderx中即可。
uni-app引入海康威视h5player实现视频监控的播放
uni-app引入海康威视h5player实现视频监控的播放
知识储备
- uni-app web-view组件相关知识：点击学习。
- 海康威视相关工具下载：点击跳转下载。
- web-view组件不全屏显示：uni-app web-view 如果设置不全屏 不自动铺满。
工具下载
首先下载海康威视h5player的demo
在uni-app项目中static文件夹下创建文件目录，我命名为h5player
将demo中bin文件夹下的文件原封不动复制到h5player文件夹中，txt文件可以删除
h5player根目录下新建webplayer.html文件
引入h5player.min.js
<script src="./h5player.min.js"></script>
webplayer.html
在webplayer.html文件中，新增样式，宽高根据自己的需求调整
<style type="text/css">
html,
body
/* width: 100%; */
/* height: 100%; */
margin: auto;
overflow: hidden;
background-color: #000;
-webkit-user-select: none;
user-select: none;
.myplayer
width: 100%;
height: 2.21rem;
</style>
在页面创建dom元素
<div id="play_window" class="myplayer"></div>
获取url中参数的方法
//取url中的参数值
function GetQueryString(name)
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
初始化插件
// 初始化插件
var myPlugin = new JSPlugin(
szId: 'play_window', //需要英文字母开头 必填
szBasePath: './', // 必填,引用H5player.min.js的js相对路径
)
获取视频播放流以后，开始播放，播放成功后抓图本地存储
// 获取视频播放流
var playURL = GetQueryString("cameraUrl")
// 有视频流地址以后，才进行播放
if(playURL)
// 窗口下标
var curIndex = 0;
// 获取监控点唯一标识，方便作为抓图存储的key
var cameraIndexCode = GetQueryString("cameraIndexCode")
// 视频预览
myPlugin.JS_Play(playURL,
playURL,
mode: 1
, curIndex).then(() =>
console.info('JS_Play success 播放成功');
// do you want...
// 抓图
var fileName = 'img';
var fileType = 'JPEG';
//不进行下载，数据回调
myPlugin.JS_CapturePicture(curIndex, fileName, fileType,imageData =>
console.info('JS_CapturePicture success 抓图成功'); //2.1.0开始全是base64，之前的版本存在blob或者是base64
// do you want...
plus.storage.setItem(cameraIndexCode,imageData);
)
, (err) =>
console.info('JS_Play failed:', err);
// do you want...
);
h5player.vue
在uni-app应用内，pages页面中需要用到视频播放的页面，创建web-view组件
web-view组件的src需要动态改变，所以存储在data数据里
因为web-view组件默认就是占据整个视口的高宽，所以我们需要设置web-view的宽高，调整位置
// 设置web-view的宽高，调整位置
setHeight()
var height = 350; //定义动态的高度变量，如高度为定值，可以直接写
var currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
setTimeout(function()
var wv = currentWebview.children()[0];
wv.setStyle( //设置web-view距离顶部的距离以及自己的高度，单位为px
top:300 , //此处是距离顶部的高度，应该是你页面的头部
height: height , //webview的高度
scalable: false, //webview的页面是否可以缩放，双指放大缩小,
)
, 500); //如页面初始化调用需要写延迟
,
获取视频流地址，在 web-view 中只需要通过 URL 就可以向 H5 进行传参，通过url将数据传入webplayer.html就可以播放监控视频了
// 获取视频流
previewURLs()
this.$api.previewURLs(this.cameraIndexCode,res=>
this.cameraUrl = res.data.url;
console.log("previewURLs",this.cameraUrl);
this.webURL="../../../static/h5player/webplayer.html?cameraIndexCode="+this.cameraIndexCode+"&cameraUrl="+this.cameraUrl
);
,
这就是在uni-app应用内嵌入h5页面，如果我们还要在uni-app应用页面中，添加其他组件模块，记得避开h5页面，web-view组件的层级是最高的。
视频时效
获取的视频播放地址如果是有时效的，还要开启一个定时器，定时刷新获取url
// 视频流地址失效后，重新刷新获取地址
onReady()
// 定时获取视频播放流
this.timer = setInterval(() =>
this.previewURLs();
, 100000)
,
onHide()
// 关闭负荷趋势定时器
if(this.timer)
clearInterval(this.timer);
this.timer = null;
,
这种处理方式不太合适，可以配置为没有时效的链接
传递参数为中文
传入web-view的数据如果是中文，需要进行编码然后传入，否则会出现乱码
//这里对要传入到webview中的参数进行encodeURIComponent编码否则中文乱码
this.url+=encodeURIComponent(data.data)
webview 返回上一页
webview 返回上一页的时候，改变传入的参数就要重新打开一个页面，返回的时候就要多次返回。可以先关闭webview然后跳转页面，具体参考：https://blog.csdn.net/z14322/article/details/125702942。
在H5环境中使用window.postMessage通信，webview向uni-app应用发送消息
应用端uni-app代码：
onLoad: function()
window.addEventListener('message', function(e) // 监听 message 事件
console.log(e.origin);
console.log("从" + e.origin + "收到消息： " + e.data);
);
网页webview代码：
//向uniapp发送信息
function sendMsgToUniapp(value)
parent.postMessage(value, "*");
更多内容可以参考：https://blog.csdn.net/liu2004051957/article/details/126886897。
uni-app中不使用webview、直接在.vue中播放视频
createPlayerIns()
this.playerIns = new window.JSPlugin(
szId: 'play_window', //需要英文字母开头 必填
szBasePath: '/static/h5player/',
iMaxSplit: 1,
iCurrentSplit: 1,
bSupporDoubleClickFull:false,
openDebug:true,
oStyle:
border: "#f00",
borderSelect: "#FFCC00",
background: "#000"
)
,
playVideo()
let playURL = this.cameraUrl;
alert(playURL)
this.playerIns.JS_Play(playURL,
playURL,
mode: 1
, 0).then(() =>
alert("成功播放视频")
, (err) =>
alert('视频播放失败：' + playURL + JSON.stringify(err));
);
,
新增的文件仍然放在static中
在index.html中引入h5player.min.js
以上是关于使用uni-app组件播放视频的主要内容，如果未能解决你的问题，请参考以下文章
uni-app引入海康威视h5player实现视频监控的播放