一、生成切片文件
使用ffmpeg工具将视频转成m3u8的形式，与此同时会生成若干ts切片文件，具体实现方式可参考https://www.jianshu.com/p/e1395a896f36。
二、播放m3u8视频文件
在此可以使用阿里云播放器Prismplayer，用法可参考https://iao.su/2124/，该播放器直接会将视频路径以blob的形式展现，可以达到很好的保护视频的作用。
例如：将生成好的output.m3u8及ts文件放在m文件夹中，将m文件夹放在根路径下，则具体实现播放代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.7.1/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.7.1/aliplayer-h5-min.js"></script>
</head>
<body>
<h2>测试视频文件以blob的形式播放</h2>
<div class="prism-player" id="J_prismPlayer"></div>
<script>
var player = new Aliplayer({
id: 'J_prismPlayer',
width: '100%',
autoplay: false,
//支持播放地址播放,此播放优先级最高
source: 'http://127.0.0.1/xxx/m/output.m3u8',
})
</script>
</body>
</html>
用js加密视频路径的方式实现如下：
<video id="video" width="500" height="300" controls="controls"></video>
<script type="text/javascript">
//创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//配置请求方式、请求地址以及是否同步
xhr.open('POST', "/play", true);
//设置请求结果类型为blob
xhr.responseType = 'blob';
//请求成功回调函数
xhr.onload = function (e) {
if (this.status == 200) {
//获取blob对象
var blob = this.response;
console.log(blob);
//获取blob对象地址，并把值赋给容器
document.getElementById('video').src=URL.createObjectURL(blob);
}
};
xhr.send();
</script>
但如果视频文件很大，那么生成的blob文件会很大，加载很慢，因此需要切片之后播放。
更多精彩内容：各种AI课程、技能课程、黑科技软件、网站小程序源码、副业小项目、PPT模板等精品素材、电商课程、推广引流课程等，尽在 天边资源网 。