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

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

后台实现代码:

@GetMapping(value = "/getVideos")
public String getVideos(HttpServletRequest request, HttpServletResponse response)
{
try {
FileInputStream fis = null;
OutputStream os = null ;
fis = new FileInputStream("C:\\Users\\zhangxin\\Desktop\\douyin.mp4");
int size = fis.available(); // 得到文件大小
byte data[] = new byte[size];
fis.read(data); // 读数据
fis.close();
fis = null;
response.setContentType("video/mp4"); // 设置返回的文件类型
os = response.getOutputStream();
os.write(data);
os.flush();
os.close();
os = null; } catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return null;
}

前端实现代码:

<video width="" height="" controls="controls" id="video" preload="auto"     >
<source src="getVideos" type="video/mp4">
</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. python与设计模式--单例模式

    https://zhuanlan.zhihu.com/p/31675841 设计模式分类 创建类 单例模式.工厂模式.抽象工厂模式.原型模式.建造者模式 结构类 装饰器模式.适配器模式.门面模式.组合 ...

  2. 调皮的js

    一.中文变量名 今天偶然看文章.看到js的var还可以用中文做变量名,那么我们试试,看看中文的变量名是否能打印出值呢? var 临时变量="111"; console.log(临时 ...

  3. oracle row_number() over(partition by .. order by ..)和rank() over(partition by .. order by ..) 和dense_rank() over(partition by .. order by ..)的相似点与区别

    新建一个测试表 create table dim_ia_test2(device_number varchar2(20),desc2 varchar2(20)) 插入数据后得到: 一.oracle r ...

  4. JQuery系列(8) - JQuery插件开发

    所谓“插件”,就是用户自己新增的jQuery实例对象的方法.由于该方法要被所有实例共享,所以只能定义在jQuery构造函数的原型对象(prototype)之上.对于用户来说,把一些常用的操作封装成插件 ...

  5. wordpress数字分页列表导航实现

    前面我们用了自定义的方式来实现wordpress数字分页,其实wordpress是已经有集成了Numbered Pagination相关的函数,我们直接调用就可以.具体实现方法如下代码调用 <? ...

  6. .dxf文件

    DXF 是 AutoCAD 与其它软件之间进行 CAD 数据交换的开放矢量数据文件格式,可以分为两类:ASCII 格式和二进制格式:ASCII 具有可读性好的特点,但占用的空间较大:二进制格式则占用的 ...

  7. reids 数据库学习

    最近项目中用到了redis数据库,学习整理下 redis操作学习手册--key操作命令 http://www.cnblogs.com/stephen-liu74/archive/2012/03/26/ ...

  8. C# 全角半角字符互转

    /// <summary> /// 全角空格为12288,半角空格为32 /// 其他字符半角(33-126)与全角(65281-65374)的对应关系是:均相差65248 /// < ...

  9. LOJ3097 SNOI2019 通信 题解

    题目链接 费用流,当建边需要依靠位置和权值两个偏序关系时,可以用cdq分治优化建边. 代码: #include<bits/stdc++.h> using namespace std; #d ...

  10. vlc for mac设置中文的方法

    VLC for mac是一款mac系统下的多媒体播放器,支持播放MPEG-1.MPEG-2.MPEG-4.DivX.MP3和OGG,以及DVD.VCD.等各种流媒体协议在内的多种协议格式,并且能够对电 ...