使用videojs来实现视频拖拽在线播放web端

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



	}

 

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

<p>我将带领大家使用<strong>Java、FFmpeg、Nginx</strong>亲手搭建“<strong><span style="color: #e53333;">直播网站</span></strong>”。</p> <p>主要内容包括:</p> <p>1、<strong>亲手搭建</strong><strong><span style="color: #e53333;">Java+nginx</span>直播网站</strong>,用源码方式编译nginx和rtmp模块。</p> <p>2、亲手搭建<strong>FFmpeg</strong>环境,并使用命令行<strong>进行直播推流</strong>。</p> <p>3、亲手搭建<strong>Videojs</strong>环境,实现<strong>网页直播</strong>拉流功能。</p> <p style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; margin: 0px; padding: 0px; color: #313d54; font-size: 16px; background-color: #ffffff;"><span style="margin: 0px; padding: 0px; color: #424242;">梅老师<strong style="margin: 0px; padding: 0px;">从事音视频与流媒体行业18年</strong>;曾在</span><span style="margin: 0px; padding: 0px; color: #974806;"><strong style="margin: 0px; padding: 0px;">永新视博、中科大洋、百度、美国Harris广播事业部</strong></span><span style="margin: 0px; padding: 0px; color: #424242;">等公司就职,经验丰富;曾亲手主导广电直播全套项目,精通h.264/h.265/aac,曾亲自参与百度app上的网页播放器等实战产品。</span></p> <p style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; margin: 0px; padding: 0px; color: #313d54; font-size: 16px; background-color: #ffffff;"><span style="margin: 0px; padding: 0px; color: #424242;">目前全身心自主创业,主要<span style="margin: 0px; padding: 0px; color: #ff0000;"><strong style="margin: 0px; padding: 0px;">聚焦音视频+流媒体行业</strong></span>,<span style="margin: 0px; padding: 0px; color: #00b050;"><strong style="margin: 0px; padding: 0px;">精通音视频加密、流媒体在线转码快编等热门产品</strong></span>。</span></p>
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值