从文件服务器读取音视频文件,以流的方式传给前台,并能够播放视频。

做了一个demo,用html5的video,audio标签实现。

后台实现代码:

  1. @GetMapping(value = "/getVideos")
  2. public String getVideos(HttpServletRequest request, HttpServletResponse response)
  3. {
  4. try {
  5. FileInputStream fis = null;
  6. OutputStream os = null ;
  7. fis = new FileInputStream("C:\\Users\\zhangxin\\Desktop\\douyin.mp4");
  8. int size = fis.available(); // 得到文件大小
  9. byte data[] = new byte[size];
  10. fis.read(data); // 读数据
  11. fis.close();
  12. fis = null;
  13. response.setContentType("video/mp4"); // 设置返回的文件类型
  14. os = response.getOutputStream();
  15. os.write(data);
  16. os.flush();
  17. os.close();
  18. os = null;
  19.  
  20. } catch (FileNotFoundException e) {
  21. e.printStackTrace();
  22. } catch (IOException e) {
  23. e.printStackTrace();
  24. }
  25. return null;
  26. }

前端实现代码:

  1. <video width="" height="" controls="controls" id="video" preload="auto" >
  2. <source src="getVideos" type="video/mp4">
  3. </video>

html5 video标签播放视频流的更多相关文章

  1. HTML5 video标签播放视频下载原理

    HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...

  2. 在使用html5的video标签播放视频时为何只有声音却没有图像

    在使用html5的video标签播放视频时为何只有声音却没有图像? 答:使用格式化工厂转个编码就行了,MP4有3种编码,mpg4(xdiv),,mpg4(xvid),avc(h264)转换成H264编 ...

  3. mp4 格式无法使用html5的video标签播放

     只有视频编码为h264的视频才能在html5中使用video标签播放 我的解决方法为:下载魔影工厂,按照如下图所示步骤操作: width:600px;

  4. Web视频播放 之 【HTML5 Video标签】

    一.说明 HTML5中引入了video标签用于方便的在浏览器中播放视频,不在需要对flashPlayer进行依赖,更加轻量级.但在浏览器兼容.视频协议支持方面还有一些需要注意的问题. 二.浏览器兼容 ...

  5. html5 video标签如何禁止视频下载

    html5 video标签如何禁止视频下载 一.总结 一句话总结:bing方法给video对象绑定return false的匿名方法. 1.html5 video标签如何禁止视频下载? bing方法给 ...

  6. IPhone微信H5用Video标签播放不了视频

    H5用Video标签播放视频 视频在安卓上可以正常播放,在苹果上却不能播放. 因为用了文件服务站点,而且不支持断点下载 把文件服务改成支持断点下载即可 断点下载参考(C#)

  7. html5 video标签屏蔽右键视频另存为的js代码-HTML5教程

    点评:html5 video标签本身有下载功能但是在video区域内,点击右键可以将“视频另存为”下面是屏蔽右键视频另存为的js代码,有此需求的朋友不要错过   做HTML5的video标签,本身我们 ...

  8. 用HTML5 video标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉

    使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...

  9. ie8及ie8以下支持html5 video标签

    html5media是一个很给力的JavaScript类库,它不依赖于任何JavaScript框架.使用了html5media之后,当浏览器不支持HTML5时,它将会自动切换成Flash模式的Flow ...

随机推荐

  1. MySQL利用IF查询不同条件并分别统计记录数

    数据库记录如下: 现在要查询统计出每个'name'的'result'分别为'success'和'fail'的次数: 利用IF条件判断满足条件为1,不满足为0,再用SUM函数求和,最后通过'name'分 ...

  2. python笔记44-HTTP对外接口sign签名

    前言 一般公司对外的接口都会用到sign签名,对不同的客户提供不同的apikey ,这样可以提高接口请求的安全性,避免被人抓包后乱请求. sign签名是一种很常见的方式 sign签名 签名参数sign ...

  3. 前端性能----TCP协议

    TCP属于OSI七层模型中的传输层协议,位于网络边缘,提供端到端的可靠数据传输,其有着承上启下的作用,协议数据单元为报文段(Message Segment). TCP需要提供以下功能: 分组和复用 应 ...

  4. Helm 安装使用

    简介 很多人都使用过Ubuntu下的ap-get或者CentOS下的yum, 这两者都是Linux系统下的包管理工具.采用apt-get/yum,应用开发者可以管理应用包之间的依赖关系,发布应用:用户 ...

  5. Can总线上的电平及物理层仲裁

    CAN总线采用差分信号传输,通常情况下只需要两根信号线(CAN-H和CAN-L)就可以进行正常的通信.在干扰比较强的场合,还需要用到屏蔽地即CAN-G(主要功能是屏蔽干扰信号),CAN协议推荐用户使用 ...

  6. 各位大神,我请教一个问题,我在Android studio上创一个project显示错误

    Error:FAILURE: Build failed with an exception. * Where: Build file 'C:\Users\Administrator\AndroidSt ...

  7. mysql使用过程中出现的问题总结

    1.mysql命令窗口输入密码后窗口闪退 密码输入错误.(其他暂不清楚) 2. 出现这个错误的原因是,数据库的编码格式不一致. https://www.cnblogs.com/lsr-flying/p ...

  8. Cookie实现购物车功能

    这里的购物车暂时存放书,后期把参数改成Object,把方法抽取成接口,只要实现了接口的Object类都可以放进购物项,这样就实现了购物任何物品 使用购物项因为一个购物项可以包含某种商品的数量,总价等, ...

  9. 【Wannafly挑战赛24E】旅行

    [Wannafly挑战赛24E]旅行 题面 牛客 题解 首先有一个非常显然的\(dp\):我们直接把\(s\rightarrow t\)的路径抠出来然后设\(f_{i,j}\)表示到第\(i\)个点, ...

  10. Luogu P2447 [SDOI2010]外星千足虫 高斯消元

    链接 给出的条件是异或类型的方程,可以直接用bitset优化高斯消元. 至于求K,在高斯消元时记录用到的最大的方程的编号即可. 代码: // luogu-judger-enable-o2 #inclu ...