Skip to content
This repository was archived by the owner on Jan 6, 2023. It is now read-only.

Commit 3190e3b

Browse files
author
Jinqn
committed
by Jinqn 添加上传视频功能
1 parent e292a48 commit 3190e3b

File tree

13 files changed

+541
-150
lines changed

13 files changed

+541
-150
lines changed

_examples/uparsedemo.html

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55

66
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
77
<script src="../ueditor.parse.js"></script>
8-
<!--<link href="../third-party/video-js/video-js.css" rel="stylesheet">-->
9-
<!--<script src="../third-party/video-js/video.js"></script>-->
8+
<link href="../third-party/video-js/video-js.css" rel="stylesheet">
9+
<script src="../third-party/video-js/video.js"></script>
1010
<title></title>
1111
</head>
1212
<body>
@@ -16,15 +16,11 @@ <h1>解析编辑的内容</h1>
1616
<p>
1717
这里可以书写,编辑器的初始内容
1818
</p>
19-
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
20-
poster="http://video-js.zencoder.com/oceans-clip.png"
21-
data-setup="{}" src="http://video-js.zencoder.com/oceans-clip.mp4">
22-
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
23-
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
24-
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
25-
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
26-
<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
27-
</video>
19+
<p>
20+
<video class="video-js vjs-default-skin" controls preload="none" width="420" height="280"
21+
src="http://localhost/ueditor/php/upload/20131213/1386914238861195.mp4"
22+
poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}"></video>
23+
</p>
2824
<pre class="brush:js;toolbar:false;">
2925
moveToBookmark:function (bookmark) {
3026
var start = bookmark.id ? this.document.getElementById(bookmark.start) : bookmark.start,

_src/plugins/video.js

Lines changed: 35 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -16,33 +16,45 @@ UE.plugins['video'] = function (){
1616
* @param toEmbed 是否以flash代替显示
1717
* @param addParagraph 是否需要添加P 标签
1818
*/
19-
function creatInsertStr(url,width,height,id,align,toEmbed){
20-
return !toEmbed ?
21-
22-
'<img ' + (id ? 'id="' + id+'"' : '') + ' width="'+ width +'" height="' + height + '" _url="'+url+'" class="edui-faked-video"' +
23-
' src="' + me.options.UEDITOR_HOME_URL+'themes/default/images/spacer.gif" style="background:url('+me.options.UEDITOR_HOME_URL+'themes/default/images/videologo.gif) no-repeat center center; border:1px solid gray;'+(align ? 'float:' + align + ';': '')+'" />'
24-
25-
:
26-
'<embed type="application/x-shockwave-flash" class="edui-faked-video" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
27-
' src="' + utils.html(url) + '" width="' + width + '" height="' + height + '"' + (align ? ' style="float:' + align + '"': '') +
28-
' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >';
19+
function creatInsertStr(url,width,height,id,align,classname,type){
20+
var str;
21+
switch (type){
22+
case 'image':
23+
str = '<img ' + (id ? 'id="' + id+'"' : '') + ' width="'+ width +'" height="' + height + '" _url="'+url+'" class="' + classname + '"' +
24+
' src="' + me.options.UEDITOR_HOME_URL+'themes/default/images/spacer.gif" style="background:url('+me.options.UEDITOR_HOME_URL+'themes/default/images/videologo.gif) no-repeat center center; border:1px solid gray;'+(align ? 'float:' + align + ';': '')+'" />'
25+
break;
26+
case 'embed':
27+
str = '<embed type="application/x-shockwave-flash" class="' + classname + '" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
28+
' src="' + utils.html(url) + '" width="' + width + '" height="' + height + '"' + (align ? ' style="float:' + align + '"': '') +
29+
' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >';
30+
break;
31+
case 'video':
32+
str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + '" ' + (align ? ' style="float:' + align + '"': '') +
33+
' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}"></video>';
34+
break;
35+
}
36+
return str;
2937
}
3038

31-
function switchImgAndEmbed(root,img2embed){
32-
utils.each(root.getNodesByTagName(img2embed ? 'img' : 'embed'),function(node){
33-
if(node.getAttr('class') == 'edui-faked-video'){
34-
35-
var html = creatInsertStr( img2embed ? node.getAttr('_url') : node.getAttr('src'),node.getAttr('width'),node.getAttr('height'),null,node.getStyle('float') || '',img2embed);
36-
node.parentNode.replaceChild(UE.uNode.createElement(html),node)
39+
function switchImgAndVideo(root,img2video){
40+
utils.each(root.getNodesByTagName(img2video ? 'img' : 'embed video'),function(node){
41+
var className = node.getAttr('class');
42+
if(className.indexOf('edui-faked-video') != -1){
43+
var html = creatInsertStr( img2video ? node.getAttr('_url') : node.getAttr('src'),node.getAttr('width'),node.getAttr('height'),null,node.getStyle('float') || '',className,img2video ? 'embed':'image');
44+
node.parentNode.replaceChild(UE.uNode.createElement(html),node);
45+
}
46+
if(className.indexOf('edui-upload-video') != -1){
47+
var html = creatInsertStr( img2video ? node.getAttr('_url') : node.getAttr('src'),node.getAttr('width'),node.getAttr('height'),null,node.getStyle('float') || '',className,img2video ? 'video':'image');
48+
node.parentNode.replaceChild(UE.uNode.createElement(html),node);
3749
}
3850
})
3951
}
4052

4153
me.addOutputRule(function(root){
42-
switchImgAndEmbed(root,true)
54+
switchImgAndVideo(root,true)
4355
});
4456
me.addInputRule(function(root){
45-
switchImgAndEmbed(root)
57+
switchImgAndVideo(root)
4658
});
4759

4860
/**
@@ -112,12 +124,13 @@ UE.plugins['video'] = function (){
112124
* ```
113125
*/
114126
me.commands["insertvideo"] = {
115-
execCommand: function (cmd, videoObjs){
127+
execCommand: function (cmd, videoObjs, type){
116128
videoObjs = utils.isArray(videoObjs)?videoObjs:[videoObjs];
117-
var html = [],id = 'tmpVedio';
129+
var html = [],id = 'tmpVedio', cl;
118130
for(var i=0,vi,len = videoObjs.length;i<len;i++){
119-
vi = videoObjs[i];
120-
html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i,null,false));
131+
vi = videoObjs[i];
132+
cl = (type == 'upload' ? 'edui-upload-video video-js vjs-default-skin':'edui-faked-video');
133+
html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'image'));
121134
}
122135
me.execCommand("inserthtml",html.join(""),true);
123136
var rng = this.selection.getRange();

dialogs/attachment/attachment.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
filesList=[];
2929
editor.setOpt({
3030
fileFieldName:"upfile",
31-
fileNameFormat:"{filename}{rand:6}"
31+
fileNameFormat:"{time}{rand:6}"
3232
});
3333
window.onload = function () {
3434
var settings = {

dialogs/image/image.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@
9999
imageFieldName:"upfile",
100100
compressSide:0,
101101
maxImageSideLength:900,
102-
imageNameFormat: "{filename}{rand:6}"
102+
imageNameFormat: "{time}{rand:6}"
103103
});
104104
utils.domReady(function(){
105105
var flashOptions = {

dialogs/video/callbacks.js

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
/* Demo Note: This demo uses a FileProgress class that handles the UI for displaying the file name and percent complete.
2+
The FileProgress class is not part of SWFUpload.
3+
*/
4+
5+
6+
/* **********************
7+
Event Handlers
8+
These are my custom event handlers to make my
9+
web application behave the way I went when SWFUpload
10+
completes different tasks. These aren't part of the SWFUpload
11+
package. They are part of my application. Without these none
12+
of the actions SWFUpload makes will show up in my application.
13+
********************** */
14+
function preLoad() {
15+
if (!this.support.loading) {
16+
alert(lang.flashVersionError);
17+
return false;
18+
}
19+
return true;
20+
}
21+
function loadFailed() {
22+
alert(lang.flashLoadingError);
23+
}
24+
25+
function fileQueued(file) {
26+
try {
27+
var progress = new FileProgress(file, this.customSettings.progressTarget);
28+
progress.setStatus(lang.fileUploadReady);
29+
progress.toggleCancel(true, this,lang.delUploadQueue);
30+
} catch (ex) {
31+
this.debug(ex);
32+
}
33+
34+
}
35+
36+
function fileQueueError(file, errorCode, message) {
37+
try {
38+
if (errorCode === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) {
39+
alert(lang.limitPrompt1+ message + lang.limitPrompt2);
40+
return;
41+
}
42+
43+
var progress = new FileProgress(file, this.customSettings.progressTarget);
44+
progress.setError();
45+
progress.toggleCancel(true, this,lang.delFailFile);
46+
47+
switch (errorCode) {
48+
case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
49+
progress.setStatus(lang.fileSizeLimit);
50+
this.debug("Error Code: File too big, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
51+
break;
52+
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
53+
progress.setStatus(lang.emptyFile);
54+
this.debug("Error Code: Zero byte file, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
55+
break;
56+
case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
57+
progress.setStatus(lang.fileTypeError);
58+
this.debug("Error Code: Invalid File Type, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
59+
break;
60+
default:
61+
if (file !== null) {
62+
progress.setStatus(lang.unknownError);
63+
}
64+
this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
65+
break;
66+
}
67+
} catch (ex) {
68+
this.debug(ex);
69+
}
70+
}
71+
72+
73+
74+
function uploadStart(file) {
75+
try {
76+
/* I don't want to do any file validation or anything, I'll just update the UI and
77+
return true to indicate that the upload should start.
78+
It's important to update the UI here because in Linux no uploadProgress events are called. The best
79+
we can do is say we are uploading.
80+
*/
81+
var progress = new FileProgress(file, this.customSettings.progressTarget);
82+
progress.setStatus(lang.fileUploading);
83+
progress.toggleCancel(true, this,lang.cancelUpload);
84+
}catch (ex) {}
85+
86+
return true;
87+
}
88+
89+
function uploadProgress(file, bytesLoaded, bytesTotal) {
90+
try {
91+
var percent = Math.ceil((bytesLoaded / bytesTotal) * 100);
92+
93+
var progress = new FileProgress(file, this.customSettings.progressTarget);
94+
progress.setProgress(percent);
95+
progress.setStatus(lang.fileUploading);
96+
} catch (ex) {
97+
this.debug(ex);
98+
}
99+
}
100+
101+
102+
function uploadError(file, errorCode, message) {
103+
try {
104+
var progress = new FileProgress(file, this.customSettings.progressTarget);
105+
progress.setError();
106+
//progress.toggleCancel(false);
107+
108+
switch (errorCode) {
109+
case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
110+
progress.setStatus(lang.netError + message);
111+
this.debug("Error Code: HTTP Error, File name: " + file.name + ", Message: " + message);
112+
break;
113+
case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
114+
progress.setStatus(lang.failUpload);
115+
this.debug("Error Code: Upload Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
116+
break;
117+
case SWFUpload.UPLOAD_ERROR.IO_ERROR:
118+
progress.setStatus(lang.serverIOError);
119+
this.debug("Error Code: IO Error, File name: " + file.name + ", Message: " + message);
120+
break;
121+
case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
122+
progress.setStatus(lang.noAuthority);
123+
this.debug("Error Code: Security Error, File name: " + file.name + ", Message: " + message);
124+
break;
125+
case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
126+
progress.setStatus(lang.fileNumLimit);
127+
this.debug("Error Code: Upload Limit Exceeded, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
128+
break;
129+
case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:
130+
progress.setStatus(lang.failCheck);
131+
this.debug("Error Code: File Validation Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
132+
break;
133+
case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
134+
// If there aren't any files left (they were all cancelled) disable the cancel button
135+
// if (this.getStats().files_queued === 0) {
136+
// document.getElementById(this.customSettings.cancelButtonId).disabled = true;
137+
// }
138+
progress.setStatus(lang.fileCanceling);
139+
progress.setCancelled();
140+
break;
141+
case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
142+
progress.setStatus(lang.stopUploading);
143+
break;
144+
default:
145+
progress.setStatus(lang.unknownError + errorCode);
146+
this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
147+
break;
148+
}
149+
} catch (ex) {
150+
this.debug(ex);
151+
}
152+
}
153+
154+
function uploadComplete(file) {
155+
//alert(file);
156+
// if (this.getStats().files_queued === 0) {
157+
// document.getElementById(this.customSettings.cancelButtonId).disabled = true;
158+
// }
159+
}
160+
161+
// This event comes from the Queue Plugin
162+
function queueComplete(numFilesUploaded) {
163+
var status = document.getElementById("divStatus");
164+
var num = status.innerHTML.match(/\d+/g);
165+
status.innerHTML = ((num && num[0] ?parseInt(num[0]):0) + numFilesUploaded) +lang.statusPrompt;
166+
}

dialogs/video/video.css

Lines changed: 91 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,4 +56,94 @@ fieldset input.txt{
5656
label.url{font-weight: bold;margin-left: 5px;color: #06c;}
5757
#videoFloat div{cursor:pointer;opacity: 0.5;filter: alpha(opacity = 50);margin:9px;_margin:5px;width:38px;height:36px;float:left;}
5858
#videoFloat .focus{opacity: 1;filter: alpha(opacity = 100)}
59-
span.view{display: inline-block;width: 30px;float: right;cursor: pointer;color: blue}
59+
span.view{display: inline-block;width: 30px;float: right;cursor: pointer;color: blue}
60+
61+
62+
63+
/* upload video */
64+
#fsUploadProgress{float:left;}
65+
#upload_alignment div{cursor:pointer;opacity: 0.5;filter: alpha(opacity = 50);margin:9px;_margin:5px;width:38px;height:36px;float:left;}
66+
#upload_alignment .focus{opacity: 1;filter: alpha(opacity = 100)}
67+
#fsUploadProgress{margin-top:15px;}
68+
#upload_left { width:412px; float:left; padding-left:10px; }
69+
#upload_left .controller { height: 30px; clear: both; }
70+
#uploadVideoInfo{margin-top:20px;float:right;padding-right:8px;}
71+
72+
#divStatus {display:inline-block; width:336px;color: #aaa;font-size: 12px; }
73+
#startUpload{cursor: pointer;display: inline-block; width: 100px;height: 30px;float: right;}
74+
div.fieldset {
75+
border: 1px solid #afe14c;
76+
padding: 10px 10px;
77+
width: 390px;
78+
height: 250px;
79+
border-color: #CCCCCC;
80+
overflow-y: auto;
81+
margin-bottom: 8px;
82+
}
83+
div.fieldset span.legend{position: relative;top:-20px;}
84+
.progressWrapper { width: 380px; overflow: hidden; }
85+
.progressContainer {
86+
margin: 0 0px 5px 0;
87+
margin-bottom:10px;
88+
border: solid 1px #E8E8E8;
89+
background-color: #F7F7F7;
90+
overflow: hidden;
91+
}
92+
.message {
93+
margin: 1em 0;
94+
padding: 10px 20px;
95+
border: solid 1px #FFDD99;
96+
background-color: #FFFFCC;
97+
overflow: hidden;
98+
}
99+
.red {
100+
border: solid 1px #B50000;
101+
background-color: #FFEBEB;
102+
}
103+
.green {
104+
border: solid 1px #DDF0DD;
105+
background-color: #EBFFEB;
106+
}
107+
.blue {
108+
border: solid 1px #CEE2F2;
109+
background-color: #F0F5FF;
110+
}
111+
.progressName {
112+
font-size: 10px;
113+
color: #555;
114+
width: 360px;
115+
height: 14px;
116+
text-align: left;
117+
white-space: nowrap;
118+
overflow: hidden;
119+
}
120+
.progressBarInProgress,
121+
.progressBarComplete,
122+
.progressBarError {
123+
font-size: 0;
124+
width: 0%;
125+
height: 2px;
126+
background-color: blue;
127+
margin-top: 2px;
128+
}
129+
.progressBarComplete {
130+
width: 100%;
131+
background-color: green;
132+
visibility: hidden;
133+
}
134+
.progressBarError {
135+
width: 100%;
136+
background-color: red;
137+
visibility: hidden;
138+
}
139+
a.progressCancel {
140+
font-size: 0;
141+
display: block;
142+
height: 14px;
143+
width: 14px;
144+
background: url(../../themes/default/images/cancelbutton.gif) -14px 0 no-repeat ;
145+
float: right;
146+
}
147+
a.progressCancel:hover { background-position: 0 0; }
148+
.progressBarStatus { margin-top: 2px; width: 337px; font-size: 7pt; text-align: left; white-space: nowrap; }
149+
.swfupload { vertical-align: top; }

0 commit comments

Comments
 (0)