百度ueditor富文本编辑器上传视频设置封面和禁止视频全屏、下载功能

最近在工作中用到了ueditor,这个最开始不是我接入到后台管理系统的,我半路接手,百度官方给的文档又写的很一般,不易理解,所以有很多问题解决的很麻烦。

在使用ueditor过程中,目前遇到的一些问题:

我们公司运营需要用ueditor实现微信公众号文章的编写,之前她们是直接把微信公众号文章复制到ueditor编辑器中,这样子是可以直接使用的。这样带来的一个问题是,

如果文章里有视频播放的话,视频的播放源全都是腾讯视频,我们公司商务反对了这种行为,所以运营提出文章内的视频由本地上传或者使用第三方无广告的运营商。

ueditor中提供了直接使用视频链接

但是这种方式设置的视频用的是flash方式,问题是现在主流的一些浏览器都禁用了flash。结果在页面上显示效果如图:

所以直接使用第三方url地址是走不通了。于是考虑第二种,本地上传至服务器。

这种方式视频在页面里是通过h5的方式播放的,在web浏览器,手机app内的webview中也可以正常播放。有一个问题是视频在页面内显示时是没有封面图的,原来的想法是再上传一张图片或者通过代码截取视频的第一帧作为封面图,但是这样做需要的开发工期不可估,就才用了一个这种方案,用一张默认图作为所有通过这种方式上传的视频的封面图。

具体操作如下:

在ueditor.config.js中加入如下代码

然后在生成video播放器节点的所有代码处添加这样一段代码

poster的值就是指定的默认视频封面图,效果就像这样

然后视频就可以在web浏览器中正常播放了。但是在webview中,点击视频中的全屏和,都会导致APP应用闪退,

这应该是APP的webview做了某些限制,让APP做检查是后话,因为这个功能我们已经上线了,所以最快的解决办法是隐藏掉视频中的全屏和下载按钮。解决办法:

删除原生video的控制条的下载或者全屏按钮的方法:

在video的标签上添加以下内容就可以:

<video controls controlsList=‘nofullscreen nodownload noremote footbar‘ ></video>原文地址:https://blog.csdn.net/qq_36120342/article/details/82318873亲测有效。

本文是想到哪写到哪,没有逻辑,只是做个记录。

原文地址:https://www.cnblogs.com/wangchaoBlog/p/10655162.html

时间: 2024-10-02 01:03:05

百度ueditor富文本编辑器上传视频设置封面和禁止视频全屏、下载功能的相关文章

PHP如何搭建百度Ueditor富文本编辑器

本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下并改文件夹名称为ueditor 第一步 引入javascript 在html中如入下面的js语句引入相关文件 ? 1 2 <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ued

ASP.NET MVC5 中百度ueditor富文本编辑器的使用

随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor,另一种是ueditor的迷你版umeditor. 一.我们先讲完全版的ueditor. 1.建立数据模型. 2.建立对应的控制器和视图. 3.访问http://ueditor.baidu.com/website/download.html 进入开发版的下载页面,下载.net UTF-8版本,现在最新

django之百度Ueditor富文本编辑器后台集成

Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因为百度富文本编辑器Ueditor没有对python的支持 步骤1: 在官网下载Ueditor的任意版本代码:http://ueditor.baidu.com/website/download.html#ueditor 步骤2: 将下载的代码放入到 django 项目中 步骤3:前端引用 在前端HTM

vue集成百度UEditor富文本编辑器

在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器.那么.如果你有这个需求.希望可以帮助到你 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是我将百度富文本编辑器放到vue项目中使用.效果图如下 废话不多说. 1.使用vue-cli构建一个vue项目.然后下载UEditor源码.地址:http://ueditor.baidu.com/website/ 把项目复制到vue项目的static文件下.目的是让服务可以访问到里面的文件,打开UEd

reactjs 中使用百度Ueditor富文本编辑器

import React from 'react'; var Ueditor = React.createClass({ componentDidMount(){ var editor = UE.getEditor(this.props.id, { //工具栏 toolbars: [[ 'fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethro

php如何引入百度Ueditor富文本编辑器

文本编辑器插件内容丰富,比起传统的textarea标签输入要好用很多,看看如何在页面实现引入吧 1.下载适合的资源包(可以去官网下载适合的版本),我是php引入 2.下载后解压放到一个位置.(我用的是TP框架,所以我放在了我的指定公共文件夹Pbulic下) 3.在页面中引入 首先在head标签里写引入资源包的路径,路径要写自己存放资源包的路径 <script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.c

修改UMeditor(百度富文本编辑器)上传视频

1. createPreviewVideo 所在位置video.js 2.修改 creatInsertStr 所在位置 umeditor.js 修改原因:小程序不支持<embed>标签. Date:11月1日 原文地址:https://www.cnblogs.com/sk8-xz/p/11790976.html

百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明

====================================================================== [百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明] ----by 夏春涛 2014-02-20 ====================================================================== 运行环境: ueditor-v1.3.6-utf8-net,VS2010旗舰版+SP1,

Java往事之《百度UEditor插件配置图片上传问题》

百度UEditor插件配置图片上传问题 前言:之前第一次用到UEditor插件的时候,一脸懵逼!没错就是一脸懵逼,去UEditor插件官网下载了一个开发版的.然后对于新鲜技术好奇,本人就迫不及待的把它copy到了我的项目里,运行之后发现鼠标点到输入框里面的时候,什么鬼啊,握了棵草!上传图片的插件置灰了如下图1,一看还有一个多图片上传的插件还在,就赶紧点了一下,点开的那一瞬间我吃了一鲸,如下图2! 图1 图2 很好!下面看一下如何解决这个问题. 1.首先你可以到官网Ueditor,查看很详细的文档