HTML5兼容HEVC视频格式且支持当地绝对路径访问的操作方法

2024-11-3 17:12| 发布者: 4d5a8576d| 查看: 115| 评论: 0

摘要: 通过PotPlayer发现该MP4文件的编码格式为HEVC，而video标签不支持该编码格式的视频文件在HTML文件中起首需要引用libe265.js来负责处理HEVC格式文件 libde265.js/libde265.js at master · strukturag/libde2

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

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

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

[code]<!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...' break case 'initializing': status.innerHTML = 'Initializing...' break case 'playing': status.innerHTML = 'Playing...' break case 'stopped': status.innerHTML = 'stopped' break case 'fps': // fpsWrap.innerHTML = Number(fps).toFixed(2) + ' fps' break default: status.innerHTML = msg } }) player.playback(VIDEO_URL) } playback() </script> </body> </html>[/code]

而通过绝对路径来探求当地视频文件则可通事后端（SpringBoot）编写接口举行操作

以下是Controller层代码

[code]@RestController @RequestMapping("/file") @CrossOrigin(origins = "*") public class FileController { @Resource public 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"); } }[/code]

以下是Sevice层代码

[code]@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("文件不存在"); } } }[/code]

到此这篇关于HTML5兼容HEVC视频格式且支持当地绝对路径访问的文章就介绍到这了,更多相关HTML5兼容HEVC视频格式内容请搜索脚本之家以前的文章或继承浏览下面的相关文章，盼望各人以后多多支持脚本之家！

来源：https://www.jb51.net/html5/936715.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：HTML5 服务器发送变乱(Server-Sent Events)利用详解下一篇：关于document.body.clientHeight返回值为0的完善办理方案

账号		自动登录	找回密码
密码			立即注册

HTML5兼容HEVC视频格式且支持当地绝对路径访问的操作方法

相关分类

站长推荐 /6