解决在tinymce编辑器插入视频到正文后不能跳转播放的问题

最新推荐文章于 2024-09-28 16:58:39 发布

topless

最新推荐文章于 2024-09-28 16:58:39 发布

阅读量1k

点赞数 20

文章标签：编辑器实时音视频运维开源软件

本文链接：https://blog.csdn.net/m0_54682372/article/details/135043619

版权

问题：在其他软件中上传了视频文件，而后将此视频文件插入到正文中，此视频文件可以点击进度条跳转进度；而在知了（出现bug的这个软件）中上传了视频文件，而后将此视频文件插入到正文中。此视频文件无法点击进度条跳转进度。

需求：希望可以在知了中上传视频文件，将文件作为视频插入到正文中，且可以点击进度条进行跳转播放。

解决方法：

首先是上传到其他软件的文件能正常播放就代表不是tinymce编辑器和video控件的问题
在知了中将附件视频添加到正文需要提供下载链接，因此需要排查下载文件方法的问题
附件的文件点击下载到本地却可以点击进度条跳转进度，就说明下载方法中响应头没有支持浏览器断点续传
所以需要给请求头加个response.setHeader("Accept-Ranges", "bytes")来支持浏览器断点续传

完整的下载文件的代码：

    public void downloadFile(String filename, String id, Boolean isImage, HttpServletResponse response) {
        log.info(this.getClass().getName() + "----in----" + "下载文件（downloadFile）" + "----");
        String savePath = getSavePath();
        String orginFilePath = savePath + "/" + id;
        File file = new File(orginFilePath);
    
        if (file.exists()) {
            InputStream inputStream = null;
            BufferedOutputStream outputStream = null;
            try {
                inputStream = new FileInputStream(file);
                byte[] buffer = new byte[1024];
                int byteread;
                try {
                    response.reset();
                    if (isImage) {
                        // 图片直接输出到浏览器
                        String formatType = id.substring(id.lastIndexOf(".") + 1, id.length());
                        response.setContentType("image/" + formatType);
                    } else {

                        response.reset();

                        response.setHeader("Accept-Ranges", "bytes");
                        // 附件执行下载任务
                        response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(filename, "UTF-8"));
//                        response.addHeader("Content-Disposition", "inline;filename=" + URLEncoder.encode(filename, "UTF-8"));
//                        response.setContentType("application/octet-stream");
                        response.setContentType("video/mp4");

                        // 设置视频文件长度
                        response.setContentLength((int) file.length());
                    }
//                    URL url = new URL("http://filem.free4inno.com/project/downloadFile?id=879");
//                    URLConnection conn = url.openConnection();
//                    inputStream= conn.getInputStream();

                    outputStream = new BufferedOutputStream(response.getOutputStream());
                    while ((byteread = inputStream.read(buffer)) != -1) {
                        outputStream.write(buffer, 0, byteread);
                    }
                    inputStream.close();
                    outputStream.flush();
                    outputStream.close();
                    log.info(this.getClass().getName() + "----out----" + "文件下载完毕" + "----");
                } catch (IOException e) {
                    e.printStackTrace();
                }
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            } finally {
                try {
                    if (inputStream != null) {
                        inputStream.close();
                    }
                } catch (IOException e1) {
                    e1.printStackTrace();
                }
                try {
                    if (outputStream != null) {
                        outputStream.flush(); // 刷新一下
                        outputStream.close();
                    }
                } catch (IOException e1) {
                    e1.printStackTrace();
                }
            }
        } else {
            response.reset();
            try {
                response.sendError(404,"文件不存在");
                log.info(this.getClass().getName() + "----out----" + "文件不存在" + "----");
            } catch (UnsupportedEncodingException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }