HTML5兼容HEVC视频格式且支持本地绝对路径访问

通过PotPlayer发现该MP4文件的编码格式为HEVC，而video标签不支持该编码格式的视频文件

在HTML文件中首先需要引用libe265.js来负责处理HEVC格式文件

libde265.js/libde265.js at master · strukturag/libde265.js · GitHub

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas id="canvas"></canvas><script src="./libde265.js"></script>  <script>  var VIDEO_URL = 'http://localhost/file/video?fileName=E:\\test\\1_monitor01_1668690540000.mp4'  var video = document.getElementById('canvas')  // var fpsWrap = document.querySelector('.hevc-fps')var status = document.querySelector('.hevc-status')var playback = function (event) {// event.preventDefault()// if (player) {//   player.stop()// }player = new libde265.RawPlayer(video)player.set_status_callback(function (msg, fps) {player.disable_filters(true)console.log(msg);switch (msg) {case 'loading':status.innerHTML = 'Loading movie...'breakcase 'initializing':status.innerHTML = 'Initializing...'breakcase 'playing':status.innerHTML = 'Playing...'breakcase 'stopped':status.innerHTML = 'stopped'breakcase 'fps':// fpsWrap.innerHTML = Number(fps).toFixed(2) + ' fps'breakdefault:status.innerHTML = msg}})player.playback(VIDEO_URL)}playback()</script>
</body>
</html>

而通过绝对路径来寻找本地视频文件则可通过后端（SpringBoot）编写接口进行操作

以下是Controller层代码

@RestController
@RequestMapping("/file")
@CrossOrigin(origins = "*")
public class FileController {@Resourcepublic IFileService fileService;/*** 根据本地图片全路径，响应给浏览器1个图片流*/@GetMapping("/image/{fileName}")public void showImage(HttpServletResponse response, @PathVariable("fileName") String fileName) {fileService.show(response, fileName, "image");}/*** 根据本地视频全路径，响应给浏览器1个视频*/@GetMapping ("/video")public void showVideo(HttpServletResponse response, String fileName) {fileService.show(response, fileName, "video");}}

以下是Sevice层代码

@Service
public class FileServiceImpl implements IFileService {/*** 响应文件** @param response* @param fileName 文件全路径* @param type     响应流类型*/public void show(HttpServletResponse response, String fileName, String type) {try {FileInputStream fis = new FileInputStream(fileName); // 以byte流的方式打开文件int i = fis.available(); //得到文件大小byte data[] = new byte[i];fis.read(data);  //读数据response.setContentType(type + "/*"); //设置返回的文件类型OutputStream toClient = response.getOutputStream(); //得到向客户端输出二进制数据的对象toClient.write(data);  //输出数据toClient.flush();toClient.close();fis.close();} catch (ClientAbortException cae) {cae.printStackTrace();System.out.println("播放中断");} catch (Exception e) {e.printStackTrace();System.out.println("文件不存在");}}}

HTML5兼容HEVC视频格式且支持本地绝对路径访问相关推荐

浏览器对视频格式的支持
浏览器及平台支持的视频格式 Chrome MP4, WebM Firefox MP4, WebM Internet Explorer MP4 Android MP4 iOS MP4 Safari M ...
iphone保存html视频格式,iPhone6支持什么视频格式？iPhone6支持RMVB播放吗？
iPhone6支持什么视频格式 iPhone6支持MP4,AVI,NAVI,DV-AVI,DIVX,MOV,ASF,WMV,RM,RMVB等视频格式. 关于iPhone6支持什么视频格式的疑问,下面将 ...
html5中加入视频格式,HTML5音视频格式video和audio
html5音频和视频使用详解. 一.html5视频以前,大多数视频是通过插件(比如 Flash)来显示的,然而,并非所有浏览器都拥有同样的插件现在,HTML5 规定了一种通过 video 元素来包 ...
红米note3支持html,红米Note3支持什么视频格式？支持RMVB播放吗？
红米Note3支持什么视频格式红米Note3支持MP4.M4V.MKV.XVID.ASF视频格式. 红米Note3的指纹识别对手的湿度也有要求,需要保持手指干燥,潮湿的话就可能导致无法识别.红米No ...
HTML5中如何检查浏览器是否支持本地存储
如果你的浏览器支持该特性的话,那么全局对象:window上会有一个localStorage的属性,反之,你的浏览器不支持的话,那么该属性值为undefined JavaScript function ...
html5查看swf视频格式,如何使用Videojs播放.swf格式文件？
Video.js videojs.options.flash.swf = './video-js.swf'; // flash路径 https://imgcache.qq.com/tence...0& ...
antd_Ant Design Pro_Vue打包问题:使用静态本地文件路径访问
1:vue.config.js 配置文件 vueConfig 中或者是 module.exports 中添加 publicPath: './' 2:src->router->index ...
Qt多路视频监控软件(Qt+VLC支持本地视频/RTSP流/RTMP流)
Qt多路视频监控软件(Qt+VLC支持本地视频/RTSP流/RTMP流) 功能: 支持同时播放多路视频源: 支持播放本地视频,包括MP4.mkv.flv等视频格式: 支持播放RTSP/RTMP视频流: ...
步步高DVD机DV603的U盘模式支持视频格式
亲测支持视频格式:支持avi,mpg,vob文件转载于:https://www.cnblogs.com/phyking/p/4456602.html

HTML5兼容HEVC视频格式且支持本地绝对路径访问

HTML5兼容HEVC视频格式且支持本地绝对路径访问相关推荐

最新文章

热门文章