HTML5兼容HEVC視頻格式且支持本地絕對(duì)路徑訪問的操作方法
發(fā)布時(shí)間：2024-05-15 17:14:43 作者：AdamShyly 
我要評(píng)論
我要評(píng)論通過PotPlayer發(fā)現(xiàn)該MP4文件的編碼格式為HEVC，而video標(biāo)簽不支持該編碼格式的視頻文件，這篇文章主要介紹了HTML5兼容HEVC視頻格式且支持本地絕對(duì)路徑訪問,需要的朋友可以參考下
通過PotPlayer發(fā)現(xiàn)該MP4文件的編碼格式為HEVC，而video標(biāo)簽不支持該編碼格式的視頻文件
在HTML文件中首先需要引用libe265.js來負(fù)責(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>而通過絕對(duì)路徑來尋找本地視頻文件則可通過后端（SpringBoot）編寫接口進(jìn)行操作
以下是Controller層代碼
@RestController
@RequestMapping("/file")
@CrossOrigin(origins = "*")
public class FileController {
@Resource
public IFileService fileService;
/**
* 根據(jù)本地圖片全路徑，響應(yīng)給瀏覽器1個(gè)圖片流
*/
@GetMapping("/image/{fileName}")
public void showImage(HttpServletResponse response, @PathVariable("fileName") String fileName) {
fileService.show(response, fileName, "image");
}
/**
* 根據(jù)本地視頻全路徑，響應(yīng)給瀏覽器1個(gè)視頻
*/
@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(); //得到向客戶端輸出二進(jìn)制數(shù)據(jù)的對(duì)象
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視頻格式且支持本地絕對(duì)路徑訪問的文章就介紹到這了,更多相關(guān)HTML5兼容HEVC視頻格式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
html5自動(dòng)播放mov格式視頻的實(shí)例代碼
這篇文章主要介紹了html5自動(dòng)播放mov格式視頻的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-14