html5 video标签播放视频流解决方案

article/2025/8/22 5:16:22

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

做了一个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可以直接跳转到后台找到这个方法。

最后实现效果:


http://chatgpt.dhexx.cn/article/DdITjFd1.shtml

相关文章

video 标签

一&#xff0c;video介绍 1&#xff0c;在H5之前要想在网页中播放视屏&#xff0c;需要相关的插件&#xff0c;例如flash。H5集成了视频组件video&#xff0c;可以轻松的在网页上添加视频。 2.在 <video></video> 标签中间的内容&#xff0c;是针对浏览器不支持此…

video标签样式属性设置

<!--初始标签--><video controls"controls"><source src"~/Content/Images/74d6af65-41f5-4be4-ba3d-e63b90107100.mp4" type"video/mp4" /></video>效果图 css隐藏一些视频操作 /*播放按钮*/video::-webkit-media-con…

h5 video标签

h5 video标签&#xff1a; Video 对象属性 属性描述audioTracks返回表示可用音频轨道的 AudioTrackList 对象。autoplay *设置或返回是否在就绪&#xff08;加载完成&#xff09;后随即播放视频。buffered返回表示视频已缓冲部分的 TimeRanges 对象。controller 返回表示视…

video标签和source标签

介绍 < video >元素用于在HTML或者XHTML文档中嵌入媒体播放器&#xff0c;用于支持文档内的视频播放。 < source >元素为< picture >,< audio >或者< video >元素指定多个媒体资源 video标签常见属性 autoplay 如果出现该属性&#xff0c;则…

html video标签播放直播视频,HTML5 Video 标签播放及控制视频

Video 是 HTML5 中新增的标签,使用 Video 标签可以播放 ogg、mp4、webm 等格式的视频,Video 标签的引入,减少前端页面对 Flash 动画的依赖。 0x0 预备知识 不同的浏览器支持的视频格式可能不同,以下是摘自 W3School 各个浏览器对三种视频格式的支持情况: 浏览器对视频格式…

html5 video css样式修改,htmlvideo标签用法

HTML5中 使用video标签 播放本地视频 JS&#xff1a; 在test.html页面&#xff0c;使用button标签创建四个按钮&#xff0c;分别是播放/暂停、大、中、小&#xff0c;用于控制视频的播放效果。同时&#xff0c;使用video标签创建一个视频。 网页设计中html5的video 标签如何写…

css video 样式,使用CSS修改 video 标签默认样式

使用CSS修改 video 标签默认样式 时间:2019-11-08 17:42:14 来源: 作者: 效果展示: 1、模拟直播,去除进度条、当前观看时间,剩余时间。 效果: 2、去除 video 标签全部控件 效果: Tags:CSS 点击:() 评论:() 声明:本站部分内容及图片来自互联网,转载是出于传递更多信…

video标签的使用

记录工作中的问题 需求&#xff1a;播放前自定义图片&#xff0c;添加遮罩&#xff0c;添加暂停按钮&#xff0c; 且不显示功能区。点击播放开始显示功能区。左右切换视频需要乱序重排&#xff0c;隐藏掉转发, 点击回到顶部等 左右切换&#xff1a; 播放前&#xff1a; 开始播…

有刷电机,无刷电机和电调的总结

有刷直流电机工作原理 &#xff1a; 有刷直流电机的主要结构就是定子转子电刷&#xff0c;通过旋转磁场获得转动力矩&#xff0c;从而输出动能。电刷与换向器不断接触摩擦&#xff0c;在转动中起到导电和换相作用。 有刷直流电机采用机械换向&#xff0c;磁极不动&#xff0c;…

BLDC无刷直流电机驱动电路-硬石电子

1.BLDC无刷直流电机驱动电路&#xff0c;因为BLDC是三相完全一样的驱动电路&#xff0c;下图为其中一相电路图&#xff0c;其他两相完全一样。 主要元器件&#xff1a; 高速光耦&#xff1a;TLP715 MOS管驱动IC&#xff1a;IR2110S MOS&#xff1a;IRF540NS D7和C13为自举电路…

涨知识:直流无刷电机的控制方式

目前直流无刷电机的控制主要分两大类&#xff1a;方波控制&#xff08;梯形波控制&#xff09;与正弦波控制&#xff0c;本文PEKEW派酷就具体解说一下这两种控制方式&#xff1a; 1&#xff09;方波控制 通过霍尔传感器获得电机转子的位置&#xff0c;然后根据转子的位置在36…

【零基础玩转BLDC系列】基于反电动势过零检测法的无刷直流电机控制原理

无刷直流电动机基本转动原理请参考《基于HALL传感器的无刷直流电机控制原理》&#xff0c;基本原理及基础知识本篇不再赘述。 目录 反电势过零检测法的原理 反电势过零检测实现方法 位置传感器的存在限制了无刷直流电机在某些特定场合中的应用&#xff0c;如&#xff1a;使电…

无刷电机与驱动

直流无刷电机 【自制FOC驱动器】深入浅出讲解FOC算法与SVPWM技术 | 稚晖的个人站 写得很清晰 机器人硬件三大核心部件&#xff08;电机、减速器、驱动器&#xff09; 照这样看来&#xff0c;直流电机驱动和无刷电机驱动完全不是一个维度的。 直流电机驱动都不用去管电机换…

无刷直流电机的PWM调制方式介绍

无刷直流电机的PWM调制方式介绍 (2014-01-03 15:35:28) 转载▼ 标签&#xff1a; 无刷直流电机 pwm调制方式 bldc驱动方案 原文&#xff1a;http://blog.sina.com.cn/s/blog_ae3ebe120101cutd.html 三相无刷直流电机的调制方式&#xff1a;方波120度脉宽调制(120D…

【零基础玩转BLDC系列】基于霍尔传感器的无刷直流电机控制原理

无刷直流电机&#xff08;Brushless Direct Current Motor, 简称BLDC&#xff09;采用电子开关电路来代替直流电机的机械换向器或电刷进行换向&#xff0c;提高了控制系统的可靠&#xff0c;性能上相较一般的传统直流电机有很大优势。无刷直流电机是永磁同步电机的一种&#xf…

无刷直流电动机矢量控制(二)——无刷直流电机的工作原理及其内部结构

相信很多同学刚开始学习无刷直流机的时候&#xff0c;都比较困惑其具体的工作原理&#xff0c;在这里一起梳理一下。&#xff08;本文图片来源于飞思卡尔公司技术文档PZ104&#xff09; 1 BLDC工作原理 首先我们看上面这张图&#xff0c;当两头线圈通电的时候&#xff0c;根据…

无刷电机控制

电机控制 常见的几种电机&#xff1a;直流有刷电机&#xff0c;直流无刷电机&#xff0c;步进电机&#xff0c;伺服电机&#xff0c;舵机。 有刷电机的主要结构是定子&#xff0c;转子&#xff0c;点数&#xff0c;通过旋转磁场获得力矩&#xff0c;获得动能&#xff0c;电刷…

BLDC无刷直流电机

视频1摘要&#xff1a; BLDCs的内部工作原理&#xff1b;如何使用Simscape Electrical在Simulink中模拟BLDC™ 并研究其反电势电压的形状&#xff1b;如何使用六步换向&#xff08;梯形控制&#xff09;控制无刷直流电动机&#xff1b;无刷直流电动机和永磁同步电动机通常分别…

无刷电机入门

FOC汇总&#xff1a; Arduino SimpleFOC - 中文官网 、SimpleFOC教程链接汇总、稚晖君。 一、有刷电机&#xff1a; 有刷电机是大家最早接触的一类电机&#xff0c;例如很多电动小玩具&#xff0c;或者很多家用的吹风机里面的电机都是有刷电机。 动图中可以看到&#xff0c;电…

直流无刷电机工作原理

首先给大家复习几个基础定则&#xff1a;左手定则、右手定则、右手螺旋定则。别懵逼&#xff0c;我下面会给大家解释。 左手定则&#xff0c;这个是电机转动受力分析的基础&#xff0c;简单说就是磁场中的载流导体&#xff0c;会受到力的作用。 让磁感线穿过手掌正面&#xff0…