- 需要在B/S架构播放2G的1小时时长视频,考虑性能要做视频分片
一、大视频存储
可以把视频进行切片处理,使用的工具软件ffmpeg
把视频ts切片生成.m3u8
格式的。
先去官网下载软件:https://ffmpeg.org/download.html
执行命令:ffmpeg -i ./稻香.mp4 -c:v h264 -flags +cgop -g 30 -hls_time 5 -hls_list_size 0 -hls_segment_filename index%3d.ts index.m3u8
例如时长1小时的一个文件,使用此工具按照每5秒分割一个一个的小视频,生成的每个小视频后缀都是.ts
格式:
同时也会生成一个.m3u8
格式的文件,这个文件就是上图这些小视频的"索引"了,记录着每一帧在哪个uri
下:
这样就可以一小个视频来进行存储了。
二、大视频播放
本人使用vue3框架播放视频
使用<video>
标签指定播放地址为m3u8那个文件就可以了,有专门的视频播放js类库,会自己解析。
我使用的是import videojs from 'video.js';
。具体代码如下:
<template>
<div>
<video id="singleVideo" class="video-js vjs-default-skin vjs-big-play-centered" ></video>
</div>
</template>
<script>
import 'video.js/dist/video-js.css'
import videojs from 'video.js';
import 'videojs-contrib-hls'
export default {
name: "PlayVideo",
data () {
return {
videoSrc: ''
}
},
methods: {
play() {
//使用
let singlePlayer = videojs("singleVideo", {
autoplay: false,//自动播放
controls: true,//控件显示
poster: '/tmp/xiao.png', // 封面
width: "300",//视频框宽度
height: "200",//视频框高度
preload: 'auto', // 自动加载资源
});
let res ="/tmp/v/play.m3u8";
if (res) {
singlePlayer.src({ src: res, type: "application/x-mpegURL" });
// singlePlayer.play();
}
},
},
created() {
//延迟1秒后执行,否则报错undefined
setTimeout(()=>{
this.play()
},1000)
}
}
</script>
<style scoped>
</style>