我要评论通过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...'
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;
/**
* 根据本地图片全路径，响应给浏览器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视频格式且支持本地绝对路径访问的文章就介绍到这了,更多相关html5兼容hevc视频格式内容请搜索代码网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持代码网！
发表评论