“vCast Button jQuery Plugin” Documentation v1.0

---

“vCast Button JS”

---

Table of Contents

1. Quick Start Guide
2. Configuring Settings
3. Placement
4. CSS Files and Structure
5. JavaScript
6. Support
7. Demo

---

NOTE: In the following example, the button(s) will be placed inside of ".castButtonContainer" (the selector expression). Please remember this example is for illustration purposes only. You should not call vCastButton() more than once in your code. Instead, place all relevant selectors for locations where you want the vCast button to appear in the selector expression when calling vCastButton()

A) Quick Start Guide - top

1. 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. By default, the <a href="..."> and <source src="..."> tag/attribute pairs are used when searching for video urls that match the file extension(s). The default file extensions are mp4 and mkv. To set the HTML tags containing video URLs, use the sourceTagList field in the options when initially creating the vCast Button:

   $(document).ready(function(){
     //Setup vCast button with custom source tags
     $(".castButtonContainer").vCastButton({
       sourceTagList: "a,href|source,src|li,url",
     });
   });

   NOTE: Format for specifying sourceTagList is tagName,attributeName.
   Separate multiple source tag/attribute pairs with pipe | character

2. 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 linked to on your website is .mp4, type mp4 (no period). If you have more than one file extension, you can enter them separated by the pipe character |. To set the video file extension(s), use the extensionsList field in the options when initially creating the vCast Button:

   $(document).ready(function(){
     //Setup vCast button with specific file extension(s)
     $(".castButtonContainer").vCastButton({
       extensionsList: "mp4|mkv|m4v|mov|avi",
     });
   });

3. 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. To set the vCast Button color, use the backgroundColor field in the options when initially creating the vCast Button:

   $(document).ready(function(){
     //Setup vCast button with specific button color
     $(".castButtonContainer").vCastButton({
       backgroundColor: "#000",
     });
   
     //Setup vCast button with transparent button color
     $(".castButtonContainer").vCastButton({
       backgroundColor: "transparent",
     });
   });

Congratulations! You have successfully configured vCast Button to play videos with the default source video scan settings on your website. You should now see the vCast button appear on your website in the elements specified by the selector expression, whenever a video is detected on the page

---

B) Configuration Settings - top

sourceTagList:	Add the tag(s), also 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. Tag/Attribute pairs must be specified using the format: Tag,Attribute. Enter multiple tag/attribute pairs by separating them with a pipe character |
extensionsList:	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
image:	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
backgroundColor:	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 website. To place the button, you have several options, but it basically boils down to choosing a container element for the button to appear in, on the pages in your website. The container(s) for the button must be specified in the selector expression when you create vCast Button. 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 place the vCast button outside of the media controls bar used by your Internet browser

ADVANCED PLACEMENT

vCast jQuery plugin is a front-end solution for scanning the source code of a webpage for URLs to cast. To place vCast jQuery plugin button onto an existing player such as JW Player, you must take into account when the video URLS are actually available/placed in the source code of the page in your browser. It's not always when page is done loading. For example, for JW Player the player's full source code containing the video urls is not on the page until a user performs the following actions in the browser on a PC:

1. Click play icon
2. Video url gets added to page
3. Video is requested and begins playing

So when initializing JW Player, you need to initialize vCast jQuery plugin button in JW Player's call back function onPlay in order to detect the video URL for casting. This call-back solution will work for other players too, but they must also provide call back functions you can use to trigger your own functions that will initialize vCast jQuery plugin. In the worst case, setTimeout can be used to wait until the video url has been loaded on the page if no call back functions are provided for your html5 based video player. See the demo for JW Player

---

D) CSS Files and Structure - top

One CSS file is used in this jQuery plugin. It contains styling information for the vCast button and media controls used for the Chromecast player

---

E) JavaScript - top

This jQuery plugin uses three Javascript files

1. jQuery - jquery.js
2. vCast jQuery Plugin - vcast.jquery.js
3. Chrome Sender API - cast_sender.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) 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

Go To Table of Contents

---