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="1120" height="540" controls="controls" id="video" preload="auto"     >
    <source src="getVideos"   type="video/mp4">
</video>

src写getVideos可以直接跳转到后台找到这个方法。

最后实现效果:

  • 13
    点赞
  • 58
    收藏
    觉得还不错? 一键收藏
  • 17
    评论
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值