JSP :实现无后台自动扫描指定文件夹下的视频,并循环播放

目标:实现自动扫描文件夹,并自动滚动播放里面的视频

思路:一开始是考虑直接用js读取文件夹下的视频名称,然后通过getElementById()方法来循环替换vedio.src的值,但是,完全不行。因为现有的主流浏览器的安全机制不允许js直接读取指定路径下的资源,除了IE,IE有个特有的方法,自行百度。

网上查阅到js自动播放视频代码如下,只能固定的几个视频播放(找不到这段代码的出处了,知道的告知下)。此时考虑对video.src动态赋值来实现。

<video id="vv" height="500" width="100%">
        <source src="video/demo.mp4" type='video/mp4' />
</video>
<script>
    var vList = ['/GAOSystem/video/1.mp4', '/GAOSystem/video/2.mp4']; // 初始化播放列表
        var vLen = vList.length; // 播放列表的长度
        var curr = 0; // 当前播放的视频

        var video = document.getElementById("vv");
</script>

此时,只能考虑用java来了,但是我不想写后台,好累。只是为了一个简单的功能,没必要。java可以实现读取文件夹下的资源名称,而jsp也恰好可以写Java代码,OK,思路确定。

第一:先用java代码读取文件夹下的资源名称,然后存到一个数组temp里;第二:将temp数组中的值传给js数组,让js将数组中的值逐个赋给video.src;

额外处理:我对视频地址设置了虚拟路径,这样只需要在桌面指定文件夹中放入视频就可以。

实现代码如下:

<%@ page import="java.io.File" %>
<%--
  Created by IntelliJ IDEA.
  User: yy
  Date: 2019/4/14
  Time: 23:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>
<body>
<%
    String path = "C:\\Users\\yezhi\\Desktop\\video";
    File file = new File(path);
    File[] tempList = file.listFiles();
    String[] temp = new String[tempList.length];
    if (tempList != null && tempList.length > 0) {
        System.out.println("该目录下对象个数:" + tempList.length);
        for (int i = 0; i < tempList.length; i++) {
            if (tempList[i].isFile()) {
                System.out.println("文件:" + tempList[i]);
                temp[i] = tempList[i].toString().substring(22).replaceAll("\\\\","/");
                System.out.println(temp[i]);
            }
            if (tempList[i].isDirectory()) {
                System.out.println("文件夹:" + tempList[i]);
            }
        }
    }
%>

    <video id="example" height="100%" width="100%" style="display: none"></video>
    <script language="javascript">
        var list = new Array();
        var str ="/GAOSystem";
        <%
            for (int i = 0; i < temp.length; i++) {
                /*System.out.println(tempList[i].toString());*/
        %>
        list[<%= i%>] = '<%= temp[i]%>';
        <%}
        %>
        var i = 0;
        while (i < list.length){
            console.log(list[i]);
            list[i] = str + list[i];
            console.log(list[i]);
            i++;
        }

        var vList = list; // 初始化播放列表
        var vLen = vList.length; // 播放列表的长度
        var curr = 0; // 当前播放的视频

        var video = document.getElementById("example");

        video.addEventListener('ended', play);
        setTimeout("play()",180000);
        //play();//因为一开始加载时,视频不会播放,所以永远无法获得ended状态,事件就不能执行,所以此处调用play()函数,让视频开始播放
        function play() {
            video.src = vList[curr];
            console.log(vList[curr]);
            video.load();
            video.play();
            curr++;
            if(curr >= vLen){
                curr = 0; // 播放完了,重新播放
            }

        }
        var timeStamp = Date.parse(new Date());//初始值记录进入页面的时间戳,后面为退出视频时的时间
        //当视频在播放状态,点击屏幕退出播放
        $("video").click(function(){
            $("video").hide();
            var myVideo = document.getElementsByTagName('video')[0];   //获取视频video
            myVideo.pause();
            console.log("视频退出");
            timeStamp = Date.parse(new Date());
            console.log("退出时间" + timeStamp);
        })

        function aaa (){
            console.log("进入aaa函数");
            var nowTime = Date.parse(new Date());
            if (nowTime - timeStamp > 180000) {//设置3分钟执行播放视频
                var myVideo = document.getElementsByTagName('video')[0];   //获取视频video
                if (myVideo.paused){

                    myVideo.play();

                }
                $("video").show();
            };
        }
        timer1 = window.setInterval(aaa ,5000);//每五秒检查一次
    </script>
</body>
</html>

tomcat配置虚拟路径

修改server.xml,其中path是映射的虚拟路径(可视具体情况配置),docBase是静态资源存放的真实物理路径,reloadable指有文件更新时,是否重新加载,一般设置为true后,tomcat不需要重启启动,自动热加载!

OK!功能实现!

发布了22 篇原创文章 · 获赞 3 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_41623154/article/details/89314021
今日推荐