CloudVideo
Version: 1.0.0
Created by: HaruTheme
1. Introduction

Thank you for purchasing our plugin CloudVideo – Self Host Video WordPress plugin with Advertising.

CloudVideo – Self Host Video WordPress plugin with Advertising has been released which fully support for you to display your own Videos with Advertising from Google IMA or VAST, VPAID,… to help you earn money from Advertising with your videos. This plugin with many layout, options and beautiful CSS effect will help your site more attractive.
It is a fantastic plugin with many pre-build Shortcodes, … to help you manage your works.

Here are of some kind of Video WordPress Website you can create with our plugin:

  • VideoMaker, VideoGrapher to introduce their videos
  • Video Blog or personal Vlog website
  • Online Video course (video tutorials and video lessons)
  • Sharing Video website

If you want to suggest other features or options please post it on our Support site.

 

Feature List

  • Custom post type Videos to helps you easy manage your Videos
  • Support Video source from Self host will help your videos special.
  • Quickview Videos in Popup
  • Support Watch Later Videos Playlist (without Login)
  • Responsive layout for Archive and Single page (No Sidebar, 1 Sidebar or 2 Sidebar) with 3 Paging style: Navigation, Load More and Infinite Scroll
  • Easy customize template display use child theme
  • Pre-build shortcode and works with any theme
  • Works with any Page Builder
  • Support Rating (Like/Dislike) use user IP Address and Fake data Rating (Like/Dislike)
  • Support custom post type view count use Post View Counter plugin and Fake data View
  • Social Sharing network: Facebook, Twitter, Google, LinkedIn, Tumblr, Pinterest
  • Support widgets:  Top Videos, Search Video, Video Categories, Video Tags, …
  • Support 10+ shortcodes: Video Slideshow, Video Ajax Category, …
  • Easy to install
  • Easy to use and configure
  • Full responsive
  • And much more…

If you are satisfied with our CloudVideo – Self Host Video WordPress plugin with Advertising for WordPress, please take a moment to rate 5 stars and leave some sentences for review, it means a lot to us.

 

Thank you!

HaruTheme

2. Getting Started

2.1. Welcome

Hi,

It’s awesome to know that you decided to purchase CloudVideo – Self Host Video WordPress plugin with AdvertisingNo 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.

2.2. Wordpress Knowledge Base

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:

2.3. Plugin Requirements

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.

  • Check to ensure that your web host has the minimum requirements to run WordPress.
  • Always make sure they are running the latest version of WordPress.
  • You can download the latest release of WordPress from official WordPress website.
  • Always create secure passwords for FTP and Database.

Hosting is more secure when PHP applications, like WordPress, are running using your account’s username instead of the server’s default shared username (www or www-data). The most common way for hosting companies to do this is using PHP. Just ask your potential host if they run PHP or something similar.

Recommended PHP Configuration Limits

Many issues that you may run into such as: white screen, empty page content and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can do this on your own, or contact your web host and ask them to increase those limits to a minimum as follows:

  • max_execution_time: 360
  • max_input_time: 360
  • max_input_vars: 4000
  • memory_limit: 256M
  • post_max_size: 128M
  • upload_max_filesize: 128M
  • output_buffering: 4096

Here is topic tutorial to help you change PHP Limits: http://harutheme.com/forums/topic/how-to-change-php-settings-of-wordpress/

3. Installation

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

3.1. Install Plugin via WordPress Admin

  • 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.

3.2. Install Plugin via FTP Upload

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/)

3.3. Compatible plugins

4. How to use overview

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

4.1. Administrator

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

4.2. Frontend User

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.

5. Posttypes

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

5.1. Videos

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. Video Reports

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

6. Shortcodes

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

6.1. Video Shortcodes

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. Other Shortcodes

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. CloudVideo Settings

7.1. General Settings

7.1.1. Special Pages Settings

  • Watch Later Page

7.1.2. Other Settings

  • Social Sharing

 

7.2. Player Settings

7.2.1. Player General Settings

  • : 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 Loop: Video Player Loop. Replay videos when end.
  • 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.

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.

7.2.3. WaterMark Settings

  • : Enable WaterMark for videos.
  • WaterMark Type: Set WaterMark type use Text or Image.
  • WaterMark Text: Set WaterMark text.
  • WaterMark Image: Set WaterMark image.

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 button
  • Hide Share: Hide Share button

7.3. Advertising Settings

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 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. Video Settings

7.4.1. Archive Videos Settings

  • 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 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.

7.5. Appearance Settings

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

8. Widgets

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. Video

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

 

 

9. Setup Ads for Video

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. Setup VTT

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

12. WordPress Translation

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.

13. Plugin Support

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.

14. Custom Template

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.

15. Functions List

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

Updating…

16. Change Logs

Version 1.0.1:

  • []

Version 1.0.0:

  • First release

View more products from HaruTheme