mirror of
https://github.com/mediacms-io/mediacms.git
synced 2025-11-06 07:28:53 -05:00
e7ae2833d9
* Test Messing around to figure out docker and whatnot * Revert "Test" This reverts commit 43b76932c5874a70d3ec86d653961ab8c734e0a0. * Update docker dev yaml Update the docker to the environement with the latest version of selenium (and their new arguments), and to be on firefox * Timestamp on play Adds the a one time event that jumps to a timestamp if there is a t parameter in the URL * Timestamp when sharing DRAFT First draft to show the timestamp when sharing. Missing checkbox and appending the get param to shown link * Checkbox and update share url Checkbox show a clean timestamp and the media URL updates with the correct timestamp upon selection * Cleaning before PR removing un-necessary modified files * Clean up before PR - remove statics * Timestamp in comments Parse the comments to wrap timestamps with an appropriate anchor * Forgotten comments and console.logs * Last touch for PR - Cleaning media.js for PR - Using MediaPageStore instead of window.location when wrapping the timestamp in comments * Screenshot Adding the screenshot for the user_docs * PR amends Amending VideoPlayer componnent to take check if the Get param 't' is a number, and to keep it within the duration of the video. Required to change the listener from 'play' to 'loadedmetadata' to have access to the video duration (otherwise it was too early) Also changed the User_doc file to inform users of the timestamp function
234 lines
6.0 KiB
Markdown
234 lines
6.0 KiB
Markdown
# Users documentation
|
|
|
|
## Table of contents
|
|
- [Uploading media](#uploading-media)
|
|
- [Downloading media](#downloading-media)
|
|
- [Adding captions/subtitles](#adding-captionssubtitles)
|
|
- [Search media](#search-media)
|
|
- [Using Timestamps for sharing](#-using-timestamp)
|
|
- [Share media](#share-media)
|
|
- [Embed media](#embed-media)
|
|
- [Customize my profile options](#customize-my-profile-options)
|
|
|
|
## Uploading media
|
|
|
|
### How to Upload Media
|
|
|
|
Uploading media is as simple as clicking the _Upload Media_ button, waiting for media to upload, and then clicking the media to add metadata (title, description etc.) by filling out a form.
|
|
|
|
#### Click Upload Button
|
|
|
|
Click the _Upload Media_ button from the right-side of the screen at the top:
|
|
|
|
<p align="left">
|
|
<img src="./images/Click-Upload-Media-button.png"/>
|
|
</p>
|
|
|
|
#### Upload Page
|
|
|
|
Clicking the _Upload Media_ button takes you to the upload page at a URL like this:
|
|
|
|
https://demo.mediacms.io/upload
|
|
|
|
#### Click Browse Button
|
|
|
|
Here you should click the _"Browse your files"_ button (or drag and drop a file from your desktop):
|
|
|
|
<p align="left">
|
|
<img src="./images/Click-Browse-button.png"/>
|
|
</p>
|
|
|
|
#### Select media file and click Open button
|
|
|
|
Select the media file that you want to upload and click the _"Open"_ button:
|
|
|
|
<p align="left">
|
|
<img src="./images/Select-Media-File-Click-Open.png"/>
|
|
</p>
|
|
|
|
#### Wait for file to upload
|
|
|
|
Wait for the file to finish uploading:
|
|
|
|
<p align="left">
|
|
<img src="./images/Uploading.png"/>
|
|
</p>
|
|
|
|
#### Pause uploading
|
|
|
|
If you want you can pause upload by clicking _Pause button_:
|
|
|
|
<p align="left">
|
|
<img src="./images/Pause-button.png"/>
|
|
</p>
|
|
|
|
#### Continue uploading
|
|
|
|
Continue upload by clicking _Continue button_:
|
|
|
|
<p align="left">
|
|
<img src="./images/Continue-button.png"/>
|
|
</p>
|
|
|
|
#### Wait for media to finish Processing
|
|
|
|
Wait for the media file to finish Processing:
|
|
|
|
<p align="left">
|
|
<img src="./images/Processing.png"/>
|
|
</p>
|
|
|
|
#### Click View media button
|
|
|
|
Click the View media button to open the media page:
|
|
|
|
<p align="left">
|
|
<img src="./images/Click-View-media-button.png"/>
|
|
</p>
|
|
|
|
#### Media will be in the encoding queue
|
|
|
|
The media will take some time to finish encoding (MediaCMS will transcode the file to several formats and resolutions). Meanwhile you can edit the media file to add metadata.
|
|
|
|
#### Click Edit Media button
|
|
|
|
Click the EDIT MEDIA button to add metadata and configure the poster image:
|
|
|
|
<p align="left">
|
|
<img src="./images/Click-Edit-Media-button.png"/>
|
|
</p>
|
|
|
|
#### Add Metadata (Summary, Description etc.)
|
|
|
|
Make sure you fill in all the required fields, and try to complete as many of the non-required fields as possible. This ensures the database is populated with useful meta-data to help others access useful information about you and your video.
|
|
|
|
<p align="left">
|
|
<img src="./images/Edit-Media-Metadata-1.png"/>
|
|
</p>
|
|
|
|
<p align="left">
|
|
<img src="./images/Edit-Media-Metadata-2.png"/>
|
|
</p>
|
|
|
|
|
|
|
|
## Downloading media
|
|
|
|
MediaCMS offers a configurable option whereby users can make their media files available for download. Downloads are available for transcoded files, and the original file.
|
|
|
|
#### How To Enable Download
|
|
|
|
Visit the media view page and choose the EDIT MEDIA button.
|
|
|
|
Select the checkbox for "Allow Downloads"
|
|
|
|
#### How To Download Media
|
|
|
|
Visit the media view page and click the DOWNLOAD button below the video player.
|
|
|
|
<p align="left">
|
|
<img src="./images/Click-Download-Button.png">
|
|
</p>
|
|
|
|
Choose the version you wish to download - a transcoded file or the original file:
|
|
|
|
<p align="left">
|
|
<img src="./images/Click-version-download.png">
|
|
</p>
|
|
|
|
Choose Save File and click the OK button.
|
|
|
|
<p align="left">
|
|
<img src="./images/Save-File.png">
|
|
</p>
|
|
|
|
|
|
|
|
## Adding captions/subtitles
|
|
|
|
With MediaCMS you can add subtitles/captions to your video by uploading a subtitles file in the popular .vtt format.
|
|
|
|
### Visit Media Page & Click EDIT SUBTITLE Button
|
|
|
|
Visit the "single media page" for the media you wish to add subtitles/captions to and click the EDIT SUBTITLES button:
|
|
|
|
<p align="left">
|
|
<img src="./images/Click-EDIT-SUBTITLE.png"/>
|
|
</p>
|
|
|
|
### Upload Subtitles in .vtt Format
|
|
|
|
Click the Language menu to select the correct language for your Subtitles/Captions file:
|
|
|
|
<p align="left">
|
|
<img src="./images/Click-Subtitle-Language-Menu.png"/>
|
|
</p>
|
|
|
|
Choose the correct Language for your file:
|
|
|
|
<p align="left">
|
|
<img src="./images/Subtitles-captions1.png"/>
|
|
</p>
|
|
|
|
Click Browse to find a subtitles/captions file on your computer (if your file is not in the .vtt format, you may find a conversion service on the Internet):
|
|
|
|
<p align="left">
|
|
<img src="./images/Subtitles-captions2.png"/>
|
|
</p>
|
|
|
|
Choose a .vtt subtitles/captions file from your computer:
|
|
|
|
<p align="left">
|
|
<img src="./images/Subtitles-captions3.png"/>
|
|
</p>
|
|
|
|
Click the Add button to add the file to your media:
|
|
|
|
<p align="left">
|
|
<img src="./images/Click-ADD-button.png"/>
|
|
</p>
|
|
|
|
### View Subtitles/Captions in Video Player
|
|
|
|
You can now watch the captions/subtitles play back in the video player - and toggle display on/off by clicking the CC button:
|
|
|
|
<p align="left">
|
|
<img src="./images/CC-display.png"/>
|
|
</p>
|
|
|
|
## Using Timestamps for sharing
|
|
|
|
### Using Timestamp in the URL
|
|
|
|
An additionnal Get parameter 't' can be added in video URL's to start the video at the given time. The starting time has to be given in seconds.
|
|
|
|
<p align="left">
|
|
<img src="./images/Demo1.png"/>
|
|
</p>
|
|
|
|
Additionnally the share button has an option to generate the URL with the timestamp at current second the video is.
|
|
|
|
<p align="left">
|
|
<img src="./images/Demo2.png"/>
|
|
</p>
|
|
|
|
### Using Timestamp in the comments
|
|
|
|
Comments can also include timestamps. They are automatically detected upon posting the comment, and will be in the form of an hyperlink link in the comment. The timestamps in the comments have to follow the format HH:MM:SS or MM:SS
|
|
|
|
<p align="left">
|
|
<img src="./images/Demo3.png"/>
|
|
</p>
|
|
|
|
## Search media
|
|
How search can be used
|
|
|
|
## Share media
|
|
How to share media
|
|
|
|
## Embed media
|
|
How to use the embed media option
|
|
|
|
## Customize my profile options
|
|
Customize profile and channel
|