前提: 最近有个需求需要 h5界面 播放一个1G的视频,害怕卡顿
解决方式: 用视频切片的方式解决
操作验证
- 我们先来一个m3u8 格式的视频文件
- 随便找一个视频文件,按照这个操作 我们就成功得到了 m3u8格式的视频
@echo
rem 开始转码...
rem 正在转码...
ffmpeg -i video.mp4 -c:v libx264 -c:a aac -strict -2 -f hls -hls_list_size 0 -hls_time 5 output/playlist.m3u8
pause
关键脚本代码写这里
- 书写h5代码
<!DOCTYPE html>
<html>
<head>
<title>dplayer播放m3u8</title>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="https://cdn.staticfile.org/hls.js/1.1.2/hls.min.js"></script>
<script src="https://cdn.staticfile.org/dplayer/1.26.0/DPlayer.min.js"></script>
<style>
#dplayer {
width: 800px
}
</style>
<script>
function init() {
const dp = new DPlayer({
element: document.getElementById('dplayer'),
video: {
// pic: videoInfo.img, // 封面
url: "/output/playlist.m3u8", //此处可以是远程的url,也可以是本地的文件
type: 'customHls',
customType: {
customHls: function (video, player) {
const hls = new Hls()
hls.loadSource(video.src)
hls.attachMedia(video)
}
}
}
})
}
</script>
</head>
<body onload="init()">
<div>
<div id="dplayer"></div>
</div>
</body>
</html>
但是有一点需要注意,直接用浏览器打开这个文件是不行的
需要将其放在服务器上
如果有python3的环境
可以
python -m http.server
如果有nginx,可以用nginx代理一下
如果是IDE,可以让其运行在server上
ok,搞定!