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

做了一个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. 一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系

    以下内容都是针对Pytorch 1.0-1.1介绍. 很多文章都是从Dataset等对象自下往上进行介绍,但是对于初学者而言,其实这并不好理解,因为有的时候会不自觉地陷入到一些细枝末节中去,而不能把握 ...

  2. python 实现 AES ECB模式加解密

    AES ECB模式加解密使用cryptopp完成AES的ECB模式进行加解密. AES加密数据块分组长度必须为128比特,密钥长度可以是128比特.192比特.256比特中的任意一个.(8比特 == ...

  3. 自学git

    网址:https://github.com/join/plan 注册:gzhcsu 注册邮箱:QQ邮箱.

  4. modbus-poll和modbus-slave工具的学习使用——modbus协议功能码3的解析(及欧姆龙温控器调试笔记)

    最近的项目中使用到了欧姆龙的温控器,里面有很多的通信方式,我们使用的常见的modbus——RTU方式,其他方式我们不使用,其中通信手册上面有很多通信的实例,欧姆龙modbus还区分4字节模式和2字节模 ...

  5. jQuery--data()方法

    data() 函数用于在当前jQuery对象所匹配的所有元素上存取数据. 通过data()函数存取的数据都是临时数据,一旦页面刷新,之前存放的数据都将不复存在. 该函数属于jQuery对象(实例).如 ...

  6. HDU-1848-Fibonacci again and again(SG函数,博弈)

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=1848 题意: 任何一个大学生对菲波那契数列(Fibonacci numbers)应该都不会陌生,它是这样 ...

  7. 手写spark wordCount

    val conf: SparkConf = new SparkConf().setMaster(Local[*]).setAppName("wordCount") val sc=n ...

  8. s3-sftp-proxy goreleaser rpm &&deb 包制作

    上次写过简单的s3-sftp-proxy基于容器构建以及使用goreleaser构建跨平台二进制文件的,下边演示下关于 rpm&&deb 包的制作,我们只需要简单的配置就可以生成方便安 ...

  9. ubuntu笔记1-vim安装报错

    ubuntu安装vim的时候,报错提示:vim : 依赖: vim-common (= 2:7.3.429-2ubuntu2) 但是 2:7.3.429-2ubuntu2.1 正要被安装 说明既存的v ...

  10. 记一次cpu指标异常的跟踪排查

    问题描述: 最近在测试环境的服务器上,无意中发现cpu持续飙高.最高的时候达到了200%经过反复重启无效之后,决定挖掘深层次的原因 通过top命令打印出消耗cpu的pid,如图 通过ps -mp 24 ...