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>

我系统里面的文件夹如下所示;

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

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

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