editor上传视频无法播放的问题

本文介绍了使用UEditor时遇到的视频上传与播放问题及其解决方案,包括检查服务器是否安装Flash插件、将播放器插件代码加入编辑器白名单及确保视频格式正确编码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、首先确定服务器有没有装flash插件,我以前就被这个坑死


2、第二个坑是,ueditor会屏蔽播放器插件代码,上传了之后会发现编辑器里依旧空白,在editor.config.js里加入白名单


在这个后面直接加下面一段代码,你可以先只改这个其他先不改看看有没有效果(网上一搜看到改了很多地方,我是本地上传的,那些是加链接的)

video:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style'],
source: ['src', 'type'],  
embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode', 'play','autoplay','loop', 'menu', 'allowscriptaccess', 'allowfullscreen', 'controls', 'preload'],  
iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen']  


3、还有一个坑是,我的视频是wmv转的mp4,用的格式工厂转的,注意转的时候要改编码H264(我原先没有改结果播不出来,我还一直改配置文件)



就先分享遇到的这些坑,希望对一些人有帮助

以下是使用vue2-editor上传视频的示例代码: ```vue <template> <div> <editor v-model="html" :config="editorConfig"></editor> </div> </template> <script> import axios from 'axios' import { Editor } from '@wangeditor/editor-for-vue' export default { components: { Editor }, data() { return { html: '', editorConfig: { MENU_CONF: { uploadVideo: { customUpload: this.uploadVideo } } } } }, methods: { uploadVideo(file) { const formData = new FormData() formData.append('file', file) axios.post('/api/upload/video', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(response => { const videoUrl = response.data.videoUrl this.$refs.editor.insertVideo(videoUrl) }).catch(error => { console.error(error) }) } } } </script> ``` 在上述代码中,我们使用了`@wangeditor/editor-for-vue`库来实现富文本编辑器。首先,我们在`<template>`中使用`<editor>`组件来展示富文本编辑器,并使用`v-model`指令将编辑器的内容与`html`数据属性进行双向绑定。 在`<script>`中,我们引入了`axios`库用于发送视频上传请求,并引入了`Editor`组件。在`data`中,我们定义了`html`数据属性来保存编辑器的内容,并配置了`editorConfig`对象来设置编辑器的菜单配置。 在`methods`中,我们定义了`uploadVideo`方法来处理视频上传。该方法首先创建一个`FormData`对象,并将上传视频文件添加到其中。然后,使用`axios.post`方法发送视频上传请求,并在成功响应后获取到视频的URL。最后,我们使用`this.$refs.editor.insertVideo`方法将视频插入编辑器中。 请注意,上述代码中的视频上传请求的URL为`/api/upload/video`,你需要根据实际情况进行修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值