目标:实现自动扫描文件夹,并自动滚动播放里面的视频
思路:一开始是考虑直接用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!功能实现!