最近项目中遇到一个问题,需要保存上传视频的时长,但以前上传的时候数据库都没有保存这个数据,所以现在要更新这个字段。
一开始想通过java代码来实现这个功能，但百度了很久，只有一种方法，那就是先要下载到本地，然后再一个一个的遍历查询。
觉得这种方法如果是小视频还行，大视频的话就太花时间了。于是想到了通过html5的video标签来实现这个功能。
下面就先说一下基本思路：
1.后台先把需要查询的视频url放到一个List<String>里传到前端页面.
2.通过js来遍历这个list,把每个值赋值到video里.
3.通过video的duration属性来得到视频的时长.
测试下来,遍历了10个url地址,差不多15秒
下面是前端的代码,有不懂的欢迎留言提问.
<!DOCTYPE html>
<html>
<script type="text/javascript" th:src="@{../assets/jquery/jquery.min.js}"></script>
<head>
<meta charset="UTF-8">
</head>
<body>
<button onclick="test()">video</button>
<ul th:each="videoUrl:${videoList}" id="ulVideo" style="display:none">
<li th:text=${videoUrl}></li>
</ul>
<video style="display:none" controls="controls" name="media" id="divVideo" >
<source type="video/mp4">
</video>
</body>
<script th:inline="javascript" >
var interval;
var length = 0;
var lis = [[${videoList.size()}]];;
var index = 0;
function test(){
document.getElementById("divVideo").src=$("ul li").eq(index).text();
interval = setInterval(test2,1000)
}
function test2(){
if(document.getElementById("divVideo").readyState == 4){
length=parseInt($("#divVideo").get(0).duration);
console.log(length);
clearInterval(interval);
index++;
if(index < lis){
test();
}else{
console.log("end");
}
}else{
console.log("加载中...");
}
}
</script>
</html>