Hi,

It’s awesome to know that you decided to purchase CloudVideo – Self Host Video WordPress plugin with Advertising. No doubts, you will join our happy customers community in seconds!
Won’t make any mistake here, because our detailed documentation will guide you. Please be sure to check it out before getting started. We have outlined all kinds of necessary information and keep them easy-to-read-and-follow. Our plugins are dedicated to WordPress platform, so we assume that you have already WordPress installed and ready to go.

To install CloudVideo – Self Host Video WordPress plugin with Advertising – your powerful plugin to make Video WordPress site, you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions in WordPress Codex. Below are all the useful links for WordPress information:

To use CloudVideo – Self Host Video WordPress plugin with Advertising, you must be running WordPress 5.0 or higher, PHP 7.4 or higher, and MySQL 5.6 or higher. We have tested it with Mac, Windows and Linux. Below is a list of items you should ensure your host can comply with.

After purchasing CloudVideo – Self Host Video WordPress plugin with Advertising, please download the package from CodeCanyon. In the package, you can find things like documentation, license, zipped file with plugin files and folder with plugin files. Please unpack the whole package after downloading it from CodeCanyon.

• Step 1: Navigate to Plugins >> Add New
• Step 2: Click  Upload Plugin >> Choose File
• Step 3: Navigate the .zip file on your computer and click “Install Now”
• Step 4: Activate the newly installed plugin by clicking the Activate Plugin button.

Note: If you have any problem when installing CloudVideo – Self Host Video WordPress plugin with Advertising via WordPress upload please contact us at our support forum or email harutheme@gmail.com.

SKIP THIS STEP if you have already successfully uploaded CloudVideo – Self Host Video WordPress plugin with Advertising via WordPress

• Step 1: BACKUP YOUR FILES! Should do it before set up anything, this is always the safest. You can use this plugin:  https://wordpress.org/plugins/duplicator/
• Step 2: Unzip the cloudvideo.zip file (usually is Extract Here if you use WinZip or 7Zip).
• Step 3:  Login into your hosting server via an FTP client tool (We recommended to use FileZilla).
• Step 4: Upload cloudvideo plugin folder into wp-content/plugins folder on your server.
• Step 5: Go to Plugins >> Installed Plugins and choose new plugin CloudVideo has just installed and clicking the Activate button to active.
• Step 6: Once your plugin is installed and active you will get a prompt at the top of your Dashboard.

(More details you can see it in topic update theme manual (similar with update plugins): https://harutheme.com/forums/topic/manual-update-wordpress-theme-via-ftp/)

• To display views our plugin compatible with Post Views Counter plugin here: https://wordpress.org/plugins/post-views-counter/

This is overview user guide of our CloudVideo – Self Host Video WordPress plugin with Advertising. More details please read sections below.

How Administrator manage Video WordPress site.

4.1.1. Create Pages

When you active our plugins these pages below will auto created. However if they haven’t been created, you need create some required pages for our plugin:

• Create Watch Later page with content: [haru_watch_later]

These pages will be to use in CloudVideo Settings below.

4.1.2. How to use custom posttype

As you see  you can create posttype:

• Create Videos

4.1.3. How to use CloudVideo Settings

From here you can set options to show all functions and layout of Cloudvideo – Self Host Video WordPress plugin with Advertising for all custom posttype.

4.1.4. How to use Shortcode

To help administrator of  Video WordPress site easy show what they want. We created a list of Shortcode with Parameters for easy setup.

Step 1: Please follow section 6 of this document to see a list of shortcode and generate the shortcode you want to use. Example: Watch Later element shortcode:

[haru_watch_later_element layout='default' align='left']

Step 2: Example use Text Block Shortcode in WP Bakery Page Builder or use Shortcode widget of Elementor

How User use Video WordPress site.

4.2.1. Guest User

Guest User can

• View videos, …
• Add videos to Watch Later list
• Rating (Like/Dislike) video depend on settings allow or not at CloudVideo settings.

You can change Custom Posttypes slug in Settings -> Permalink -> CloudVideo Permalink Slug section

5.1.1. Videos List

Here are video list after created:

5.1.2. Single Video

Single Video Meta

Visible Meta

• Title
• Content
• Category
• Tags
• Labels
• Featured Image
• Source Server: now support Self Host videos.
• Video URL or Video Upload
• Video Duration
• Video VTT: VTT Text Track & VTT Thumbnails (please read section 10 for more detail)
• Fake Like/Dislike
• Fake View (require installed Post Views Counter plugin)

Hidden Meta

• Like/Dislike
• View (require installed Post Views Counter plugin)

5.2.1. Video Reports

Here are Video Reports list after user reported:

Administrator or manager can easy see user report video or video got reported to check.

5.2.2. Single Video Report

Single Video Report Meta

Visible Meta

• Title
• Report Content

In this section we’ll introduce detail about each shortcode in our plugin.

6.1.1 Video List Categories

[haru_video_list_category layout='default' title='' count='on']

Parameters:

• layout: default
• title: String
• orderby:
• count: off or on
• hierarchical: off or on
• show_children_only: off or on
• hide_empty: off or on
• max_depth: Number
• extra_class:

Demo link: https://demo.harutheme.com/cloudvideo/list-video-categories/

6.1.2. Video Search

[haru_video_search layout='default' title='' extra_class='']

Parameters

• layout: default
• title: String
• extra_class:

Demo link: https://demo.harutheme.com/cloudvideo/video-search/

6.1.3. Video Category

[haru_video_category title='Featured Videos' layout='default' columns='2' categories='' posts_per_page='2' orderby='date' order='DESC' filter='show' filter_all='hide' view_more='arrow' ajax_arrow='show' extra_class='']

Parameters

• layout: default
• title: String
• columns: from 1 to 5
• categories: video category IDs
• posts_per_page: Number
• orderby: date or title
• order: DESC or ASC
• filter: show or hide
• filter_all: show or hide
• view_more: arrow or button
• ajax_arrow: show or hide
• extra_class:

Demo link: https://demo.harutheme.com/cloudvideo/video-ajax-categories/

6.1.4. Video Single Category

[haru_video_category_single layout='default' columns='2' categories='4' posts_per_page='3' orderby='date' order='DESC' filter='show' filter_all='hide' view_more='arrow' extra_class='']

Parameters

• layout: default
• title: String
• categories: video category ID
• posts_per_page: Number
• orderby: date or title
• order: DESC or ASC
• view_more: arrow or button
• extra_class:

Demo link: https://demo.harutheme.com/cloudvideo/video-ajax-single-category/

6.1.5. Video Top

[haru_video_top layout='default' categories='4' posts_per_page='3' orderby='like' order='DESC' view_more='arrow' extra_class='']

Parameters

• layout: default
• title: String
• categories: video category ID
• posts_per_page: Number
• orderby: date or like, dislike, view
• order: DESC or ASC
• view_more: arrow or button
• extra_class:

Demo link: https://demo.harutheme.com/cloudvideo/video-top/

6.1.6. Video Order

[haru_video_order layout='default' order_tabs='new,view,like,random' new_title='Latest' view_title='Most Viewed' like_title='Most Like' random_title='Random' categories='' columns='2' posts_per_page='2' ajax_arrow='show' extra_class='']

Parameters

• layout: default (Grid)
• order_tabs: string include: new, like, view, random separate by commas , . Example: ‘new,view,like,random‘
• new_title: title for New tab
• view_title: title for Most View tab
• like_title: title for Most Like tab
• random_title: title for Random tab
• categories: video category ID
• columns: from 1 to 5
• posts_per_page: Number
• ajax_arrow: show or hide
• extra_class:

Demo link: https://demo.harutheme.com/cloudvideo/video-order/

6.1.7. Video Order Single

[haru_video_order_single layout='default' order_tabs='random' random_title='Random Videos' categories='' columns='2' posts_per_page='2' ajax_arrow='show' extra_class='']

Parameters

• layout: default (Grid)
• order_tabs: string include: new, like, view, random . Example: random
• new_title: title for New tab
• view_title: title for Most View tab
• like_title: title for Most Like tab
• random_title: title for Random tab
• categories: video category ID
• columns: from 1 to 5
• posts_per_page: Number
• ajax_arrow: show or hide
• extra_class:

Demo link: https://demo.harutheme.com/cloudvideo/video-order-single/

6.1.8. Video Slideshow

[haru_video_slideshow layout='featured' title='Random Videos' data_source='categories' categories='' columns='2' posts_per_page='10' orderby='date' order='DESC' extra_class='']

Parameters

• layout: default (Slick), carousel-one (Carousel 1 Columns – Slick), carousel-one-2 (Carousel 1 Columns (2) – Slick), nav-thumbnail (Nav Thumbnail – Slick), featured (Featured – Slick), list-small (List Small (Background Dark) – Slick), info-featured (Carousel 1 Columns (Info Left) – Slick), list-fullwidth (List Fullwidth (Background Dark) – Slick), carousel-no-padding (Carousel No Padding – Slick)
• title: String
• data_source: categories or list_id
• categories: video category IDs
• video_ids: list of videos IDs. Example: 25,55,53
• posts_per_page: Number
• orderby: date or title
• order: DESC or ASC
• extra_class:

Demo link: https://demo.harutheme.com/cloudvideo/video-slideshow/

6.2.1. Watch Later Element

[haru_watch_later_element layout='default' align='left']

Parameters

• layout: default
• align: left or right

Demo link: https://demo.harutheme.com/cloudvideo/watch-later-element/

6.2.2. Watch Later List Videos

[haru_watch_later layout='default']

Parameters

• layout: default

Demo link: https://demo.harutheme.com/cloudvideo/watch-later-list-videos/

7.1.1. Special Pages Settings

• Watch Later Page

7.1.2. Other Settings

• Social Sharing

7.2.1. Player General Settings

• Video Player JS Library: support Video JS. We’ll research and update other player asap.
• Hide Player Controls: hide Video Player Controls. If you Enable this setting you need turn OFF Disable Player Autoplay & turn ON Player Muted
• Disable Player Autoplay: disable Video Autoplay. Please note Autoplay video must be muted if user not interactive with page.
• Player Muted: Video Player Muted. Please note Autoplay video must be muted if user not interactive with page
• Player Loop: Video Player Loop. Replay videos when end.
• Disable Player Playback Rate: Disable Video Playback Rate. Hide Playback Rates button in Controls.
• Player PictureInPicture Toggle: Video Player PictureInPicture. Show PictureInPicture button in Controls Bar.
• Player Seek Buttons: Video Player Seek Buttons. You can forward or back times of the video when playing.
• Player Download: Video Player Download Button. Allow user download the video when viewing.

7.2.2. Player Layout Settings

• Player Fluid Mode: Video Player Fluid Mode. Keeps the player sized to a particular aspect ratio.
• Player Ratio: Set Ratio of Player. Please select Auto to use Default Video size.
• Player Fill Mode: Video Player Fill Mode. Fill mode will make the player fit and fill out its container.
• Player Responsive Mode: Video Player Responsive Mode. Responsive mode will make the player’s UI customize itself based on the size of the player.

7.2.2. Player Layout Settings

• Player Fluid Mode: Video Player Fluid Mode. Keeps the player sized to a particular aspect ratio.
• Player Ratio: Set Ratio of Player. Please select Auto to use Default Video size.
• Player Fill Mode: Video Player Fill Mode. Fill mode will make the player fit and fill out its container.
• Player Responsive Mode: Video Player Responsive Mode. Responsive mode will make the player’s UI customize itself based on the size of the player.

7.2.3. WaterMark Settings

• Video Player WaterMark: Enable WaterMark for videos.
• WaterMark Type: Set WaterMark type use Text or Image.
• WaterMark Text: Set WaterMark text.
• WaterMark Image: Set WaterMark image.
• WaterMark Link: Set WaterMark link. Please leave empty if you don’t want to use link for WaterMark!

7.2.4. Player Other Settings

• Video Player Popup: This option allow QuickView videos in Popup.
• Hide Like/Dislike: Hide Like/Dislike buttons. Also hide Like/Dislike statistic bar.
• None Register User Rating: Allow None Register user Rating (Like/Dislike)
• Hide Watch Later: Hide Watch Later button in both Single Video & List Videos page.
• Hide Report: Hide Report button
• Hide Share: Hide Share button

7.15.1. Advertising

You can set advertising for all videos here. This setting can be override in ads settings of each video. Please see section 9 to understand how to setup Advertising for videos.

• Video Advertising: Enable Video Advertising for all videos. This option can be override by Video Advertising settings in each video.
• Video adTagUrl: Set video adTagUrl( allow Google Ima Ads & VAST/VPAID Ads). Reference here: https://support.google.com/admanager/answer/1663924?hl=en. You can see example here: https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/tags. This option can be override by Video Advertising settings in each video.

7.4.1. Archive Videos Settings

• Breadcrumbs: show/hide breadcrumbs
• Breadcrumbs Width: FullWidth, Container or Large Container
• Layout Width: FullWidth, Container or Large Container
• Archive Layout: No Sidebar, Left Sidebar, Right Sidebar or 2 Sidebars
• Sidebar Right or Sidebar Left: manage in Appearance -> Widgets
• Archive Video Columns
• Number of videos per page
• Paging Style: Number, Loadmore or Infinite Scroll

7.4.2. Single Video Settings

• Breadcrumbs: show/hide breadcrumbs
• Breadcrumbs Width: FullWidth, Container or Large Container
• Single Style: Set Style for Single Video page. This option can be override by Layout Style setting of each Video.

We added Appearance Settings to help customer change Color and Design.

7.12.1. Color

• You can set: Primary Color, Heading Color, Text Color, Text Color Secondary, Border Color, Black Color, Gray Color

7.12.2. Other

• You can set: Border Radius, Border Radius Small, Border Radius Tiny

You can find and use all widgets of CloudVideo – Self Host Video WordPress plugin in Appearance -> Widgets:

You can see all widget start with Haru string like: Haru Videos, Haru Top Video, Haru Video Search,…

8.1.1. Video Search

8.1.2. Video Categories

8.1.3. Video Tags

8.1.4. TOP Videos

8.1.5. Videos List

First of all you need to Sign up for Ad Manager follow this:

https://support.google.com/admanager/answer/7084151?hl=en

Understand more about VAST & VPAID:

VAST vs VPAID: What They Are, How They Work, Differences [+ More]

You can see Example Ads Tag here:

You can see example here: https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/tags

9.1. Setup Ads for all videos

If you want setup Advertising for all videos you can go to CloudVideo Settings -> Advertising then Enable Video Advertising & insert Video adTagUrl like this screenshot.

10.2. Setup Ads for each video

You need to edit video you want to setup Ads (will override setup in CloudVideo Settings -> Advertising settings)

10.1. Setup Web Video Text Track

To create a VTT file please read in tutorial:

https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API

Please use a Text Editor tool to create this file.

10.2. Setup VTT Thumbnail

10.2.1. Single image thumbnails

It’s simple. For each thumbnail you prepare single image in JPG, PNG or GIF format. Though it’s suggested to keep the same size for each image, it can be also different size, but it should keep the same display ratio. In VTT file you just type image path (relative or absolute) for each time cue.

WEBVTT 

00:00.000 --> 00:05.000
/assets/thumbnail_1.jpg

00:05.000 --> 00:10.000
/assets/thumbnail_2.jpg

00:10.000 --> 00:15.000
/assets/thumbnail_3.jpg

00:15.000 --> 00:20.000
/assets/thumbnail_4.jpg

10.2.2. Thumbnails from sprite image

To limit file size, load delay and server requests, thumbnail plugin supports Thumbnail Sprites; multiple thumbnails tilled into a single image. You need to create a image file with all thumbnai like this:

In the VTT file, the individual thumbnails are identified by appending their coordinates to the thumbnail URL:

WEBVTT 

00:00.000 --> 00:05.000
/assets/thumbnails.jpg#xywh=0,0,160,90

00:05.000 --> 00:10.000
/assets/thumbnails.jpg#xywh=0,160,0,90

00:10.000 --> 00:15.000
/assets/thumbnails.jpg#xywh=0,320,0,90

00:15.000 --> 00:20.000
/assets/thumbnails.jpg#xywh=0,480,0,90

For example, you can see file here:

https://image.mux.com/XAUyVQNQUpHCFH2qXYgi3JOcmGs4xovhczrhHQsgqJ4/storyboard.vtt

Some tutorial to help you create m3u8 file for streaming videos:

https://jamsrworld.com/posts/how-to-create-create-m3u8-playlist

https://mayur-solanki.medium.com/how-to-create-mpd-or-m3u8-video-file-from-server-using-ffmpeg-97e9e1fbf6a3

https://docs.peer5.com/guides/production-ready-hls-vod/

https://www.videoconverterfactory.com/tips/create-m3u8-playlist-for-iptv.html

Our plugin is a WPML – compatible and multi language ready plugin. We suggest 2 ways to translate our plugin.

1. Use Loco Translate plugin. You can follow this topic tutorial: https://harutheme.com/forums/topic/how-to-translate-wordpress-theme-or-plugin/
2. Manual translate using POEdit

Step and step to translate we will have a post on forum asap.

Thank you for purchasing our plugin. If you have any questions that are beyond the scope of this documentation, please feel free to us via email harutheme@gmail.com or admin@harutheme.com. Or create topic here: https://harutheme.com. Thanks so much.

Our plugin can customize template display in theme or child theme. Please note in our plugin all templates display in wp-content/plugins/cloudvideo/templates/cloudvideo/ folder.

You can do it follow step to step below:

Step 1: Copy template you want to customize from cloudvideo folder to your theme keep similar structure

Example: we’ll customize template display of Single Video in: cloudvideo/videos/single-video.php

You will see structure like this:

You need copy similar structure of cloudvideo folder to theme (pricom):

Step 2: customize template display of single-video.php in theme:

Step 3: see result at Frontend

Please note: with child theme you can do similar steps.

In this section we’ll listing all functions in our plugin for help developer can customized our plugin.

Updating…

Version 1.0.1:

• []

Version 1.0.0:

• First release