比较好的做网站的公司,书店网站网站建设规划书,wordpress分类样式,广州网站运营专注乐云seo学习链接
vuespringboot文件分片上传与边放边播实现
同步加载、播放视频的实现 ---- range blob mediaSource
通过调试技术#xff0c;我理清了 b 站视频播放很快的原理
MSE (Media Source Extensions) 上手指南
浅聊音视频的媒体扩展#xff08;Media Source Extension…学习链接
vuespringboot文件分片上传与边放边播实现
同步加载、播放视频的实现 ---- range blob mediaSource
通过调试技术我理清了 b 站视频播放很快的原理
MSE (Media Source Extensions) 上手指南
浅聊音视频的媒体扩展Media Source Extension
流媒体视频基础 MSE 入门 FFmpeg 制作视频预览缩略图和 fmp4
今天又学到一种播放视频的方法先把视频分块的都获取到然后再使用URL.createObject(chunks)创建blobUrl再把这个blobUrl给到video标签即可 播放视频可以拖动视频进度条。但是这种缺点也很明显得把所有视频文件分块获取完成后才能播放视频。体验上就不是很好。后面有时间可以看下MediaSource相关能否实现边下载边播放而不是非得等到全部下载完了再播放? VideoPlay.vue
templatediv classrelease_wrapel-card classrelease_cardel-table stripe :datatableData stylewidth: 100% height600pxel-table-column propvideoName label视频名称 min-width280/el-table-columnel-table-column label操作template slot-scopescopeel-button sizemini typeprimary clickplayVideo(scope.$index, scope.row)播放/el-button/template/el-table-column/el-table/el-cardel-dialog :modalfalse title视频播放 :visible.syncdialogVisible width40%video :srcvideoUrl controlscontrols width100% canplaygetVidDur() idmyvideo/video/el-dialog/div
/templatescriptvar 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);});},},
};
/scriptstyle/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 Contentresponse.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());}}
