欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5兼容HEVC視頻格式且支持本地絕對路徑訪問的操作方法

  發(fā)布時間：2024-05-15 17:14:43   作者：AdamShyly   我要評論
通過PotPlayer發(fā)現(xiàn)該MP4文件的編碼格式為HEVC，而video標簽不支持該編碼格式的視頻文件，這篇文章主要介紹了HTML5兼容HEVC視頻格式且支持本地絕對路徑訪問,需要的朋友可以參考下

通過PotPlayer發(fā)現(xiàn)該MP4文件的編碼格式為HEVC，而video標簽不支持該編碼格式的視頻文件

在HTML文件中首先需要引用libe265.js來負責(zé)處理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...'
              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>

而通過絕對路徑來尋找本地視頻文件則可通過后端（SpringBoot）編寫接口進行操作

以下是Controller層代碼

@RestController
@RequestMapping("/file")
@CrossOrigin(origins = "*")
public class FileController {
    @Resource
    public IFileService fileService;
    /**
     * 根據(jù)本地圖片全路徑，響應(yīng)給瀏覽器1個圖片流
     */
    @GetMapping("/image/{fileName}")
    public void showImage(HttpServletResponse response, @PathVariable("fileName") String fileName) {
        fileService.show(response, fileName, "image");
    }
    /**
     * 根據(jù)本地視頻全路徑，響應(yīng)給瀏覽器1個視頻
     */
    @GetMapping ("/video")
    public void showVideo(HttpServletResponse response, String fileName) {
        fileService.show(response, fileName, "video");
    }
}

以下是Sevice層代碼 

@Service
public class FileServiceImpl implements IFileService {
    /**
     * 響應(yīng)文件
     *
     * @param response
     * @param fileName 文件全路徑
     * @param type     響應(yīng)流類型
     */
    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);  //讀數(shù)據(jù)
            response.setContentType(type + "/*"); //設(shè)置返回的文件類型
            OutputStream toClient = response.getOutputStream(); //得到向客戶端輸出二進制數(shù)據(jù)的對象
            toClient.write(data);  //輸出數(shù)據(jù)
            toClient.flush();
            toClient.close();
            fis.close();
        } catch (ClientAbortException cae) {
            cae.printStackTrace();
            System.out.println("播放中斷");
        } catch (Exception e) {
            e.printStackTrace();
            System.out.println("文件不存在");
        }
    }
}

到此這篇關(guān)于HTML5兼容HEVC視頻格式且支持本地絕對路徑訪問的文章就介紹到這了,更多相關(guān)HTML5兼容HEVC視頻格式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論