java javascript和jsp联合,实现读取项目视频,并实时播放
·
本篇文章主要是对项目里面的视频文件进行读取,通过读取的文件名实现实时播放视频,和其他人的视频播放主要区别是,可以实现动态读取文件夹里面的视频文件,并实时回放,下面看一下主要代码
第一部分,java实现文件夹视频文件读取和特定字符长度读取
package FileUtils;
import java.io.File;
/**
* Java读取文件夹下的所有文件名和文件
* @author Younger
*
*/
public class ReadFile {
public static void main(String[] args) {
//这是需要获取的文件夹路径
File file = new File("D:\\F\\视频监控相关的项目\\视频监控系统\\视频监控系统\\web\\VideoPlay");
File[] array = file.listFiles();
System.out.println(array[0].getName());
}
}
package FileUtils;
import java.io.File;
import java.io.UnsupportedEncodingException;
/**
* @author Administrator
*
*/
public class StringSubUtils {
/**
* 判断是否是一个中文汉字
*
* @param c
* 字符
* @return true表示是中文汉字,false表示是英文字母
* @throws UnsupportedEncodingException
* 使用了JAVA不支持的编码格式
*/
public static boolean isChineseChar(char c) throws UnsupportedEncodingException {
// 如果字节数大于1,是汉字
// 以这种方式区别英文字母和中文汉字并不是十分严谨,但在这个题目中,这样判断已经足够了
return String.valueOf(c).getBytes("utf-8").length > 1;
}
/**
* 计算当前String字符串所占的总Byte长度
*
* @param args
* 要截取的字符串
* @return 返回值int型,字符串所占的字节长度,如果args为空或者“”则返回0
* @throws UnsupportedEncodingException
*/
public static int getStringByteLenths(String args) throws UnsupportedEncodingException {
return args != null && args != "" ? args.getBytes("utf-8").length : 0;
}
/**
* 获取与字符串每一个char对应的字节长度数组
*
* @param args
* 要计算的目标字符串
* @return int[] 数组类型,返回与字符串每一个char对应的字节长度数组
* @throws UnsupportedEncodingException
*/
public static int[] getByteLenArrays(String args) throws UnsupportedEncodingException {
char[] strlen = args.toCharArray();
int[] charlen = new int[strlen.length];
for (int i = 0; i < strlen.length; i++) {
charlen[i] = String.valueOf(strlen[i]).getBytes("utf-8").length;
}
return charlen;
}
public static String substringByte(String orignal, int start, int count) {
// 如果目标字符串为空,则直接返回,不进入截取逻辑;
if (orignal == null || "".equals(orignal))
return orignal;
// 截取Byte长度必须>0
if (count <= 0)
return orignal;
// 截取的起始字节数必须比
if (start < 0)
start = 0;
// 目标char Pull buff缓存区间;
StringBuffer buff = new StringBuffer();
try {
// 截取字节起始字节位置大于目标String的Byte的length则返回空值
if (start >= getStringByteLenths(orignal))
return null;
// int[] arrlen=getByteLenArrays(orignal);
int len = 0;
char c;
// 遍历String的每一个Char字符,计算当前总长度
// 如果到当前Char的的字节长度大于要截取的字符总长度,则跳出循环返回截取的字符串。
for (int i = 0; i < orignal.toCharArray().length; i++) {
c = orignal.charAt(i);
// 当起始位置为0时候
if (start == 0) {
len += String.valueOf(c).getBytes("utf-8").length;
if (len <= count)
buff.append(c);
else
break;
} else {
// 截取字符串从非0位置开始
len += String.valueOf(c).getBytes("utf-8").length;
if (len >= start && len <= start + count) {
buff.append(c);
}
if (len > start + count)
break;
}
}
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
// 返回最终截取的字符结果;
// 创建String对象,传入目标char Buff对象
return new String(buff);
}
/**
* 截取指定长度字符串
*
* @param orignal
* 要截取的目标字符串
* @param count
* 指定截取长度
* @return 返回截取后的字符串
*/
public static String substringByte(String orignal, int count) {
return substringByte(orignal, 0, count);
}
public static void main(String[] args) {
// 原始字符串
File file = new File("D:\\F\\视频监控相关的项目\\视频监控系统\\视频监控系统\\web\\VideoPlay");
File[] array = file.listFiles();
System.out.println(StringSubUtils.substringByte(array[1].getName(), 23));
}
}
第二步,jsp页面引入java,并写对应的方法
<div class="oneVideo">
<video id="myVideo" controls preload="none" width="100%" height="100%" data-setup="{}" autoplay="autoplay" ></video>
</div>
<table class="VideoDisplay" cellpadding="0" border="1" frame="rows">
<thead>
<tr>
<th style="border-right-style: none">日期</th>
<th >操作</th>
</tr>
</thead>
<tbody >
<%
File file = new File("D:\\F\\视频监控相关的项目\\视频监控系统\\视频监控系统\\web\\VideoPlay");
File[] array = file.listFiles();
for(int i =0; i< array.length; i++){
String name = StringSubUtils.substringByte(array[i].getName(), 19);
String download = StringSubUtils.substringByte(array[i].getName(),23);
%>
<tr style="width: 340px;">
<td style="border-right-style: none" ><input class="Backplay" value="<%=name%>" type="text"></td>
<td >
<button onclick="playlist(this)" class="pic_box huifang">回放</button>
</td>
</tr>
<%
}
%>
</tbody>
</table>
js方法如下
<script>
function playlist(element) {
var MV=document.getElementById("myVideo");
let Element_td = element.parentNode;
let Element_tr = Element_td.parentNode;
let Element_first_td = Element_tr.getElementsByTagName('td');
let Element_first_td_input = Element_first_td[0].childNodes[0];
let Eftiv = Element_first_td_input.value;
let name;
name = 'VideoPlay/'+Eftiv+'.mp4';
MV.src= name;
MV.play();
}
</script>
我系统里面的文件夹如下所示;

下面运行代码,看看是否通过文件名读取到文件夹得所有文件:

在页面中,我的所有视频文件都已经动态读取到,下面点击回放,看一下效果怎么样:

可以实现实时播放,这就大功告成了,读取文件夹的视频 数量,并且实时回放,功能完成
更多推荐


所有评论(0)