web/java实现多种格式视频上传、转码、截图、播放、下载等功能附源码（详细）(3)

这个文件就有些复杂了，其中涵盖到视频的转码、截图、转码是必须判定视频类别的，

如果是ffmpeg能解析的格式:(asx，asf，mpg，wmv，3gp，mp4，mov，avi，flv等)就用ffmpeg转码成mp4。

如果是ffmpeg无法解析的文件格式(wmv9，rm，rmvb等), 就先用别的工具（mencoder）转换为avi，然后在采用ffmpeg来转码成mp4。

每个视频就会手动生成一张相关的照片。用于前台展示。

其中视频是码率成h.264的编码格式，很多播放器对这个有要求。

这样下次，等web上传一个视频，就会上传，然后转码成mp4，然后数据记录存入sql中。

上传的视频：

转码之后的视频：

转码后生成的视频图片：

在前台做个a标签，附带参数id，当单击视频的对应id之后，就会跳转到videoView视频播放页控制层，查询数据，然后拿到url，然后跳转到播放页面去。

videoView控制层

源码如下：

					/**
					 * @Description:(跳转到后台视频的播放页)
					 * @param:@param request
					 * @param:@param response
					 * @param:@param session
					 * @param:@return
					 * @return:ModelAndView
					 * @author:Zoutao
					 * @date:2018-6-12
					 * @version:V1.0
					 */
					@RequestMapping("/videoView")
					public ModelAndView videoView(HttpServletRequest request,
							HttpServletResponse response, HttpSession session) {
						System.out.println("进入videoView视频播放页控制层");
						ModelAndView model = new ModelAndView("back/playvideo");
						// 获取上传的id
						int id = Integer.parseInt(request.getParameter("id"));
						
						tb_resource resource = null;
						resource = tb_resourceService.getResourceById(id); // 通过id获取资源信息
						System.out.println("查询到的数据:" + resource);
						String url = resource.getUrl();
						System.out.println("地址为:" + url);
						System.out.println("获取文件名filename");
						String suffix = resource.getSuffix();
						System.out.println("后缀名为:" + suffix);
						System.out.println("播放的视频路径:" + url);
						// 调用转换类DocConverter,并将需要转换的文件传递给该类的构造方法
						
						session.setAttribute("VideoName", suffix);	//只需要把文件名字/后缀名注入到session带回前台
						
						System.out.println("全局路径为:" + session.getAttribute("VideoName"));
						
						if (resource!=null) {
							model.addObject("resource",resource); //视频相关信息带到前台
						}
						
						return model;
					}

前台的视频播放页面：

播放器采用video.js插件，因为视频都早已转码成mp4的了，就不在意以前是哪个格式的，任何一个播放器基本上都可以播放mp4.

源码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%
	String VideoName = session.getAttribute("VideoName").toString();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/backstyle.css" rel="stylesheet" type="text/css" />
<link href="css/select.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=basePath%>js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.idTabs.min.js"></script>
<script type="text/javascript" src="js/select-ui.min.js"></script>
<!-- 去掉...引用就是使用video.js播放，不引用就是使用html5的video标签播放 -->
<script src="<%=basePath%>static.../js/video.min.js"></script>
<script src="<%=basePath%>static.../js/zh-CN.js"></script>
<link href="<%=basePath%>static.../css/video-js.min.css" rel="stylesheet">
<script>
  videojs.options.flash.swf = "http://example.com/path/to/video-js.swf"
</script>
<style>
body {
	background-color: #e5ebee
	width: 1000px;
	height: 800px;
}
.m { 
	width: 600px;
	height: 400px;
	margin-left: 20%;
	margin-right: 5%;
	margin-top: 2%;
	margin-bootom: 5%;
}
/* 暂停时显示播放按钮 */
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block;
}
/* 点击屏幕播放/暂停 */
.video-js.vjs-playing .vjs-tech {
    pointer-events: auto;
}
</style>
<!-- 设置宽高自适应 -->
<script type="text/javascript">
var player = videojs('#my-video',{fluid: true},function(){
    console.log('Good to go!');
    this.play(); // if you don't trust autoplay for some reason
})
videojs("my-video", {}, function(){
    　　  //video.js初始化完成后执行
    });
</script>
<title>视频播放</title>
</head>
<body>
	<div class="place">
		<span>位置：</span>
		<ul class="placeul">
			 <!-- <li><a href="back/resourceList?uid=3">视频资源管理</a></li> -->
			<li><a href="javascript:void(0)">视频播放</a></li>
		</ul>
	</div>
	<div class="Name" style="font-size: 15px;margin: 1% 0 0 0;text-align: center;">
		<%-- 视频名称:<%=VideoName%> --%>
		<c:if test="${not empty resource}">
			<td>视频标题：${resource.title}</td>
			<td>上传者：${resource.writer}</td>
			<td>上传时间：${resource.time}</td>
			<td>播放量：${resource.clicks}</td>
		</c:if> 
		
	</div>
		
<!-- class后面加vjs-fluid就设置宽高自适应 ,浏览器自带的控制条,自动预加载,视频封面-->
 <div class="m">
		
		<video 
		id="my-video" 
		class="video-js vjs-big-play-centered" 
		width="800" 
		height="500" 
		align="middle" 
		controls="true" 
		preload="auto" 
		poster="/websiteimages/finshimg/GZNC.jpg" 
		data-setup="{}" >
		
		<source src="/websiteimages/finshvideo/<%=VideoName%>" type="video/mp4" ></source>
		
		<p class="vjs-no-js">
			暂不支持本浏览器 <a href="http://videojs.com/html5-video-support/"
				target="_blank">请将浏览器设置为极速模式，使用html5播放</a></p>
		</video>
		<p style="color:red;margin:20px auto auto 33%;">温馨提示：点击播放器中下载按钮或者鼠标右键另存视频即可下载本视频。</p>
</div> 
<!--这是带下载按钮版本-->
	<!-- <video id="my-video" 
		class="video-js " 
		src="/video/5.mp4" 
		controls="controls"			//浏览器自带的控制条
		preload="auto"
		width="500"			//不能写px
		height="300" 
		poster="/video/1.jpg" >		//视频封面
		您的浏览器不支持播放该视频！
	</video> -->
</body>
</html>

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-121502-3.html