• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式:
    1:搜索微信号(888888
    2:扫描左侧二维码
  • 快捷导航
    福建二哥 门户 查看主题

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

    发布者: 福建二哥 | 发布时间: 2025-6-14 15:08| 查看数: 122| 评论数: 0|帖子模式

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

    在HTML文件中首先需要引用libe265.js来负责处理HEVC格式文件
    libde265.js/libde265.js at master · strukturag/libde265.js · GitHub
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8. </head>
    9. <body>
    10.     <canvas id="canvas"></canvas>
    11.     <script src="./libde265.js"></script>  
    12.     <script>  
    13.     var VIDEO_URL = 'http://localhost/file/video?fileName=E:\\test\\1_monitor01_1668690540000.mp4'  
    14.     var video = document.getElementById('canvas')  
    15.      // var fpsWrap = document.querySelector('.hevc-fps')
    16.       var status = document.querySelector('.hevc-status')
    17.       var playback = function (event) {
    18.         // event.preventDefault()
    19.         // if (player) {
    20.         //   player.stop()
    21.         // }
    22.         player = new libde265.RawPlayer(video)
    23.         player.set_status_callback(function (msg, fps) {
    24.           player.disable_filters(true)
    25.           console.log(msg);
    26.           switch (msg) {
    27.             case 'loading':
    28.               status.innerHTML = 'Loading movie...'
    29.               break
    30.             case 'initializing':
    31.               status.innerHTML = 'Initializing...'
    32.               break
    33.             case 'playing':
    34.               status.innerHTML = 'Playing...'
    35.               break
    36.             case 'stopped':
    37.               status.innerHTML = 'stopped'
    38.               break
    39.             case 'fps':
    40.               // fpsWrap.innerHTML = Number(fps).toFixed(2) + ' fps'
    41.               break
    42.             default:
    43.               status.innerHTML = msg
    44.           }
    45.         })
    46.         player.playback(VIDEO_URL)
    47.       }
    48.       playback()
    49.     </script>  
    50. </body>
    51. </html>
    复制代码
    而通过绝对路径来寻找本地视频文件则可通过后端(SpringBoot)编写接口进行操作
    以下是Controller层代码
    1. @RestController
    2. @RequestMapping("/file")
    3. @CrossOrigin(origins = "*")
    4. public class FileController {
    5.     @Resource
    6.     public IFileService fileService;
    7.     /**
    8.      * 根据本地图片全路径,响应给浏览器1个图片流
    9.      */
    10.     @GetMapping("/image/{fileName}")
    11.     public void showImage(HttpServletResponse response, @PathVariable("fileName") String fileName) {
    12.         fileService.show(response, fileName, "image");
    13.     }
    14.     /**
    15.      * 根据本地视频全路径,响应给浏览器1个视频
    16.      */
    17.     @GetMapping ("/video")
    18.     public void showVideo(HttpServletResponse response, String fileName) {
    19.         fileService.show(response, fileName, "video");
    20.     }
    21. }
    复制代码
    以下是Sevice层代码
    1. @Service
    2. public class FileServiceImpl implements IFileService {
    3.     /**
    4.      * 响应文件
    5.      *
    6.      * @param response
    7.      * @param fileName 文件全路径
    8.      * @param type     响应流类型
    9.      */
    10.     public void show(HttpServletResponse response, String fileName, String type) {
    11.         try {
    12.             FileInputStream fis = new FileInputStream(fileName); // 以byte流的方式打开文件
    13.             int i = fis.available(); //得到文件大小
    14.             byte data[] = new byte[i];
    15.             fis.read(data);  //读数据
    16.             response.setContentType(type + "/*"); //设置返回的文件类型
    17.             OutputStream toClient = response.getOutputStream(); //得到向客户端输出二进制数据的对象
    18.             toClient.write(data);  //输出数据
    19.             toClient.flush();
    20.             toClient.close();
    21.             fis.close();
    22.         } catch (ClientAbortException cae) {
    23.             cae.printStackTrace();
    24.             System.out.println("播放中断");
    25.         } catch (Exception e) {
    26.             e.printStackTrace();
    27.             System.out.println("文件不存在");
    28.         }
    29.     }
    30. }
    复制代码
    到此这篇关于HTML5兼容HEVC视频格式且支持本地绝对路径访问的文章就介绍到这了,更多相关HTML5兼容HEVC视频格式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

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

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?立即注册

    ×

    最新评论

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表