H5 video视频播放，使用blob隐藏视频地址
简单的视频播放，代码如下：
video 和 audio 标签相关操作：
controlsList属性只兼容Chrome 58+以上
nodownload: 不要下载
nofullscreen: 不要全屏
noremoteplayback: 不要远程回放
//css方式来隐藏下载按钮 这个方式兼容所有版本的谷歌浏览器
audio::-webkit-media-controls {
overflow: hidden !important
}
audio::-webkit-media-controls-enclosure {
width: calc(100% + 32px);
margin-left: auto;
}
禁止右键：oncontextmenu="return false"
<audio src="/i/horse.ogg" controls="controls" controlsList="nodownload" oncontextmenu="return false">
Your browser does not support the audio element.
</audio>
$("#video").bind("contextmenu",function(){//取消右键事件 ， 取消右键下载
return false;
});
1、页面代码
video对视频格式有要求
controlslist="nodownload" 不显示下载按钮 ；
$("#video").bind("contextmenu",function(){//取消右键事件 ， 取消右键下载
return false;
});<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<video id="video" style="width:800px;height:500px;" controls="controls" controlslist="nodownload"></video>
<script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var xhr = new XMLHttpRequest();//创建XMLHttpRequest对象
xhr.open('POST', '<%=path%>/video/001', true);//配置请求方式、请求地址以及是否同步
xhr.responseType = 'blob';//设置请求结果类型为blob
xhr.onload = function (e) { //请求成功回调函数
if (this.status == 200) {//请求成功
//获取blob对象
var blob = this.response;
//获取blob对象地址，并把值赋给容器
document.getElementById('video').src=URL.createObjectURL(blob);
}
};
xhr.send();
$("#video").bind("contextmenu",function(){//取消右键事件
return false;
});
</script>
</body>
</html>2、后台代码
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.net.URLEncoder;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class VideoController {
@RequestMapping("/video/{name}")
public void video(HttpServletRequest req, HttpServletResponse resp,@PathVariable String name) {
System.out.println("name : " + name);
FileInputStream fis = null;
OutputStream os = null;
try {
File file = new File("E:/Clappr/001.mp4");
// 获取文件名
String fileName = file.getName();
// 判断浏览器的类型
String userAgent = req.getHeader("User-Agent").toLowerCase();
// 如果是火狐浏览器的话，设置浏览器的编码格式
if (userAgent.indexOf("firefox") != -1) {
resp.addHeader("Content-Disposition",
"attachment;filename=" + new String(fileName.getBytes("GB2312"), "ISO-8859-1"));
} else {
resp.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));
}
// 设置response编码
resp.setCharacterEncoding("UTF-8");
resp.addHeader("Content-Length", "" + file.length());
// 设置输出文件类型
resp.setContentType("video/mpeg4");
// 获取response输出流
os = resp.getOutputStream();
fis = new FileInputStream(file);
byte[] buffer = new byte[1024];
int len;
while ((len = fis.read(buffer)) != -1) {
// 输出文件
os.write(buffer, 0, len);
}
} catch (Exception e) {
try {
if (null != fis) {
fis.close();
}
if (null != os) {
os.flush();
os.close();
}
} catch (IOException e1) {
e1.printStackTrace();
}
}
}
}
地址就变成了 blob:http://localhost/3f069d7a-ddcd-47d3-9788-e4eae0f0e989 , 实现了对视频地址的隐藏
