- Getting Started
- Browser Support
- Languages Support
- Shortcuts
- Activation
- Examples
- Customize the Editor
- Use-cases
- Plugins
- APIs
- Development Frameworks
- Server Integrations
- Server SDKs
- Migration Guides
- Changelog
- Tutorials
Video Concept
Upload Video
For testing purposes, the Froala Rich Text Editor by default stores the videos temporarily as a Blob in the browser memory. While integrating the editor, you should upload them to your own server for privacy reasons, permanent storage and full control over them.
In this case you have to handle the video upload and storage using a server-side language yourself. This article is meant to help you understand how the editor's video upload works.
Upload Flow
-
Include the video plugin file.
Video is a plugin for the editor and the
video.min.js
file must be included before being able to use it.
-
Set the editor's video upload options.
When uploading videos, you can customize up to 6 parameters and 5 events:
•videoUploadParam
is the name of the parameter that contains the video file information in the upload request. The default value is "file" but you can change it to whatever name you want.
•videoUploadURL
is the URL where the upload request is being made.
•videoUploadParams
are additional params that are passed in the upload request to the server.
•videoUploadMethod
is the HTTP request type.
•videoMaxSize
is the maximum video size that can be uploaded.
•videoAllowedTypes
is an array with the video types allowed to be uploaded.
•video.beforeUpload
event is triggered before starting the upload request and it can be used to change the upload params or cancel the action.
•video.uploaded
event is triggered after a successfully video upload request, but before inserting the video in the editor.
•video.inserted
event is triggered after inserting the video into the editor.
•video.replaced
event is triggered after replacing the video into the editor.
•video.error
event is triggered if any errors occur during the upload process.
-
AJAX request from editor to the videoUploadURL link.
When an video is inserted into the WYSIWYG HTML editor, a HTTP request is automatically done to the server.
-
The server processes the HTTP request.
The server has to process the upload request, save the video and return a JSON containing a link to the uploaded video. The returned JSON needs to look like:
{ "link": "path/to/video.mp4" }
If you need help with the server side video upload process please check out the Froala SDKs.
-
The editor loads the video in browser.
When the request finishes, the editor will load the video. If the returned hashmap does not follow the right structure or the video cannot be loaded,
video.error
event is triggered.
The following snippet highlights how to initialize the Froala WYSIWYG HTML editor in order to upload videos.
<script>
new FroalaEditor('.selector', {
// Set the video upload parameter.
videoUploadParam: 'video_param',
// Set the video upload URL.
videoUploadURL: '/upload_video',
// Additional upload params.
videoUploadParams: {id: 'my_editor'},
// Set request type.
videoUploadMethod: 'POST',
// Set max video size to 50MB.
videoMaxSize: 50 * 1024 * 1024,
// Allow to upload MP4, WEBM and OGG
videoAllowedTypes: ['webm', 'jpg', 'ogg'],
events: {
'video.beforeUpload': function (videos) {
// Return false if you want to stop the video upload.
},
'video.uploaded': function (response) {
// Video was uploaded to the server.
},
'video.inserted': function ($img, response) {
// Video was inserted in the editor.
},
'video.replaced': function ($img, response) {
// Video was replaced in the editor.
},
'video.error': function (error, response) {
// Bad link.
if (error.code == 1) { ... }
// No link in upload response.
else if (error.code == 2) { ... }
// Error during video upload.
else if (error.code == 3) { ... }
// Parsing response failed.
else if (error.code == 4) { ... }
// Video too text-large.
else if (error.code == 5) { ... }
// Invalid video type.
else if (error.code == 6) { ... }
// Video can be uploaded only to same domain in IE 8 and IE 9.
else if (error.code == 7) { ... }
// Response contains the original server response to the request if available.
}
}
});
</script>
Do you think we can improve this article? Let us know.