**前端页面自动加载下一个文件**

前端页面自动加载下一个文件
下面是我找的并且修改的前端页面:

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<body>
<div style="margin:50px auto 0;width:360px;">
    	<button type="button" onclick="myFresh();" id="timeFresh" class='btn btn-mini btn-info'>关闭自动</button>
 <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/JavaScript">
	var i=0;
	var timer=null;
	var status='N';
	$(document).ready(function(){ 
	        myFresh();
	}); 

	function myFresh(){
	    if(status=='Y'){
	    	i=0;
	        status='N';
	        clearInterval(timer); 
	    }else if(status=='N'){
	        status='Y';
	         timer=setInterval(function(){
			i++;
			if(i==1){       
				clearInterval(timer);
				location.reload();     
			}
	    	},1000);
	    }
	}
</script>
</body>
</html>

这个是我的作品成形的:

前端:

  <button type="button" class="roll-nav" onclick="myFresh()" id="D">
                        <i class="fa fa-play fa-2x"></i>
     </button>
function myFresh() {
    if (status == 'Y') {
        i = 0;
        status = 'N';
        clearInterval(timer);
    } else if (status == 'N') {
        status = 'Y';
        timer = setInterval(function () {
            i++;
            if (i == 360) {
                clearInterval(timer);
				//这是一个抓取最新文件的ajax,后台自写
                $.ajax({
                    url: prefix + "/findYear",
                    type: "post",
                    data: {"type": type},
                    cache: true,
                    success: function (result) {

                        if (themeLayer != undefined) {
                            themeLayer.remove();
                        }
                        if (polygon != null) {
                            polygon.remove();
                            popup.remove();
                        }
                        $("#orgName").val(result[0]);
                        createTheme(type, result[0]);
                    }

                });
            }
        }, 1000);
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现Spring Boot加载服务器端的视频文件并在前端播放,可以按照以下步骤进行操作。 1. 首先,在服务器端准备好视频文件并存放在指定的文件夹中,确保视频文件可被访问。 2. 在Spring Boot的后端代码中,创建一个Controller用于处理视频文件加载和传输。 3. 在Controller中,使用@GetMapping或@RequestMapping注解来定义一个接口路径,用于前端请求视频文件的资源。 4. 在接口方法中,使用Java IO流或其他合适的方式读取视频文件,并将读取到的视频数据存储在一个字节数组中。 5. 通过设置HttpServletResponse的响应头,设置Content-Type为"video/mp4"或其他对应视频文件的MIME类型,以确保浏览器能正确解析视频文件。 6. 将读取到的视频数据通过HttpServletResponse的输出流返回给前端。 7. 在前端页面中,使用视频播放组件(如HTML5的video标签)来播放视频。 8. 在前端代码中,通过发起请求调用后端接口,获取视频文件的资源。 9. 将返回的视频数据绑定到视频播放组件,并设置相应的视频属性,如视频URL、自动播放等。 10. 前端页面加载完毕后,视频文件将根据设置进行自动播放或者用户手动点击播放。 总结: 通过Spring Boot的Controller将视频文件读取并返回给前端,在前端通过合适的视频播放组件进行播放,即可实现Spring Boot加载服务器端的视频文件前端播放的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值