解决小程序安卓设备android可以播放在线网络视频 ,苹果ios设备无法播放视频 ,

15 篇文章 2 订阅
7 篇文章 1 订阅

问题:

小程序上,android设备可以正常播放在线网络视频 , 但是ios设备无法正常播放.

原来是因为ios设备加载视频的时候和android不一样导致的,

ios会分段去请求相应的字节区间 , 而android支持一下全部请求

所以后台这块就可以分流返回视频流

 

@RequestMapping(value = "/videoPlayer", method = RequestMethod.GET)
	public void player2(HttpServletRequest request, HttpServletResponse response) {
		String path = request.getServletContext().getRealPath("/static/my/video/interview.mp4");
		BufferedInputStream bis = null;
		try {
			File file = new File(path);
			if (file.exists()) {
				long p = 0L;
				long toLength = 0L;
				long contentLength = 0L;
				int rangeSwitch = 0; 
				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("application/octet-stream");
				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();
		}

这样就不仅支持了ios设备 , 同样也加快了android设备的播放速度 , 每次只请求一小节数据流就可以了

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 原因是因为iOS设备上的Safari浏览器对于自动播放的限制比较严格,在使用video标签播放视频时,如果没有用户手动触发播放行为,视频无法自动播放。 而在使用Vue的iOS视频链接可以播放,是因为很可能是通过JavaScript的方式触发了播放行为。这是因为JavaScript可以绕开Safari浏览器对于自动播放的限制,但是需要使用相应的API进行调用。 如果想要使用video标签在iOS设备上自动播放视频,可以使用video标签的playsinline属性或者给其添加webkit-playsinline属性,并且将muted属性设置为true,这样即使没有用户手动触发播放行为也能够自动播放。但是需要注意的是,这种方法可能会被苹果官方视为违规,从而导致App Store审核不通过。 因此,对于iOS设备上的视频播放,我们需要综合考虑使用video标签自动播放、JavaScript触发播放以及苹果官方推荐的播放方式。最终选择合适的方法,以确保视频能够在iOS设备上正常播放。 ### 回答2: Vue无法直接通过video标签播放iOS点播视频链接的问题,可能是因为iOS对于视频播放有一些限制。苹果公司为了保护用户的隐私全和节省用户的流量,iOS设备播放视频时候对于视频源有一些限制。 为了解决这个问题,可以尝试以下几种方法: 1. 使用Vue的插件或者第三方库。在Vue的官方插件库或者第三方开发者社区中,可能已经有一些解决iOS视频播放问题的插件或者库。可以尝试寻找并装其中合适的插件或者库,根据其文档进行配置和使用,以实现在iOS播放视频链接。 2. 使用可兼容iOS视频播放组件。除了video标签,还可以尝试使用其他可兼容iOS视频播放组件,例如HLS.js、Video.js等。这些组件在移动设备上有更好的兼容性和稳定性,可以帮助解决iOS视频播放的问题。 3. 使用WebView来播放视频。如果以上两种方法都无法解决问题,可以考虑在Vue应用中使用WebView来播放视频。WebView是一个可以加载网页和播放视频的组件,可以通过Vue组件或者指令的方式在Vue应用中集成。通过WebView可以达到兼容iOSAndroid视频播放效果。 需要注意的是,以上方法仅仅是一些尝试的方向,具体的解决方法还需要根据具体的项目需求和开发环境来确定。如果还无法解决问题,建议查阅相关的技术文档和社区讨论,或者咨询专业的开发人员。 ### 回答3: 根据提供的信息,问题可能出在video标签没有设置正确的视频源或者视频源不兼容。Vue和iOS本身并不会对视频播放存在冲突,video标签在Vue中是用来显示和播放视频的常用元素之一。所以我们首先需要确保video标签中的视频源设置正确。 一种可能的错误是视频源格式与video标签不兼容。video标签支持多种格式的视频源,如MP4、WebM、Ogg等。请确认视频源是以支持的格式之一来提供的。如果视频源是以其他格式提供的,可以尝试将其转换为支持的格式再重新传入video标签。 另一种可能是视频源的路径或URL设置不正确。在Vue中使用video标签播放视频时,需要确保视频源的路径或URL正确指向到视频文件。请检查视频源路径或URL是否正确,并确保它们可以在iOS设备上正常访问。 另外,还可能存在其他引起视频无法播放的问题,比如网络连接问题、视频文件损坏等。在解决问题之前,可以尝试使用其他视频文件测试video标签是否能够正常播放,以确定问题是否出在视频文件本身。 总结起来,要解决Vue中使用video标签无法播放的问题,需要确保视频源的格式正确、路径或URL设置正确,并排除其他可能引起问题的因素。如果问题仍然存在,可以考虑使用其他方法或组件来实现视频播放

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

树很忙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值