“vCast Button Plugin for WordPress” Documentation v1.0
“vCast Button”
Created: 7/22/2014
By: Amor Avhad
Email: support@amoravhad.com
Thank you for purchasing vCast Button Plugin for WordPress. If you have any questions that are beyond the scope of this help file, please sign up for the support forums here. Thanks so much!
Table of Contents
- Quick Start Guide
- Configuring Settings
- Placement
- CSS Files and Structure
- JavaScript
- PHP Code
- Support
- Demo
A) Quick Start Quide - top
-
Configure HTML Tag(s) Containing Media
To start casting, first configure the HTML tags containing the video URL(s) you want to be sent to the Chromecast. Once set, you won't need to configure this again, since vCast will remember where to search for castable video URLs.
WordPress 3.5 and belowBefore WordPress 3.6, inserting an uploaded video into a post results in a clickable link with no player. To configure vCast, add a new entry in the list of HTML Tag(s) Containing Media. The vCast configuration screen should look like this:
HTML TAG: aTAG ATTRIBUTE: href
WordPress 3.6+
WordPress versions 3.6 and above support native video playback. This means inserting an uploaded video into a post results in a video player also inserted into the post automatically to playback the video. WordPress 3.6+ uses MediaElement.js as its default player for playing videos. MediaElement.js features HTML5 video. To configure vCast, add the <source> tag as a new entry in the list of HTML Tag(s) Containing Media. The vCast configuration screen should look like this:
HTML TAG: sourceTAG ATTRIBUTE: src
-
Set Video File Extension
Enter the file extension of the video file(s) you specified in step 1 when you configured the HTML Tag(s) Containing Media. For example, if the extension of the video file you uploaded to your WordPress library is .mp4, type mp4 (no period). If you have more than one file extension, you can enter them separated by the pipe character |
-
Set Search Location
Choose default option - WordPress Posts
-
Set Button Location
Choose default option - On WordPress Posts
-
Set Button Color
Set the background color to black using HTML syntax - "#000". This will change the vCast button color to black so that the button appears black throughout your website. NOTE: If you do not see the vCast button at first, it may be because the button is currently set to the default transparent background color. You can set vCast button to have a transparent background color at any time by specifying transparent for background color
Congratulations! You have successfully configured your vCast Button to play mp4 videos on your website. You should now see the vCast button appear on WordPress posts, whenever an mp4 video is detected like so:
Custom Integration Into Existing Player
While the vCast button is now configured and showing on your website, you may want to integrate the button into your existing video player in order to provide a better experience to visitors. The vCast button plugin can be configured this way by following steps 1 through 3 of this Quick Start Guide, then in step 4 when you are choosing where to place vCast button, you must select Inside specific HTML tag and attribute. Here you must provide the HTML element to act as parent container for the vCast button. You should have placed this HTML element in the existing video player's code before configuring this option. In most cases you will also want to set the background color to transparent for a more seamless integration
B) Configuration Settings - top
When vCast Button plugin has been installed successfully and activated in the Plugins screen in the Admin section, a new menu item is added to WordPress under Settings -> vCast Options
| HTML Tag(s) Containing Media: | Add the tag(s), specifying the tag attribute containing the video URL to be added to the playlist. Modify this field to add or remove video sources in your website that contain castable videos |
| Media File Extension(s): | Add the extension(s) of the video files to be detected and added to the media playlist. If you have a video with a dynamic URL that changes frequently, or a URL that does not have a file extension but has an identifiable signature, you can specify a regular expression using javascript syntax. Use the pipe character '|' as the separator between file extensions |
| Where to search for HTML Tags containing media: |
|
| Where to place vCast button: |
|
| Image URL: | Select an image to be used as the cast icon in the vCast button. For most cases, the default transparent cast icon will work. To change the color of the button you simply have to change the background color of the vCast button |
| Background Color: | Select the color to be used in the background for the vCast button. For most cases, the default transparent cast icon will work. Enter any color using HTML syntax, or enter 'transparent' to leave the vCast button background transparent |
C) Placement - top
This plugin is essentially a button that must be placed on your WordPress site. To place the button, you have several options, but it basically boils down to choosing a container for the button to appear in, or next to, on the page. The container for the button must be specified using HTML notation. If your content is played through a standard HTML5 video player which uses the browser's built-in media controls, you cannot place the vCast button onto the control bar with the rest of the media controls unless you override the browser's default controls and provide your own with room for the vCast button to display. To display the vCast button with a standard HTML5 video player that is using the standard browser media controls, you must choose to place the vCast button on WordPress Posts or inside specific HTML in the admin section settings page
D) CSS Files and Structure - top
Two CSS files are used in this plugin. The first one contains styling information for the vCast button and media controls, and the second one contains styling information for the admin page where you configure the button settings
E) JavaScript - top
This plugin uses three Javascript files.
- Default WordPress jQuery - jquery.js
- Chrome Sender API - cast_sender.js
- vCast script - vcast.js
jQuery is a Javascript library that greatly reduces the amount of code that you must write.
The logic for parsing media and placement of the button is carried out by the vCast script
F) PHP Code - top
Two PHP files are used in this plugin. The first one contains code to install and activate the vCast Button Plugin in WordPress. The second contains the admin settings page code to configure and store the settings of the vCast button
G) Support - top
Support for my items includes:
* Responding to questions or problems regarding the item and its features
* Fixing bugs and reported issues
* Providing updates to ensure compatibility with new software versions
Item support does not include:
* Customization and installation services
* Support for third party software and plug-ins
Visit the support forum for more information.
Only logged in registered users can access the forum
Once again, thank you so much for purchasing this plugin. As I said at the beginning, I'd be glad to help you if you have any questions relating to this plugin. No guarantees, but I'll do my best to assist. If you have a more general question relating to the plugins on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Amor Avhad