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

这篇具有很好参考价值的文章主要介绍了解决在tinymce编辑器插入视频到正文后不能跳转播放的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

解决方法：

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

完整的下载文件的代码：文章来源地址https://www.toymoban.com/news/detail-789999.html

    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();
            }
        }
    }

到了这里，关于解决在tinymce编辑器插入视频到正文后不能跳转播放的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！