SpringMVC 字节流实现播放多媒体

1、前言

在项目中,我们会遇到在线预览,播放MP3、图片、MP4等。用户上传文件后,将路径存储在数据库中,我们可动态读取数据库的数据,然后通过返回文件路径的字符串,在src中发送请求。当然这需要带参数。后台返回流。


2、前台代码:

<script type="text/javascript">
	function getVideo(id){
		window.location.href="${pageContext.request.contextPath }/Test/getVideo.do?id="+id;
	}
</script>
</head>
<body>
<h3>${message }</h3>
<h1>Hello !!!</h1>
<button id="btn" onclick="getVideo('ea48576f30be1669971699c09ad05c94');">播放</button>
<%-- <video id="video" >
	<source src="${path }">
</video> --%>
<audio id="mp3" src="${path }" autoplay="true" controls="true">
</audio>
</body>

3、后台代码:

@Controller
@RequestMapping("/Test")
public class TestController {

	/**
	 * 视频跳转
	 * @param id
	 * @return
	 */
	@RequestMapping("/getVideo.do")
	public ModelAndView getVideo(String id) {
		ModelAndView mav = new ModelAndView("success");
		mav.addObject("path", "/Test/Test/video.do?id="+id);
		return mav;
	}
	
	/**
	 * 视频流读取
	 * @param id
	 * @param response
	 * @throws Exception
	 */
	@RequestMapping("/video.do")
	public @ResponseBody void video(String id, HttpServletResponse response)throws Exception{
		File file = new File("E:/1.mp3");
		FileInputStream in = new FileInputStream(file);
		ServletOutputStream out = response.getOutputStream();
		byte[] b = null;
		while(in.available() >0) {
			if(in.available()>10240) {
				b = new byte[10240];
			}else {
				b = new byte[in.available()];
			}
			in.read(b, 0, b.length);
			out.write(b, 0, b.length);
		}
		in.close();
		out.flush();
		out.close();
	}
}

Reference:

[1] 陶国荣, HTML5实战, 机械工业出版社, 2012, 116-117


posted @ 2017-07-21 22:52  ryelqy  阅读(1234)  评论(0编辑  收藏  举报