先下載video.js。
video的官方js文檔：https://docs.videojs.com/
其他的簡介文檔：http://www.jq22.com/jquery-info404
1.html頁面顯示的信息
頁面顯示的信息
··<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
<title>Mp4預覽</title>
<meta name="decorator" content="default" />
<link href="static/videojs/vide7.5.5/css/video-js.min.css?v=2" rel="stylesheet" type="text/css">
<style>
body {
background-color: #0000
}
.m {
width: 960px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="m">
<video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto" width="960" height="400"
data-setup="{}">
<source id="sourceId" src="/ims/sys/attachment/GetFile?aid=${sysAttachment.id}" type="video/mp4">
</video>
<script src="/ims/static/videojs/vide7.5.5/js/video.min.js?v=2"></script>
<script type="text/javascript">
//設置中文
videojs.addLanguage('zh-CN', {
"Play": "播放",
"Pause": "暫停",
"Current Time": "當前時間",
"Duration": "時長",
"Remaining Time": "剩餘時間",
"Stream Type": "媒體流類型",
"LIVE": "直播",
"Loaded": "加載完畢",
"Progress": "進度",
"Fullscreen": "全屏",
"Non-Fullscreen": "退出全屏",
"Mute": "靜音",
"Unmute": "取消靜音",
"Playback Rate": "播放速度",
"Subtitles": "字幕",
"subtitles off": "關閉字幕",
"Captions": "內嵌字幕",
"captions off": "關閉內嵌字幕",
"Chapters": "節目段落",
"Close Modal Dialog": "關閉彈窗",
"Descriptions": "描述",
"descriptions off": "關閉描述",
"Audio Track": "音軌",
"You aborted the media playback": "視頻播放被終止",
"A network error caused the media download to fail part-way.": "網絡錯誤導致視頻下載中途失敗。",
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "視頻因格式不支持或者服務器或網絡的問題無法加載。",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由於視頻文件損壞或是該視頻使用了你的瀏覽器不支持的功能，播放終止。",
"No compatible source was found for this media.": "無法找到此視頻兼容的源。",
"The media is encrypted and we do not have the keys to decrypt it.": "視頻已加密，無法解密。",
"Play Video": "播放視頻",
"Close": "關閉",
"Modal Window": "彈窗",
"This is a modal window": "這是一個彈窗",
"This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按鍵或啓用關閉按鈕來關閉此彈窗。",
", opens captions settings dialog": ", 開啓標題設置彈窗",
", opens subtitles settings dialog": ", 開啓字幕設置彈窗",
", opens descriptions settings dialog": ", 開啓描述設置彈窗",
", selected": ", 選擇",
"captions settings": "字幕設定",
"Audio Player": "音頻播放器",
"Video Player": "視頻播放器",
"Replay": "重播",
"Progress Bar": "進度小節",
"Volume Level": "音量",
"subtitles settings": "字幕設定",
"descriptions settings": "描述設定",
"Text": "文字",
"White": "白",
"Black": "黑",
"Red": "紅",
"Green": "綠",
"Blue": "藍",
"Yellow": "黃",
"Magenta": "紫紅",
"Cyan": "青",
"Background": "背景",
"Window": "視窗",
"Transparent": "透明",
"Semi-Transparent": "半透明",
"Opaque": "不透明",
"Font Size": "字體尺寸",
"Text Edge Style": "字體邊緣樣式",
"None": "無",
"Raised": "浮雕",
"Depressed": "壓低",
"Uniform": "均勻",
"Dropshadow": "下陰影",
"Font Family": "字體庫",
"Proportional Sans-Serif": "比例無細體",
"Monospace Sans-Serif": "單間隔無細體",
"Proportional Serif": "比例細體",
"Monospace Serif": "單間隔細體",
"Casual": "舒適",
"Script": "手寫體",
"Small Caps": "小型大寫字體",
"Reset": "重啓",
"restore all settings to the default values": "恢復全部設定至預設值",
"Done": "完成",
"Caption Settings Dialog": "字幕設定視窗",
"Beginning of dialog window. Escape will cancel and close the window.": "開始對話視窗。離開會取消及關閉視窗",
"End of dialog window.": "結束對話視窗"
});
var myPlayer = videojs('my-video');
videojs("my-video").ready(function(){
var myPlayer = this;
myPlayer.play();
});
</script>
</div>
</body>
</html>
2.後臺加載的代碼.支持前臺拖拽進度條。
/***
* 返回Mp4視頻
*
* @param request
* @param response
* @throws IOException
*/
@RequestMapping("/GetFile")
@ResponseBody
public void getFile(HttpServletRequest request , HttpServletResponse response) throws IOException {
SysAttachment sysAttachment = sysAttachmentService.get(request.getParameter("aid"));
if (sysAttachment !=null&& "mp4".equals(sysAttachment.getType())) {
File file = new File("文件的路徑.mp4");
BufferedInputStream bis = null;
try {
if (file.exists()) {
long p = 0L;
long toLength = 0L;
long contentLength = 0L;
int rangeSwitch = 0; // 0,從頭開始的全文下載；1,從某字節開始的下載（bytes=27000-）；2,從某字節開始到某字節結束的下載（bytes=27000-39000）
long fileLength;
String rangBytes = "";
fileLength = file.length();
// get file content
InputStream ins = new FileInputStream(file);
bis = new BufferedInputStream(ins);
// tell the client to allow accept-ranges
response.reset();
response.setHeader("Accept-Ranges", "bytes");
// client requests a file block download start byte
String range = request.getHeader("Range");
if (range != null && range.trim().length() > 0 && !"null".equals(range)) {
response.setStatus(javax.servlet.http.HttpServletResponse.SC_PARTIAL_CONTENT);
rangBytes = range.replaceAll("bytes=", "");
if (rangBytes.endsWith("-")) { // bytes=270000-
rangeSwitch = 1;
p = Long.parseLong(rangBytes.substring(0, rangBytes.indexOf("-")));
contentLength = fileLength - p; // 客戶端請求的是270000之後的字節（包括bytes下標索引爲270000的字節）
} else { // bytes=270000-320000
rangeSwitch = 2;
String temp1 = rangBytes.substring(0, rangBytes.indexOf("-"));
String temp2 = rangBytes.substring(rangBytes.indexOf("-") + 1, rangBytes.length());
p = Long.parseLong(temp1);
toLength = Long.parseLong(temp2);
contentLength = toLength - p + 1; // 客戶端請求的是 270000-320000 之間的字節
}
} else {
contentLength = fileLength;
}
// 如果設設置了Content-Length，則客戶端會自動進行多線程下載。如果不希望支持多線程，則不要設置這個參數。
// Content-Length: [文件的總大小] - [客戶端請求的下載的文件塊的開始字節]
response.setHeader("Content-Length", new Long(contentLength).toString());
// 斷點開始
// 響應的格式是:
// Content-Range: bytes [文件塊的開始字節]-[文件的總大小 - 1]/[文件的總大小]
if (rangeSwitch == 1) {
String contentRange = new StringBuffer("bytes ").append(new Long(p).toString()).append("-")
.append(new Long(fileLength - 1).toString()).append("/")
.append(new Long(fileLength).toString()).toString();
response.setHeader("Content-Range", contentRange);
bis.skip(p);
} else if (rangeSwitch == 2) {
String contentRange = range.replace("=", " ") + "/" + new Long(fileLength).toString();
response.setHeader("Content-Range", contentRange);
bis.skip(p);
} else {
String contentRange = new StringBuffer("bytes ").append("0-").append(fileLength - 1).append("/")
.append(fileLength).toString();
response.setHeader("Content-Range", contentRange);
}
String fileName = file.getName();
response.setContentType("video/mp4;charset=UTF-8");
response.addHeader("Content-Disposition", "attachment;filename=" + fileName);
OutputStream out = response.getOutputStream();
int n = 0;
long readLength = 0;
int bsize = 1024;
byte[] bytes = new byte[bsize];
if (rangeSwitch == 2) {
// 針對 bytes=27000-39000 的請求，從27000開始寫數據
while (readLength <= contentLength - bsize) {
n = bis.read(bytes);
readLength += n;
out.write(bytes, 0, n);
}
if (readLength <= contentLength) {
n = bis.read(bytes, 0, (int) (contentLength - readLength));
out.write(bytes, 0, n);
}
} else {
while ((n = bis.read(bytes)) != -1) {
out.write(bytes, 0, n);
}
}
out.flush();
out.close();
bis.close();
}
} catch (IOException ie) {
// 忽略 ClientAbortException 之類的異常
} catch (Exception e) {
e.printStackTrace();
}
}
}