原文
function Video(editor) {
this.editor = editor;
this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-play"><i/></div>');
this.type = 'panel';
this._active = false;
}
Video.prototype = {
constructor: Video,
onClick: function onClick() {
this._createInsertPanel();
},
_createInsertPanel: function _createInsertPanel() {
var editor = this.editor;
var uploadVideo = editor.uploadVideo;
var config = editor.config;
var upTriggerId = getRandom('up-trigger');
var upFileId = getRandom('up-file');
var tabsConfig = [{
title: '上传 video',
tpl: '<div class="w-e-up-img-container">\n ' +
'<div id="' + upTriggerId + '" class="w-e-up-btn">\n ' +
'<i class="w-e-icon-upload2"></i>\n </div>\n ' +
'<div style="display:none;">\n <input id="' + upFileId + '" type="file" multiple="multiple" accept="audio/mp4, video/mp4"/>\n ' +
'</div>\n </div>',
events: [{
selector: '#' + upTriggerId,
type: 'click',
fn: function fn() {
var $file = $('#' + upFileId);
var fileElem = $file[0];
if (fileElem) {
fileElem.click();
} else {
return true;
}
}
}, {
selector: '#' + upFileId,
type: 'change',
fn: function fn() {
var $file = $('#' + upFileId);
var fileElem = $file[0];
if (!fileElem) {
return true;
}
var fileList = fileElem.files;
if (fileList.length) {
uploadVideo.uploadVideo(fileList);
}
return true;
}
}]
}
];
var tabsConfigResult = [];
tabsConfigResult.push(tabsConfig[0]);
var panel = new Panel(this, {
width: 300,
tabs: tabsConfigResult
});
panel.show();
this.panel = panel;
},
tryChangeActive: function tryChangeActive(e) {
var editor = this.editor;
var $elem = this.$elem;
if (editor._selectedImg) {
this._active = true;
$elem.addClass('w-e-active');
} else {
this._active = false;
$elem.removeClass('w-e-active');
}
}
};
var MenuConstructors = {};
MenuConstructors.video = Video;
function UploadVideo(editor) {
this.editor = editor;
}
UploadVideo.prototype = {
constructor: UploadVideo,
_alert: function _alert(alertInfo, debugInfo) {
var editor = this.editor;
var debug = editor.config.debug;
var customAlert = editor.config.customAlert;
if (debug) {
throw new Error('wangEditor: ' + (debugInfo || alertInfo));
} else {
if (customAlert && typeof customAlert === 'function') {
customAlert(alertInfo);
} else {
alert(alertInfo);
}
}
},
insertLinkVideo:function(link){
var _this3 = this;
if (!link) {
return;
}
var editor = this.editor;
var config = editor.config;
var linkVideoCheck = config.linkVideoCheck;
var checkResult = void 0;
if (linkVideoCheck && linkVideoCheck === 'function') {
checkResult = linkVideoCheck(link);
if (typeof checkResult === 'string') {
alert(checkResult);
return;
}
}
editor.cmd.do('insertHTML', '<video src="' + link + '" style="width:50%;height: 50%;" controls autobuffer autoplay muted/>');
var video = document.createElement('video');
video.onload = function () {
var callback = config.linkVideoCallback;
if (callback && typeof callback === 'function') {
callback(link);
}
video = null;
};
video.onerror = function () {
video = null;
_this2._alert('插入视频错误', 'wangEditor: \u63D2\u5165\u56FE\u7247\u51FA\u9519\uFF0C\u56FE\u7247\u94FE\u63A5\u662F "' + link + '"\uFF0C\u4E0B\u8F7D\u8BE5\u94FE\u63A5\u5931\u8D25');
return;
};
video.onabort = function () {
video = null;
};
video.src = link;
},
uploadVideo: function uploadVideo(files) {
var _this3 = this;
if (!files || !files.length) {
return;
}
var editor = this.editor;
var config = editor.config;
var uploadVideoServer = "/video/uploadVideo";
var maxSize = 100 * 1024 * 1024;
var maxSizeM = maxSize / 1000 / 1000;
var maxLength = 1;
var uploadFileName = "file";
var uploadVideoParams = config.uploadVideoParams || {};
var uploadVideoHeaders = {};
var hooks =config.uploadImgHooks || {};
var timeout = 5 * 60 * 1000;
var withCredentials = config.withCredentials;
if (withCredentials == null) {
withCredentials = false;
}
var resultFiles = [];
var errInfo = [];
arrForEach(files, function (file) {
var name = file.name;
var size = file.size;
if (!name || !size) {
return;
}
if (/\.(mp4)$/i.test(name) === false) {
errInfo.push('\u3010' + name + '\u3011\u4e0d\u662f\u89c6\u9891');
return;
}
if (maxSize < size) {
errInfo.push('\u3010' + name + '\u3011\u5927\u4E8E ' + maxSizeM + 'M');
return;
}
resultFiles.push(file);
});
if (errInfo.length) {
this._alert('视频验证未通过: \n' + errInfo.join('\n'));
return;
}
if (resultFiles.length > maxLength) {
this._alert('一次最多上传' + maxLength + '个视频');
return;
}
var formdata = new FormData();
arrForEach(resultFiles, function (file) {
var name = uploadFileName || file.name;
formdata.append(name, file);
});
if (uploadVideoServer && typeof uploadVideoServer === 'string') {
var uploadVideoServer = uploadVideoServer.split('#');
uploadVideoServer = uploadVideoServer[0];
var uploadVideoServerHash = uploadVideoServer[1] || '';
objForEach(uploadVideoParams, function (key, val) {
val = encodeURIComponent(val);
if (uploadVideoParamsWithUrl) {
if (uploadVideoServer.indexOf('?') > 0) {
uploadVideoServer += '&';
} else {
uploadVideoServer += '?';
}
uploadVideoServer = uploadVideoServer + key + '=' + val;
}
formdata.append(key, val);
});
if (uploadVideoServerHash) {
uploadVideoServer += '#' + uploadVideoServerHash;
}
var xhr = new XMLHttpRequest();
xhr.open('POST', uploadVideoServer);
xhr.timeout = timeout;
xhr.ontimeout = function () {
if (hooks.timeout && typeof hooks.timeout === 'function') {
hooks.timeout(xhr, editor);
}
_this3._alert('上传视频超时');
};
if (xhr.upload) {
xhr.upload.onprogress = function (e) {
var percent = void 0;
var progressBar = new Progress(editor);
if (e.lengthComputable) {
percent = e.loaded / e.total;
progressBar.show(percent);
}
};
}
xhr.onreadystatechange = function () {
var result = void 0;
if (xhr.readyState === 4) {
if (xhr.status < 200 || xhr.status >= 300) {
if (hooks.error && typeof hooks.error === 'function') {
hooks.error(xhr, editor);
}
_this3._alert('上传视频发生错误', '\u4E0A\u4F20\u56FE\u7247\u53D1\u751F\u9519\u8BEF\uFF0C\u670D\u52A1\u5668\u8FD4\u56DE\u72B6\u6001\u662F ' + xhr.status);
return;
}
result = xhr.responseText;
if ((typeof result === 'undefined' ? 'undefined' : _typeof(result)) !== 'object') {
try {
console.log(result);
result = JSON.parse(result);
} catch (ex) {
if (hooks.fail && typeof hooks.fail === 'function') {
hooks.fail(xhr, editor, result);
}
_this3._alert('上传视频失败', '上传视频返回结果错误,返回结果是: ' + result);
return;
}
}
if (!hooks.customInsert && result.errno == '0') {
if (hooks.fail && typeof hooks.fail === 'function') {
hooks.fail(xhr, editor, result);
}
_this3._alert('上传视频失败', '上传视频返回结果错误,返回结果 errno=' + result.errno);
} else {
if (hooks.customInsert && typeof hooks.customInsert === 'function') {
hooks.customInsert(_this3.insertLinkVideo.bind(_this3), result, editor);
} else {
var data = result || [];
_this3.insertLinkVideo(data.url);
}
if (hooks.success && typeof hooks.success === 'function') {
hooks.success(xhr, editor, result);
}
}
}
};
if (hooks.before && typeof hooks.before === 'function') {
var beforeResult = hooks.before(xhr, editor, resultFiles);
if (beforeResult && (typeof beforeResult === 'undefined' ? 'undefined' : _typeof(beforeResult)) === 'object') {
if (beforeResult.prevent) {
this._alert(beforeResult.msg);
return;
}
}
}
objForEach(uploadVideoHeaders, function (key, val) {
xhr.setRequestHeader(key, val);
});
xhr.withCredentials = withCredentials;
xhr.send(formdata);
return;
}
}
};
Editor.prototype = {
constructor: Editor,
_initUploadVideo: function _initUploadVideo() {
this.uploadVideo = new UploadVideo(this);
},
create: function create() {
this._initUploadVideo();
},
};