html5 video标签播放视频流
从文件服务器读取音视频文件,以流的方式传给前台,并能够播放视频。
做了一个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标签播放视频流的更多相关文章
- HTML5 video标签播放视频下载原理
HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...
- 在使用html5的video标签播放视频时为何只有声音却没有图像
在使用html5的video标签播放视频时为何只有声音却没有图像? 答:使用格式化工厂转个编码就行了,MP4有3种编码,mpg4(xdiv),,mpg4(xvid),avc(h264)转换成H264编 ...
- mp4 格式无法使用html5的video标签播放
只有视频编码为h264的视频才能在html5中使用video标签播放 我的解决方法为:下载魔影工厂,按照如下图所示步骤操作: width:600px;
- Web视频播放 之 【HTML5 Video标签】
一.说明 HTML5中引入了video标签用于方便的在浏览器中播放视频,不在需要对flashPlayer进行依赖,更加轻量级.但在浏览器兼容.视频协议支持方面还有一些需要注意的问题. 二.浏览器兼容 ...
- html5 video标签如何禁止视频下载
html5 video标签如何禁止视频下载 一.总结 一句话总结:bing方法给video对象绑定return false的匿名方法. 1.html5 video标签如何禁止视频下载? bing方法给 ...
- IPhone微信H5用Video标签播放不了视频
H5用Video标签播放视频 视频在安卓上可以正常播放,在苹果上却不能播放. 因为用了文件服务站点,而且不支持断点下载 把文件服务改成支持断点下载即可 断点下载参考(C#)
- html5 video标签屏蔽右键视频另存为的js代码-HTML5教程
点评:html5 video标签本身有下载功能但是在video区域内,点击右键可以将“视频另存为”下面是屏蔽右键视频另存为的js代码,有此需求的朋友不要错过 做HTML5的video标签,本身我们 ...
- 用HTML5 video标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉
使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...
- ie8及ie8以下支持html5 video标签
html5media是一个很给力的JavaScript类库,它不依赖于任何JavaScript框架.使用了html5media之后,当浏览器不支持HTML5时,它将会自动切换成Flash模式的Flow ...
随机推荐
- python与设计模式--单例模式
https://zhuanlan.zhihu.com/p/31675841 设计模式分类 创建类 单例模式.工厂模式.抽象工厂模式.原型模式.建造者模式 结构类 装饰器模式.适配器模式.门面模式.组合 ...
- 调皮的js
一.中文变量名 今天偶然看文章.看到js的var还可以用中文做变量名,那么我们试试,看看中文的变量名是否能打印出值呢? var 临时变量="111"; console.log(临时 ...
- 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 ...
- JQuery系列(8) - JQuery插件开发
所谓“插件”,就是用户自己新增的jQuery实例对象的方法.由于该方法要被所有实例共享,所以只能定义在jQuery构造函数的原型对象(prototype)之上.对于用户来说,把一些常用的操作封装成插件 ...
- wordpress数字分页列表导航实现
前面我们用了自定义的方式来实现wordpress数字分页,其实wordpress是已经有集成了Numbered Pagination相关的函数,我们直接调用就可以.具体实现方法如下代码调用 <? ...
- .dxf文件
DXF 是 AutoCAD 与其它软件之间进行 CAD 数据交换的开放矢量数据文件格式,可以分为两类:ASCII 格式和二进制格式:ASCII 具有可读性好的特点,但占用的空间较大:二进制格式则占用的 ...
- reids 数据库学习
最近项目中用到了redis数据库,学习整理下 redis操作学习手册--key操作命令 http://www.cnblogs.com/stephen-liu74/archive/2012/03/26/ ...
- C# 全角半角字符互转
/// <summary> /// 全角空格为12288,半角空格为32 /// 其他字符半角(33-126)与全角(65281-65374)的对应关系是:均相差65248 /// < ...
- LOJ3097 SNOI2019 通信 题解
题目链接 费用流,当建边需要依靠位置和权值两个偏序关系时,可以用cdq分治优化建边. 代码: #include<bits/stdc++.h> using namespace std; #d ...
- vlc for mac设置中文的方法
VLC for mac是一款mac系统下的多媒体播放器,支持播放MPEG-1.MPEG-2.MPEG-4.DivX.MP3和OGG,以及DVD.VCD.等各种流媒体协议在内的多种协议格式,并且能够对电 ...