可以使用 FFmpeg 将普通的 mp4 格式的视频文件转换为 m3u8 格式
视频转码工具 FFmpeg 下载
链接: https://pan.baidu.com/s/1hQODUsv81BhO9Je9P2KB9A
提取码: 62pa
打开ff-prompt.bat
在命令行执行转换
mp4转ts
ffmpeg -y -i 视频文件的根路径 -vcodec copy -acodec copy -vbsf h264_mp4toannexb 保存的文件根路径
mp4转m3u8
一次性完成转换和切片，切片时长为60秒
ffmpeg -i 视频文件的根路径 -c:v libx264 -hls_time 60 -hls_list_size 0 -c:a aac -strict -2 -f hls 保存的文件根路径
生成的文件需要放在同一目录才可正常访问
前端video标签播放m3u8格式视频
1.借助EasyPlayer
<!DOCTYPE HTML>
<html>
<head>
<title>
EasyPlayer
</title>
<!-- <link rel="icon" href="./favicon.ico"> -->
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<style>
body {
margin: 0;
padding: 0;
overflow-x: auto;
overflow-y: hidden;
}
.playerList {
padding: 6px;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-gap: 6px 6px;
align-items: center;
height: 100vh;
}
</style>
<body>
<div id="app">
<div class="playerList">
<easy-player
live
debug
:video-url="videoSrc"
style="width: 100%;height: 100%"
@error="restartPlayer"
/>
</div>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data() {
return {
videoSrc: '',
}
},
created() {
},
mounted() {
this.$nextTick(() => {
window.onresize = () => {
this.videoStyle.height = "500px"
}
})
},
methods: {
restartPlayer(e) {
const index = e.currentTarget.dataset.index
const playerStr = 'easyPlayer' + index
let [player] = this.$refs[playerStr]
console.dir(player)
player = player.getVueInstance()
player.initPlayer() // 重新初始化播放器
}
}
})
</script>
<script type="text/javascript" src="/static/video/EasyPlayer-element.min.js"></script>
</body>
</html>
提示：如果在html的m3u8可以使用，引入项目就凉凉，那么可以使用 iframe 引入子页面可实现，摸坑太久了。。。
评论/回复