Ueditor 富文本编辑器 插入 m3u8 和 mp4 视频(PHP)
当前环境:PHP、Ueditor的版本是1.4.3
新的需求是,需要在Ueditor 富文本编辑器中,插入视频播放,并且视频格式有MP4,也有M3U8。
百度编辑器默认的是embed,需要修改下配置。 ueditor.all.js
和 ueditor.config.js
这两个文件要改一些东西,具体我这里就不展示了,网上有很多文章都有写。
注意:
创建插入视频字符串,这里也需要判断m3u8,mp4
case 'video':var ext = url.substr(url.lastIndexOf('.') + 1);if(ext == 'ogv') ext = 'ogg';// str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +// ' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +// '<source src="' + url + '" type="video/' + ext + '" /></video>';// break;if (ext == 'm3u8') {str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js vjs-default-skin vjs-big-play-centered" ' + (align ? ' style="float:' + align + '"': '') +' controls="" width="' + width + '" height="' + height + '" data-setup="{}">' +'<source src="' + url + '" type="application/x-mpegURL" /></video>';} else {str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +'<source src="' + url + '" type="video/' + ext + '" /></video>';}break;
如图:
这里主要说下 video 文件夹中的修改(ueditor\dialogs\video)。
先说 video.js 文件,一般的方法是修改 function createPreviewVideo(url) 方法,把 $G(“preview”).innerHTML 原有的修改为:
$G("preview").innerHTML = '<video class="previewVideo video-js" controls="controls" src="'+conUrl+'" style="width:420;height:280 "></video>';
看图:
回到编辑器中操作插入视频功能,MP4格式的没问题,预览的时候可以播放,插入到编辑器后也可以播放;但是M3U8格式的视频不行,预览和插入后都不能播放。
在 video.html 页面中添加插件videojs:
<link rel="stylesheet" href="/share/js/video/video-js.css">
<script src="/share/js/video/video.min.js"></script>
也不行,好像是js没起作用。
视频弹出框 :
富文本编辑器中:
在本地静态页面测试的时候发现 m3u8 格式的 video 标签,要有type属性:type=“application/x-mpegURL”,但是 mp4 格式的加上“application/x-mpegURL”,却不能播放了。
所以在 video.js 里面写了一个判断,根据视频格式写不同的 type:
$G("preview").innerHTML = '<div class="previewMsg"><span>'+lang.urlError+'</span></div>'+if (conUrl.substr(-3) == '3u8') {$G("preview").innerHTML = '<video class="previewVideo video-js" controls="" data-setup="{}" style="width:420;height:280" id="1"><source src='+conUrl+' type="application/x-mpegURL"></source></video>';var vid = document.getElementById('preview');var player = videojs(vid);} else {$G("preview").innerHTML = '<video class="previewVideo video-js" controls="controls" src="'+conUrl+'" style="width:420;height:280 "></video>';}
重新插入 m3u8 格式的视频,发现预览和插入后还是不能播放,mp4格式的视频在预览和插入后都可以播放。
抱着试一试的想法,点了提交按钮,发现在预览页面中可以播放,前提是要在预览页(detail.php)中引用videojs
<link rel="stylesheet" href="/share/js/video/video-js.css">
<script src="/share/js/video/video.min.js"></script>
<script>$('video.video-js').each(function(i, e) {var id = e.idvar vid = document.getElementById(id);var player = videojs(vid);})</script>
如图:
同理,在前台页面中引用video.js,也可以播放 m3u8 的视频,只是不能在编辑的时候播放。
但是还有个问题,如果插入多个m3u8的视频,它们的id都是一样的,只有一个视频可以播放
我想在 ueditor.all.js 文件中发现视频部分在前面修改的时候被注释掉了,打开就可以了:
效果如图:
修改下js代码,功能是播放其中一个视频的时候,其他视频都暂停播放:
$('video.video-js').each(function(i, e) {var id = e.idvar vid = document.getElementById(id);videojs(vid).ready(function(){this.on("play", function(e) {//pause other video$(".video-js").each(function (index) {if (i !== index) {this.player.pause();}});});});
})
初步实现了需求,只是在视频弹出框预览时,和在ueditor编辑器中不能播放m3u8的视频,但是mp4的视频都可以播放;而在后台预览页,与前台正式页面中,视频的播放都没有问题。
进一步优化
视频弹出框中底部的按钮,我实在没有找到在哪里定义,或者封装的,就想了一个比较笨的方法,把原始的按钮注释掉,自己重新写2个按钮,实现预览和插入功能。
ueditor.css修改:
.edui-default .edui-dialog-foot {background-color: white;display: none; /* 隐藏视频弹窗底部按钮 */
}
video.html修改:
<!--把div改下-->
<video-js id="preview" class="vjs-default-skin vjs-big-play-centered" controls preload="auto" width="420" height="280"></video-js><!--自己定义的按钮-->
<div><input type="button" id="btn_preview" value="预览" /><input type="button" id="btn_insert" value="确认" />
</div><!--js代码-->
<script>$(function () {$("#btn_preview").click(function () {var url = $("#videoUrl").val();if (url.substr(-3) == '3u8') {$("#preview").html('<source src="' + url + '" type="application/x-mpegURL">');var vid = document.getElementById('preview');var player = videojs(vid);} else {$G("preview").innerHTML = '<video class="previewVideo video-js" controls="controls" src="'+url+'" style="width:420;height:280 "></video>';}});$("#btn_insert").click(function () {var url = $("#videoUrl").val();if (url.substr(-3) == '3u8') {var guid = generateGUID(); var html = '<video class="video video-js vjs-default-skin vjs-big-play-centered" id="' + guid + '" controls preload="auto" width="420" height="280">' +' <source src="' + url + '" type="application/x-mpegURL" />' +'</video>' } else {var html = '<video controls preload="auto" width="420" height="280">' +' <source src="' + url + '" />' +'</video>'}UE.getEditor('content_content_main').execCommand('insertHtml', html);});function generateGUID() {return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);return v.toString(16);});}
});</script>
video.js修改:
重新插入m3u8视频:预览效果
到此,视频弹窗的预览效果实现了,不过还有一个问题,就是视频插入后,在富文本编辑器中还是不能播放m3u8的视频。
有什么好的方案欢迎给我留言。
补充:不用自定义预览和确认按钮,用原始的按钮也可以实现在预览时播放视频(上面优化的部分不用改,只做下面修改)
video.html:
<!--把div改下-->
<video-js id="preview" class="vjs-default-skin vjs-big-play-centered" controls preload="auto" width="420" height="280"></video-js>
video.js:
if (conUrl.substr(-3) == '3u8') {$("#preview").html('<source src="' + conUrl + '" type="application/x-mpegURL">');var vid = document.getElementById('preview');var player = videojs(vid);} else {$G("preview").innerHTML = '<video class="previewVideo video-js" controls="controls" src="'+conUrl+'" style="width:420;height:280 "></video>';}
实测也可以实现预览时播放m3u8视频:
新需求:要增加视频封面功能
1、在 video.html 页面增加封面图的输入框:id 自己起名字
<tr><td><label for="coverUrl" class="url"><var id="lang_cover_url"></var></label></td><td><input id="coverUrl" type="text"></td>
</tr>
2、在 zh-cn.js 文件中增加封面的标签文字:全局搜索“视频网址”就能找到添加的地方了
'lang_cover_url':"封面网址",
3、在 video.js 页面接收封面参数值:
/*** 将单个视频信息插入编辑器中*/
function insertSingle(){var width = $G("videoWidth"),height = $G("videoHeight"),url=$G('videoUrl').value,coverUrl = $G('coverUrl').value,align = findFocus("videoFloat","name");if(!url) return false;if ( !checkNum( [width, height] ) ) return false;editor.execCommand('insertvideo', {url: convert_url(url),width: width.value,height: height.value,align: align,coverUrl: coverUrl}, isModifyUploadVideo ? 'upload':null);
}
4、在 ueditor.all.js 中,添加 poster 属性
搜索:me.commands["insertvideo"]
,然后修改如下:
html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'video', vi.coverUrl));
在修改 creatInsertStr 方法:注意是“video插件, 为UEditor提供视频插入支持”
:
function creatInsertStr(url,width,height,id,align,classname,type,imgUrl){
// 。。。case 'video':var ext = url.substr(url.lastIndexOf('.') + 1);if(ext == 'ogv') ext = 'ogg';// str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +// ' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +// '<source src="' + url + '" type="video/' + ext + '" /></video>';// break;if (ext == 'm3u8') {str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js vjs-default-skin vjs-big-play-centered" ' + (align ? ' style="float:' + align + '"': '') +' controls="" width="' + width + '" height="' + height + '" data-setup="{}" poster="'+imgUrl+'">' +'<source src="' + url + '" type="application/x-mpegURL" /></video>';} else {str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}" poster="'+imgUrl+'">' +'<source src="' + url + '" type="video/' + ext + '" /></video>';}break;// 。。。
}
测试成功。
Ueditor 富文本编辑器 插入 m3u8 和 mp4 视频(PHP)相关推荐
- java 百度副文本_spring boot 、springMVC环境集成百度ueditor富文本编辑器
spring-boot-mvc-ueditor-qiniu spring boot .springMVC环境集成百度ueditor富文本编辑器,使用七牛云存储图片 依赖库版本: spring boot ...
- php引入百度Ueditor富文本编辑器
php引入百度Ueditor富文本编辑器 文本编辑器插件内容丰富,比起传统的textarea标签输入要好用很多,看看如何在页面实现引入吧 1.下载适合的资源包(可以去官网下载适合的版本),我是php引 ...
- Ueditor富文本编辑器
Ueditor富文本编辑器 Ueditor富文本编辑器插件应用步骤如下: 1.引入css和js文件 2.设置承载标签 设置富文本编辑器的承载标签,必须设置id属性.一般使用textarea或scrip ...
- ueditor富文本编辑器过滤了代码,如何取消?
后台UEditor富文本编辑器,编辑的代码被强制过滤,并被强制修改成<p>标签?导致前台页面效果不对? ueditor富文本编辑器,虽然好用,但是很多时候,如果没有足够的使用经验,一般是很 ...
- java 接收前台富文本_前后端分离ueditor富文本编辑器的使用-Java版本
最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...
- MVC 使用 Ueditor富文本编辑器
一.Ueditor 1.下载Ueditor富文本编辑器 官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...
- ueditor富文本编辑器使用百度地图自定义动态地图组件及兼容https及http协议
ueditor富文本编辑器默认支持百度地图组件,但是如果导入动态地图后会加很多默认的地图组件在上面.如果需要自定义动态地图的组件则需要修改ueditor特定的html. ueditor百度地图组件所在 ...
- UEditor富文本编辑器不显示问题
项目场景: vue中if判断后使用文本编辑器(误区) 问题描述: 在div中使用v-if判断是否显示UEditor富文本编辑器,在判断为true的情况下富文本编辑器并未加载出. <!-- 判断富 ...
- QT QWebEngineView+UEditor富文本编辑器
QT QWebEngineView+UEditor富文本编辑器 一.简述 记--简单使用QWebEngineView+UEditor富文本编辑器实现一个简单的编辑器,支持图片(支持右键粘贴,支持直接拖 ...
最新文章
- 最精简写法→去掉任意多个空行
- 详解音视频直播中的低延时
- 转 Intellij中的常用快捷键
- linux 日志按大小切割_日志切割工具logrotate,帮你管理你的日志文件
- Ubuntu Server安全Webserver搭建流程
- 如何成为一位牛逼的高手
- 一步步编写操作系统 44 用c语言编写内核1
- ASP.NET-EF基础知识
- python elseif用法_Python关键字简介
- 【包邮免费送】Python 全栈知识图谱
- 报表通过url向数据集传参
- 升级完ssh之后login incorrect怎么解决_魔兽世界怀旧服:伏击搜索流,盗贼另类升级刷钱方法简单攻略...
- 5 helloword 开发运行步骤
- .NET配置文件解析过程详解【转载】
- python枚举函数_python dict函数枚举对象
- 【头像变更】自己瞎做一个头像,放真实头像做头像虽然真诚,但是心里实在不想!
- 图纸管理协同办公软件推荐
- APP系列,学院专题讲座图像记录软件推荐
- springboot jpa链接数据库
- 关于云开发数据库的使用经验和建议
热门文章
- com.android.gestures,Android Gestures/手势
- 与滑动验证码的斗智斗勇,看如何用Python破解
- zemax光学设计轻松自学
- 常用的控制板加工制造设备有哪些?
- 关于取消“计算机信息系统集成企业资质认定”、“计算机信息系统集成项目经理人员资质评定”和“信息系统工程监理单位资质认证和监理工程师资格认定”
- ViewGroup的使用
- leetcode91
- python能代替cad吗_python操作cad
- FFmpeg音频提取并截取片段
- Oracle 如何删除主键新增主键