html5 video标签播放视频流
<p>从文件服务器读取音视频文件，以流的方式传给前台，并能够播放视频。</p><p>做了一个demo，用html5的video，audio标签实现。</p>
<p>后台实现代码：</p>
<div class="cnblogs_code">
<pre>@GetMapping(value = <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">/getVideos</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">)
</span><span style="color: rgba(0, 0, 255, 1)">public</span><span style="color: rgba(0, 0, 0, 1)"> String getVideos(HttpServletRequest request, HttpServletResponse response)
{
</span><span style="color: rgba(0, 0, 255, 1)">try</span><span style="color: rgba(0, 0, 0, 1)"> {
FileInputStream fis </span>= <span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">;
OutputStream os </span>= <span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)"> ;
fis </span>= <span style="color: rgba(0, 0, 255, 1)">new</span> FileInputStream(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">C:\\Users\\zhangxin\\Desktop\\douyin.mp4</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">int</span> size = fis.available(); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 得到文件大小</span>
<span style="color: rgba(0, 0, 255, 1)">byte</span> data[] = <span style="color: rgba(0, 0, 255, 1)">new</span> <span style="color: rgba(0, 0, 255, 1)">byte</span><span style="color: rgba(0, 0, 0, 1)">;
fis.read(data); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 读数据</span>
<span style="color: rgba(0, 0, 0, 1)"> fis.close();
fis </span>= <span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">;
response.setContentType(</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">video/mp4</span><span style="color: rgba(128, 0, 0, 1)">"</span>); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 设置返回的文件类型</span>
os =<span style="color: rgba(0, 0, 0, 1)"> response.getOutputStream();
os.write(data);
os.flush();
os.close();
os </span>= <span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">;
} </span><span style="color: rgba(0, 0, 255, 1)">catch</span><span style="color: rgba(0, 0, 0, 1)"> (FileNotFoundException e) {
e.printStackTrace();
} </span><span style="color: rgba(0, 0, 255, 1)">catch</span><span style="color: rgba(0, 0, 0, 1)"> (IOException e) {
e.printStackTrace();
}
</span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">;
}</span></pre>
</div>
<p>前端实现代码：</p>
<div class="cnblogs_code">
<pre><video width=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">1120</span><span style="color: rgba(128, 0, 0, 1)">"</span> height=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">540</span><span style="color: rgba(128, 0, 0, 1)">"</span> controls=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">controls</span><span style="color: rgba(128, 0, 0, 1)">"</span> id=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">video</span><span style="color: rgba(128, 0, 0, 1)">"</span> preload=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">auto</span><span style="color: rgba(128, 0, 0, 1)">"</span> >
<source src=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">getVideos</span><span style="color: rgba(128, 0, 0, 1)">"</span> type=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">video/mp4</span><span style="color: rgba(128, 0, 0, 1)">"</span>>
</video></pre>
</div>
<p> </p>
</div>
<div id="MySignature" role="contentinfo">
看云吧 kanyun8.com<br><br>
来源：https://www.cnblogs.com/vaevvaev/p/11390128.html
頁:
[1]