修复百度编辑器插入视频的bug,可实时预览视频,可修改到支持手机查看视频...
站在前人的肩膀上我们就可以站的更高,看得更远。
所以,请在 ueditor.config.js中搜索 whitlist , 在后面加入
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']
使Ueditor分别能支持embed标签和iframe标签,详见 另一篇博客。
然后修改ueditor.all.js 中的 me.commands["insertvideo"] 方法(搜索一下即可),将以下两行代码
cl = (type == 'upload' ? 'edui-upload-video video-js vjs-default-skin':'edui-faked-video');
html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'image'));
改为
//此处将 edui-faked-video 改为 edui-faked,防止后面将此处替换为image标签
cl = (type == 'upload' ? 'edui-upload-video video-js vjs-default-skin':'edui-faked');
// 此处将image改为embed实现实时预览视频,且修复了第一次插入视频保存后,刷新后再保存会导致视频丢失的bug
html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'embed'));
OK了,现在视频可以插入且可以实时预览,只剩下一个问题,谁告诉我怎么在插入视频后把那个视频框关掉...
*******************************华丽分割线*********************************
好,接下来解决视频无法在手机上显示的问题---呜呜呜~~~(此处应有哭声,掩面而泣啊,这破事儿弄了我一天)
首先要说的是,视频网站那边提供的 iframe 的代码才能支持在手机上查看,然而,ueditor预览使用的是embed,最终显示是用iframe。视频输入的地方只能输入一个网址,但是ueditor在video.js中对各大视频网站的一些网址做了转换,我输入了腾讯提供的iframe中的src中的网址,被video.js中convert_url方法转换成了另外一个地址,于是最终显示就显示不出来了。本着不能让非开发人员接触代码的精神(哪里来的?直接用百度编辑器的source把src替换掉也可以),我改了video.js中的代码,把预览的 embed 换成了iframe,把convert_url的功能屏蔽即可。
url: convert_url(url),
改为
url: url,
然后
var conUrl = convert_url(url);
conUrl = utils.unhtmlForUrl(conUrl);
$G("preview").innerHTML = '<div class="previewMsg"><span>'+lang.urlError+'</span></div>'+
'<embed class="previewVideo" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"' +' src="' + conUrl + '"' +' width="' + 420 + '"' +' height="' + 280 + '"' +' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >' +
'</embed>';
改为
$G("preview").innerHTML = '<div class="previewMsg"><span>'+lang.urlError+'</span></div>'+
'<iframe class="previewVideo" frameborder="0"' +' src="' + url + '"' +' width="' + 420 + '"' +' height="' + 280 + '"' +' allowfullscreen>' +
'</iframe>';
就可以了。
以后只要输入视频网站提供的 iframe代码中的src中的地址即可。
转载于:https://my.oschina.net/jigc/blog/822945
修复百度编辑器插入视频的bug,可实时预览视频,可修改到支持手机查看视频...相关推荐
- 富文本编辑器 输出在线html_一个在线实时预览代码编辑器的实现
在线代码编辑器--Html/Markdown支持 作为开发者,经常会使用各式编辑器,一个体验良好的编辑器会给使用者舒适的coding体验. 但当我们不是使用自己熟悉的电脑,在任意的环境下,我们就需要有 ...
- android系统 视频流录像,Android端海康视频取流,可以实时预览与查看历史录像
android仿探探卡片滑动 android仿探探卡片滑动public class TanTanCallback extends RenRenCallback { private static fin ...
- Ueditor百度编辑器插入video视频
需要在百度编辑器内插入mp4,但总是被和谐.而且默认是embed,不支持手机查看. 白名单内增加了一部分标签,但还是不完善. 于是,新增一个按钮,直接插入拼接好的代码. 1. 页面新增一个input, ...
- .md文件中插入本地图片并显示图片预览
文章目录 前言 一.图片文件上传到gitee图片仓库 1:获取图片网址 (1).注册gitee,建立gitee图片仓库 (2)上传图片至gitee图片仓库 2.修改图片网址,插入到md文件中并预览 ( ...
- 网络监控摄像头流媒体视频管理平台实时预览零延迟支持海康威视浙江大华宇视等解决方案分析
方案简介 网络摄像头监控视频低延迟一直是一个比较难以解决的问题,很多非音视频开发专业的技术人员,花费了大量精力开发出来的各种集成网络监控摄像头在浏览器Web网页实时播放的程序,要么延迟非常高,要么及其 ...
- Atom 编辑器实时预览 HTML 页面
编辑器实时预览 HTML 页面 为何寻找 每次预览 HTML 页面,都需要打开各种浏览器:哪怕不是调试,只是为了查看下效果:切换来切换去,各种刷新,感觉有些浪费时间:以前用过 DW 的实时预览,感觉这 ...
- 用户收货地址h5页面_如何实现H5可视化编辑器的实时预览和真机扫码预览功能...
前言所见即所得的设计理念在WEB IDE领域里一直是备受瞩目的功能亮点, 也能极大的提高 web coder的编程体验和编程效率. 笔者接下来就将对H5可视化编辑器的实时预览和真机扫码预览功能做一次方 ...
- antd picker 使用 如何_如何基于jsoneditor二次封装一个可实时预览的json编辑器组件?(react版)...
前言 做为一名前端开发人员,掌握vue/react/angular等框架已经是必不可少的技能了,我们都知道,vue或react等MVVM框架提倡组件化开发,这样一方面可以提高组件复用性和可扩展性,另一 ...
- 用户收货地址h5页面_如何实现H5可视化编辑器的实时预览和真机扫码预览功能?...
前言 所见即所得的设计理念在WEB IDE领域里一直是备受瞩目的功能亮点, 也能极大的提高 web coder的编程体验和编程效率. 笔者接下来就将对H5可视化编辑器的实时预览和真机扫码预览功能做一次 ...
最新文章
- webmin下重启linux系统
- ActiveXObject函数详解
- EasyUI中拖动draggable的使用
- recyclerview 加载fragment_恢复 RecyclerView 的滚动位置
- matlab 三维 作图 坐标轴_MATLAB学习——MATLAB中的三维绘图指令
- kadane算法_使用KADANE的算法求最大子阵列和
- Unix 风雨五十年:老兵远去,新秀崛起!
- 【软考】2021软件设计师复习开坑指南
- 个人信息保护与大数据应用如何共存
- hive 安装_Hive安装部署及使用——1.2.1版本
- 重新理解泰勒公式 牛顿法
- 【一】微信公众号之扫码登录
- 最近非常火的AI绘图(附操作方法)
- android版本下载京东,京东下载2021安卓最新版_手机app官方版免费安装下载_豌豆荚...
- 不可混为一谈 说说数字机顶盒与网络机顶盒
- Certificate、Provisioning Profile、App ID的介绍及其之间的关系
- 打单工具有哪些?拼多多商家如何打单?
- 如何实现表格固定表头和某列
- MATLAB学习之数列极限(一)
- 1067 – Invalid default value for ‘id’
热门文章
- BigWorld MMO
- java 给一个开学日期,计算当天是开学第几周星期几或者开学第几周星期几为哪一天
- 广域网接口是不是wan_什么是WAN(广域网)?
- Mac苹果键盘多个按键没响应该如何解决呢
- 嵌入式编程与PC编程有何区别
- 开启功放安桥TX-NR515的ARC(音频回传通道)功能
- ArcEngine IProximityOperator踩坑小记
- android实时抓取屏幕文字,Android录制屏幕的实现方法
- steam账号连接服务器遇到问题,无法预料的服务器浏览器反应 - Steam Support
- 教程篇(7.0) 01. FortiGate安全 简介及初始配置 ❀ Fortinet 网络安全专家 NSE 4