视频播放实现示例Demo

学习链接

vue+springboot文件分片上传与边放边播实现

同步加载、播放视频的实现 ---- range blob mediaSource

通过调试技术，我理清了 b 站视频播放很快的原理

MSE (Media Source Extensions) 上手指南

浅聊音视频的媒体扩展（Media Source Extension）

流媒体视频基础 MSE 入门 & FFmpeg 制作视频预览缩略图和 fmp4

今天又学到一种播放视频的方法，先把视频分块的都获取到，然后再使用URL.createObject(chunks)创建blobUrl，再把这个blobUrl给到video标签即可 播放视频（可以拖动视频进度条）。但是这种缺点也很明显，得把所有视频文件分块获取完成后，才能播放视频。体验上就不是很好。后面有时间可以看下MediaSource相关（能否实现边下载边播放，而不是非得等到全部下载完了再播放?）

VideoPlay.vue

<template><div class="release_wrap"><el-card class="release_card"><el-table stripe :data="tableData" style="width: 100%" height="600px"><el-table-column prop="videoName" label="视频名称" min-width="280"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" type="primary" @click="playVideo(scope.$index, scope.row)">播放</el-button></template></el-table-column></el-table></el-card><el-dialog :modal="false" title="视频播放" :visible.sync="dialogVisible" width="40%"><video :src="videoUrl" controls="controls" width="100%" @canplay="getVidDur()" id="myvideo"></video></el-dialog></div>
</template><script>var video = () => {var videoTime = document.getElementById("myvideo");console.log(videoTime.duration); //获取视频时长console.log(videoTime.currentTime); //获取视频当前播放时间
};export default {data() {return {title: "",videolist: "",//表格数据tableData: [],//弹框组件隐藏dialogVisible: false,//用于保存视频的idvideoId: 0,//保存视频的名称videoName: '',videoUrl: '',};},created() {this.getVideoInfo();},methods: {jump_home() {this.$router.replace('/')},getVidDur() {video();},//获取video表格数据getVideoInfo() {this.$axios.get("http://127.0.0.1:9098/SelectVideo/table").then((res) => {this.tableData = res.data;});},// 点击播放按钮playVideo(i, val) {// 显示弹框this.dialogVisible = true;// 保存视频名字this.videoName = val.videoName;// 保存视频idthis.videoId = val.id;// 发送HEAD请求获取视频的总大小this.$axios.get(`http://127.0.0.1:9098/SelectVideo/getVideoSizeById/${this.videoId}`).then(res => {const totalSize = res.data;const chunkSize = Math.ceil(totalSize / 20); // 设置分片大小为总大小的1/5// 定义分片传输的函数const loadVideoChunk = (startByte, endByte) => {return new Promise((resolve, reject) => {this.$axios.get(`http://127.0.0.1:9098/SelectVideo/policemen/${this.videoId}`, {headers: {Range: `bytes=${startByte}-${endByte}`},responseType: 'blob'}).then(response => {// 返回获取到的视频分片数据resolve(response.data);}).catch(error => {reject(error);});});};// 创建一个数组来保存所有分片的Promiseconst chunkPromises = [];// 获取所有分片的Promisefor (let i = 0; i < 20; i++) {const startByte = i * chunkSize;const endByte = Math.min(startByte + chunkSize - 1, totalSize - 1);chunkPromises.push(loadVideoChunk(startByte, endByte));}// 执行所有分片请求，并在全部请求完成后开始播放视频Promise.all(chunkPromises).then(chunks => {// 将分片数据合并成完整的视频Blobconst videoBlob = new Blob(chunks);const videoUrl = URL.createObjectURL(videoBlob);this.videoUrl = videoUrl;}).catch(error => {console.error('Failed to load video:', error);});}).catch(error => {console.error('Failed to get video size:', error);});},},
};
</script><style></style>

SelectVideoController

    //查询视频流的接口@GetMapping("/policemen/{videoId}")public void videoPreview(HttpServletRequest request, HttpServletResponse response, @PathVariable("videoId") String videoId) throws Exception{System.out.println(videoId);VideoUpload videoPathList = videoUploadMapper.SelectVideoId(Integer.parseInt(videoId));String videoPathUrl = videoPathList.getVideoUrl();Path filePath = Paths.get(videoPathUrl);if (Files.exists(filePath)){String mimeType = Files.probeContentType(filePath);if (StringUtils.hasText(mimeType)){response.setContentType(mimeType);}// 设置支持部分请求（范围请求）的 'Accept-Ranges' 响应头response.setHeader("Accept-Ranges", "bytes");// 从请求头中获取请求的视频片段的范围（如果提供）long startByte = 0;long endByte = Files.size(filePath) - 1;String rangeHeader = request.getHeader("Range");// System.out.println("rangeHeader:" + rangeHeader);if (rangeHeader != null && rangeHeader.startsWith("bytes=")){String[] range = rangeHeader.substring(6).split("-");startByte = Long.parseLong(range[0]);if (range.length == 2){endByte = Long.parseLong(range[1]);}}// System.out.println("start:" + startByte + ",end:" + endByte);log.info("start:" + startByte + ",end:" + endByte);// 设置 'Content-Length' 响应头，指示正在发送的视频片段的大小long contentLength = endByte - startByte + 1;response.setHeader("Content-Length", String.valueOf(contentLength));// 设置 'Content-Range' 响应头，指示正在发送的视频片段的范围response.setHeader("Content-Range", "bytes " + startByte + "-" + endByte + "/" + Files.size(filePath));// 设置响应状态为 '206 Partial Content'response.setStatus(HttpServletResponse.SC_PARTIAL_CONTENT);// 使用 'RangeFileChannel' 进行视频片段的传输，以高效地只读取文件的请求部分ServletOutputStream outputStream = response.getOutputStream();try (RandomAccessFile file = new RandomAccessFile(filePath.toFile(), "r"); FileChannel fileChannel = file.getChannel()){fileChannel.transferTo(startByte, contentLength, Channels.newChannel(outputStream));} finally{outputStream.close();}} else{response.setStatus(HttpServletResponse.SC_NOT_FOUND);response.setCharacterEncoding(StandardCharsets.UTF_8.toString());}}