With the Media Manager you can
- Upload audio and video files
- Create folders
- Rename, cut, copy, paste and delete folders, video and audio files.
- Embed audio and video into articles.
- Video and Audio are shown in your content as a resizable placeholder.
- Insert Youtube, Vimeo and Dailymotion videos with just the video url.
- Create audio and video lightbox popups for JCE MediaBox
Media Manager Interface
The Media Manager interface, like all the Manager plugins (Image Manager, File Manager etc.), consists of 2 sections, the Attributes section, and the File Browser section.
Attributes
This section is divided into 4 parts, each accessible by clicking on the named tab. The default tab display is of the File section, which contains the fields that represent the main media attributes of the currently selected article media item, or the item to be inserted into the article.
File
Set the most common attributes for the media item including URL, Description and Dimensions. See Inserting Media
Media Options
Options specific to the media type being inserted. See Media Options
Advanced
Set advanced attributes for the image. See Advanced Options
Popups
Create and manage lightbox popups for audio and video. See Creating Popups
File Browser
The Media Manager File Browser has the same basic features as the other Manager plugins, with tools for creating new folders, uploading images and deleting, renaming, copying and moving files and folders. For more information on the File Browser features, see the File Browser section.
Inserting Media
Inserting and updating uploaded audio and video is done in a similar way to inserting images with the Image Manager.
To insert media
- Select an audio or video file to insert. The URL field will be filled with the file URL, and in most cases the Dimensions fields will be filled with the video dimensions.
- Adjust properties for the media item, such as the Alignment or Margin.
- Adjust the Media Options for the media type, such as Autoplay or Loop.
- Click the Insert button.
The media item will be inserted as placeholder and can be resized and positioned just like an image. The placeholder is converted to <video>, <audio>, <object> or <iframe> code in the Code tab or when you save the article.
Inserting a Youtube, Vimeo or Dailmotion video
For Youtube, Vimeo and Dailymotion videos, just copy the URL for the video from the browser address bar and paste it in to URL field. The URL is automatically converted into the right format, and the default dimensions inserted. Use the Media Options tab to set various options for the video and click the Insert button.
Editing media
Click on the media placeholder to select it, then click the Media Manager button 
to open the Media Manager dialog. Once the required changes have been made, click on the Update button to update the media item and close the dialog.
The media placeholder can be resized, dragged and copy and pasted like an image. To drag resize the media item, click on the placeholder to select it, then drag one of the handles to resize.
Deleting Media
Click on the placeholder to select it, then click the Delete button on your keyboard.
Creating Popups
Creating lightbox popups for audio and video can be done using the Popups tab.
A compatible lightbox extension, such as JCE MediaBox, must be installed and enabled to use this feature.
To create popup
- Before opening the Media Manager, select an image or text to attach the popup to.
- Click on the Media Manager button to open the Media Manager.
- Select the audio or video file to insert, or paste in a URL. See Inserting Media.
- Click on the Popups tab, to view the Popups options.
- Select a Popup Type, eg: JCE MediaBox Popups, to enable the popup and view the popup options.
- Set the popup options as required, such as the Title and Dimensions.
- Click the Insert button.
The selected image or text will now have the popup link applied to it.
Media Options
The Media Options tab is used to set various media specific options depending on the media type selected. For a description of each media option by media type, please see the links below (the Media Manager may not include all options listed)
HTML5 Video
Descriptions of these options is taken from the Mozilla Developer Wiki - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video - and is used under the terms of the http://creativecommons.org/licenses/by-sa/2.5/">Creative Commons Attribution-ShareAlike license
Autoplay
A Boolean attribute; if specified, the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data.
Controls
If this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.
Loop
A Boolean attribute; if specified, we will, upon reaching the end of the video, automatically seek back to the start.
Mute
A Boolean attribute which indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is false, meaning that the audio will be played when the video is played.
Preload
This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values:
- none: hints that either the author thinks that the user won't need to consult that video or that the server wants to minimize its traffic; in others terms this hint indicates that the video should not be cached.
- metadata: hints that though the author thinks that the user won't need to consult that video, fetching the metadata (e.g. length) is reasonable.
- auto: hints that the user needs have priority; in others terms this hint indicated that, if needed, the whole video could be downloaded, even if the user is not expected to use it.
- the empty string: which is a synonym of the auto value.
If not set, its default value is browser-defined (i.e. each browser can choose its own default value), though the spec advises it to be set to metadata.
Poster
A URL indicating a poster frame to show until the user plays or seeks. If this attribute isn't specified, nothing is displayed until the first frame is available; then the first frame is displayed as the poster frame.
The poster image can be selected by clicking on the File Browser icon on the right of the text box.
Source
A URL to an alternate format of the video file, eg: ogg, webm etc.
To set a source URL, click in the text box, then select the file from the File Browser list.
HTML5 Audio
Descriptions of these options is taken from the Mozilla Developer Wiki - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio - and is used under the terms of the http://creativecommons.org/licenses/by-sa/2.5/">Creative Commons Attribution-ShareAlike license
Autoplay
A Boolean attribute; if specified (even if the value is "false"!), the audio will automatically begin to play back as soon as it can do so without stopping to finish loading the data.
Controls
If this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback.
Loop
A Boolean attribute, when specified, will automatically seek back to the start upon reaching the end of the audio.
Preload
This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values:
- none: hints that either the author thinks that the user won't need to consult that audio or that the server wants to minimize its traffic; in others terms this hint indicates that the audio should not be cached;
- metadata: hints that though the author thinks that the user won't need to consult that audio, fetching the metadata (e.g. length) is reasonable;
- auto: hints that the user needs have priority; in others terms this hint indicated that, if needed, the whole audio could be downloaded, even if the user is not expected to use it;
- the empty string: which is a synonym of the auto value.
If not set, its default value is browser-defined (i.e. each browser can choose its own default value), though the spec advises it to be set to metadata.
Source
A URL to an alternate format of the audio file, eg: ogg, webm etc.
To set a source URL, click in the text box, then select the file from the File Browser list.
Advanced Options
Various standard attributes can be set in the Advanced tab.
Styles
A list of inline css properties to be applied to the media item, eg: border: 1px solid red;
Classes
Select and apply css classes from your template stylesheet. Additional class names, seperated by a space, can be typed into the field.
Title
A descriptive title for the media item. This will show as a tooltip when the mouse cursor is placed over the media.
Id
Set a unique id attribute value for the media item.
Border
Create a border style on the media item with options for width, style and colour.
Controller Height
Height of the media player controller bar (if any). This will be applied to the total object height
Text or HTML
Optional text or HTML to include inside the media tag, eg:
<video src="/movie.mp4" width="400" height="300" controls="controls"> <p>Your browser does not support this video type</p> </video>
