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();
			}
		}
	}
}


image.png

image.png


地址就变成了   blob:http://localhost/3f069d7a-ddcd-47d3-9788-e4eae0f0e989 ,  实现了对视频地址的隐藏





video 视频播放

2020.11.18 21:14

https://www.meihaocloud.com.com/150.html , 欢迎转载,请在文章页标出原文连接 !


Copyright © 2020 千夕网 联系站长

粤公网安备 44030302001408号 粤ICP备19099833号-1