视频的页面展示(前端vue+后端springboot)

前端Vue与后端SpringBoot实现视频页面交互

最新推荐文章于 2024-05-28 10:10:17 发布

原创最新推荐文章于 2024-05-28 10:10:17 发布 · 648 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java

笔记专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用Vue.js前端框架与SpringBoot后端框架结合，实现视频页面的展示和交互功能。通过讲解关键技术和步骤，帮助读者理解前后端协作在视频项目中的应用。

 <div v-for="item in videoData" :key="item.kshv_id" 
 :id="item.kshv_id" v-loading="loading"> //循环遍历后端过来的数据为videoData

data声明为videoData:[],

获取请求后赋值
this.videoData = res.data.info.list;
this.videoSRC(res.data.info.list);
videoSRC(list){
   for(var i=0;i<list.length;i++){
       this.videoAjax(list[i]);
   }  
 },
videoAjax(item){
    
            axios.post(xxx'/xxx', 
                {
                    传参
                },{
                responseType: 'blob'
                },{
                // 单独配置
                withCredentials: true
                }).then((res)=>{
                    var html = "<video autoplay='true' height='100%' width='100%' controls='controls' loop='true' src='"+window.URL.createObjectURL(new Blob([res.data]))+"' ></video> ";
                    document.getElementById(item.kshv_id).innerHTML = html;
                    this.loading = false;
                }).catch(function (response) {
                     console.log(response);
                });
        },
后端
import org.apache.commons.io.FileUtils;
@PostMapping("/xxx")
    public ResponseEntity<byte[]> previewVideoONE(@RequestBody Map<String,Object> map, HttpServletResponse response) throws Exception {
        
        String token = (String) mapa.get("token");
        //System.out.println("=====================url================"+mapa.get("url").toString());
        try {
            ResponseEntity<byte[]> responseEntity = null;
            Map<String,Object> mp = new HashMap<>();
            String path = mapa.get("url").toString();
//            System.out.println("============last============"+path.substring(path.lastIndexOf("//") + 1));
            HttpHeaders headers = new HttpHeaders();
            headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
            headers.setContentDispositionFormData("attachment", path);
//          headers.setContentDispositionFormData("attachment", path.substring(path.lastIndexOf("//") + 1));
            responseEntity = new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(new File(path)), headers, HttpStatus.CREATED);
            return responseEntity;
        } catch (IOException e) {
            e.printStackTrace();
            return null;
        }
    }


url字段处理
map.get("video_url").toString().replace("\\","//")+"'