Current environment: The version of PHP and Ueditor is 1.4.3
The new requirement is to insert a video to play in the Ueditor rich text editor, and the video format is MP4 or M3U8.
The Baidu editor defaults to embed, and the configuration needs to be modified. ueditor.all.jsand ueditor.config.jsThese two files need to change some things, I will not show the details here, there are many articles on the Internet.
Notice:
Create and insert video strings, here also need to judge 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;
As shown in the picture:
Here we mainly talk about the modification in the video folder (ueditor\dialogs\video).
Let’s talk about the video.js file first. The general method is to modify the function createPreviewVideo(url) method, and modify the original value of $G(“preview”).innerHTML to:
$G("preview").innerHTML = '<video class="previewVideo video-js" controls="controls" src="'+conUrl+'" style="width:420;height:280 "></video>';
Look at the picture:
Go back to the editor to operate the function of inserting video, the MP4 format is no problem, it can be played during preview, and can also be played after inserted into the editor; but the M3U8 format video cannot be played after previewing and inserting.
Add the plugin videojs to the video.html page:
<link rel="stylesheet" href="/share/js/video/video-js.css">
<script src="/share/js/video/video.min.js"></script>
It doesn't work either, it seems that js doesn't work.
Video popup:
In the rich text editor:
When testing the local static page, it is found that the video tag in the m3u8 format must have the type attribute: type="application/x-mpegURL", but the mp4 format with "application/x-mpegURL" is not Cannot play anymore.
So I wrote a judgment in video.js, and wrote different types according to the video format:
$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>';
}
Re-insert the video in m3u8 format, and find that it still cannot be played after previewing and inserting, but the video in mp4 format can be played after previewing and inserting.
With the idea of giving it a try, I clicked the submit button and found that it can be played on the preview page, provided that videojs is referenced in the preview page (detail.php)
<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.id
var vid = document.getElementById(id);
var player = videojs(vid);
})
</script>
As shown in the picture:
Similarly, if video.js is referenced in the front page, m3u8 video can also be played, but it cannot be played during editing.
But there is still a problem. If you insert multiple m3u8 videos, their ids are all the same, and only one video can be played.
I want to find in the ueditor.all.js file that the video part was commented out during the previous modification, and it can be opened:
the effect is shown in the figure:
modify the js code, the function is that when one of the videos is played, other videos are paused play:
$('video.video-js').each(function(i, e) {
var id = e.id
var 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();
}
});
});
});
})
Initially fulfilled the requirements, but in the preview of the video pop-up box, and in the ueditor editor, the m3u8 video cannot be played, but the mp4 video can be played; but in the background preview page, and in the front official page, the video playback is not available question.
advanced optimization
The button at the bottom of the video pop-up box, I really didn’t find where it was defined or packaged, so I thought of a stupid way to comment out the original button and rewrite 2 buttons to realize the preview and insert functions.
Ueditor.css modification:
.edui-default .edui-dialog-foot {
background-color: white;
display: none; /* 隐藏视频弹窗底部按钮 */
}
video.htmlModified:
<!--把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 modification:
re-insert m3u8 video: preview effect
So far, the preview effect of the video pop-up window has been realized, but there is still a problem, that is, after the video is inserted, the m3u8 video cannot be played in the rich text editor.
If you have any good plans, please leave me a message.
Supplement: Instead of customizing the preview and confirmation buttons, the original button can also be used to play the video during preview (the optimized part above does not need to be changed, only the following modification)
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>';
}
The actual measurement can also realize the playback of m3u8 video during preview:
New requirement: Add video cover function
1. Add an input box for the cover image on the video.html page: id name it yourself
<tr>
<td><label for="coverUrl" class="url"><var id="lang_cover_url"></var></label></td>
<td><input id="coverUrl" type="text"></td>
</tr>
2. Add the label text of the cover in the zh-cn.js file: search "Video URL" globally to find the added place
'lang_cover_url':"封面网址",
3. Receive the cover parameter value on the video.js page:
/**
* 将单个视频信息插入编辑器中
*/
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. In ueditor.all.js, add poster attribute
Search for: me.commands["insertvideo"] , and then modify as follows:
html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'video', vi.coverUrl));
When modifying the creatInsertStr method: note that “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;
// 。。。
}
Test success.