HTML5 Video播放本地文件
本人在做项目的时候,有个功能需求需要播放云上的视频和本地磁盘里的视频,播放云上的视频有url直接就能播放,但是播放本地的视频涉及到浏览器跨域的问题,在网上找了很多,但都不能解决我的问题,最后想到了构建流的方式在服务器上播放本地视频。
下面是我在服务器上播放本地视频的效果图
先贴上html5代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!-- controlslist="nodownload" 去掉下载按钮 --><!--<video controls="true" controlslist="nodownload"></video>--><video controls="true" ></video>
</body>
<script type="text/javascript">//禁用掉video的右键菜单var video=document.getElementsByTagName("video")[0];video.oncontextmenu=function(){return false;}var url="/Users/lijunming/Desktop/demo.mp4"; //电脑上视频文件的绝对路径video.src="showVideo?fileName="+url; //告诉服务器要播放视频文件的路径
</script>
</html>
接下来就是服务器根据video标签推送的本地视频url,响应视频流给浏览器
package com.sinosoft.easyrecordhs.controller;import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletResponse;
import java.io.FileInputStream;
import java.io.OutputStream;/*** Created by lijunming* on date 2018-08-08* time 13:07*/
@RestController
public class RequestController {/*** 根据本地图片全路径,响应给浏览器1个图片流*/@RequestMapping("/showImage")public void showImage(HttpServletResponse response, @RequestParam("fileName")String fileName) {show(response,fileName,"image");}/*** 根据本地视频全路径,响应给浏览器1个视频*/@RequestMapping("/showVideo")public void showVideo(HttpServletResponse response, @RequestParam("fileName")String fileName) {show(response,fileName,"video");}/*** 响应文件* @param response* @param fileName 文件全路径* @param type 响应流类型*/public void show(HttpServletResponse response, String fileName,String type){try{FileInputStream fis = new FileInputStream(fileName); // 以byte流的方式打开文件int i=fis.available(); //得到文件大小byte data[]=new byte[i];fis.read(data); //读数据response.setContentType(type+"/*"); //设置返回的文件类型OutputStream toClient=response.getOutputStream(); //得到向客户端输出二进制数据的对象toClient.write(data); //输出数据toClient.flush();toClient.close();fis.close();}catch(Exception e){e.printStackTrace();System.out.println("文件不存在");}}}
HTML5 Video播放本地文件相关推荐
- html5播放器自动全屏,HTML5 video播放器全屏(fullScreen)实现的方法
这篇文章主要介绍了HTML5 video播放器全屏(fullScreen)方法实例,本文直接给出一个完整代码实例,需要的朋友可以参考下 首先来说,这个标题具有误导性,但这样设置改标题也是主要因为vid ...
- HTML5网页播放器,实现播放本地文件
最近制作了个简单的HTML5网页播放器,主要用到了audio标签,读取本地文件用的是FileReader API(貌似仅支持Chrome). 还有web audio API应该也能实现播放本地音乐文件 ...
- HTML5在线播放本地视频(IE9以上的浏览器)
<!DOCTYPE HTML > <html> <head> <title>Html5视频播放</title> <meta http- ...
- html5 video播放按钮放在中间,在html5视频控制区跟踪点击播放按钮(Track clicks to play button in html5 video control area)...
在html5视频控制区跟踪点击播放按钮(Track clicks to play button in html5 video control area) 我点击了一张HTML5视频播放海报,并点击了控 ...
- webview加载本地html_安卓webview html5 自动播放本地视频,网上视频,可以循环播放...
我们做安卓开发时,webview中发现html5 视频的autoplay根本没实现,查看了下android 源码HTMLVideoElement.cpp也未见相应处理,网上有资料显示,这可能关乎UI线 ...
- html5 video播放调研
web duper code{web} :|: life{me} :|: tencent&xiaomi{work} 来源:http://materliu.github.io/all/web/m ...
- html5 video播放调研,全屏,伪全屏
web duper code{web} :|: life{me} :|: tencent&xiaomi{work} 来源:http://materliu.github.io/all/web/m ...
- html5 video 播放状态,10分钟了解HTML5的Video标签属性、方法和事件
标签的属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 width ...
- QMediaplayer播放本地文件mp4失败
在window上利用Qt5的QMediaplayer播放mp3可以,但是换成mp4的就不能播放了.输出的QMediaPlayer错误类型是QMediaPlayer::ResourceError.帮助文 ...
最新文章
- C++知识点29——使用C++标准库(迭代器适配器)
- [Python]再学 socket 之非阻塞 Server
- Exchange DAG备份恢复(六)---通过Windows Server Backup对单个邮箱进行恢复
- Tomcat服务部署和优化
- Angular模板高级使用
- (王道408考研数据结构)第二章线性表-第二节1:顺序表的定义
- MySQL不同版本多实例部署——5.7和8.0
- pgm图像缩小C语言,C++将二进制(P5)图像转换为ascii(P2)图像(.pgm)
- 数学建模竞赛常考三大模型及十大算法【预测模型、优化模型、评价模型】
- 哈理工OJ 1147 重生(水DP)
- Spark安装部署:Standalone模式
- 2022年6月大学英语六级作文
- 室内定位导航地图制作问题
- gold storm翔_牙狼GOLD STORM翔的人物简介
- 撒克逊人:XSLT处理器的剖析
- python 闭包 lambda_Python lambda闭包范围
- 你有花生我有酒,一本学道看一天(一)
- 软件项目需求调研过程
- HCIP-IoT NB-IoT标准
- 金融科技:人行二代征信和百行征信接入方案
热门文章
- android 版本更新和下载安装适配7.0 8.0 9.0
- android 项目导入另一个Android项目作为子模块调用
- 直流有刷电机编码器测速基于STM32F302R8+X-NUCLEO-IHM07M1
- 1--MySQL基础知识内容
- 文献:利用自驱动分子马达并行计算子集和问题 Parallel computation with molecular-motor-propelled agents...(PNAS)
- Java对接支付宝退款功能
- vue3中使用tsx
- 现代软件产品团队关键角色及职责简述
- Atitit.论图片类型 垃圾文件的识别与清理 流程与设计原则 与api概要设计 v2 pbj...
- 中国房价必跌的40个理由