Difference between revisions of "Content/Video"

From aMember Pro Documentation
Jump to: navigation, search
m (Spelling, wording, grammer.)
Line 1: Line 1:
The current aMember video protection feature is based on the video files being uploaded to the site's server. If the videos that need protected, are large and you expect a large bandwidth requirement to serve up the files, a content distribution network (CDN) solution such as Amazon's S3 should be considered. Note that Amazon S3 integration is on aMember's Road Map for the next major release (4.2).
+
The current aMember video protection feature is based on the video files being uploaded to the site's server. If the videos that need protected are large, and you expect a large bandwidth requirement to serve up the files, a content distribution network (CDN) solution such as Amazon's S3 should be considered. Note that Amazon S3 integration is on aMember's Road Map for the next major release (4.2).  
  
====Installing Flowplayer====
+
==== Installing Flowplayer ====
  
The aMember video protection solution requires the installation of Flowplayer on your server. Go to the Flowplayer download page - http://flowplayer.org/download/index.html - and download either the free or paid version.
+
The aMember video protection solution requires the installation of Flowplayer on your server. Go to the Flowplayer download page - http://flowplayer.org/download/index.html - and download either the free or paid version.  
  
Extract the downloaded .zip file and look for the following files. They must be renamed and placed on your server as described below. The 3 digit number that is removed in the file renaming steps below may be different based on the exact version of Flowplayer.
+
Extract the downloaded .zip file and look for the following files. They must be renamed and placed on your server as described below. The following examples have the version number of Flowplayer represented by ''-#.#.#'', which is removed in the file renaming steps below.  
  
#Rename this file to "flowplayer.controls.swf" and place it on your server as shown: <nowiki>http://yoursite.com/amember/application/default/views/public/js/flowplayer/flowplayer.controls.swf</nowiki>
+
#Rename the file "flowplayer.controls-#.#.#.swf" to simply "flowplayer.controls.swf" and place it on your server as shown: <nowiki>http://yoursite.com/amember/application/default/views/public/js/flowplayer/flowplayer.controls.swf</nowiki>  
#Rename this file to "flowplayer.swf" and place it on your server as shown: <nowiki>http://yoursite.com/amember/application/default/views/public/js/flowplayer/flowplayer.swf</nowiki>
+
#Rename the file "flowplayer-#.#.#.swf" to "flowplayer.swf" and place it on your server as shown: <nowiki>http://yoursite.com/amember/application/default/views/public/js/flowplayer/flowplayer.swf</nowiki>  
#Open the "example" folder to access the final file.
+
#Rename the file "flowplayer-#.#.#.min.js" to "flowplayer.js" and place it on your server as shown: <nowiki>http://yoursite.com/amember/application/default/views/public/js/flowplayer/flowplayer.js</nowiki>
  
 +
<br> To upload a video file to the site's server and add protection to it follow these steps:
  
[[File:Protect_video_9.png]]
+
#Click on the "Products" bar in the left menu  
 
+
#Click on the "Product Content" menu button  
 
+
#Click on the "Video" button in the top menu bar  
#Rename this file to "flowplayer.js" and place it on your server as shown: <nowiki>http://yoursite.com/amember/application/default/views/public/js/flowplayer/flowplayer.js</nowiki>
+
 
+
 
+
[[File:Protect_video_10.png]]
+
 
+
 
+
To upload a video file to the site's server and add protection to it follow these steps:
+
 
+
#Click on the "Products" bar in the left menu
+
#Click on the "Product Content" menu button
+
#Click on the "Video" button in the top menu bar
+
 
#Click on the "New Record" button as show in the image below
 
#Click on the "New Record" button as show in the image below
  
 +
:[[Image:Protect video 1.png]]
  
[[File:Protect_video_1.png]]
+
<br>
  
 +
A form like the one shown below will then open up.
  
A form like the one shown below will then open up.
+
To add a file with protection follow these steps:
  
To add a file with protection follow these steps:
+
#'''Video File''' - Upload a video from your local computer by using the file upload feature '''-or-'''
 +
#'''Video File''' - Browse to a video that already exists on the server using the file browser feature.
 +
#'''Title''' - Add a title/name to the video.
 +
#'''Description''' - Enter a short description of the video here.
 +
#'''Hide''' - By default, links to protected video's are listed in the Member's Area. If you do not want the link shown in the Member's area, check this box.
 +
#'''Access Permissions''' - Click on "Please select an item..." drop down menu to assign a membership product or category to the video.
 +
#'''Save''' - Always finish by clicking on the "Save" button.
  
#'''Video File''' - Upload a video from your local computer by using the file upload feature '''-or-'''
+
:[[Image:Protect video 2.png]]
#'''Video File''' - Browse to a video that already exists on the server using the file browser feature
+
#'''Title''' - Add a title/name to the video
+
#'''Description''' - Enter a short description of the video here
+
#'''Hide''' - By default, links to protected video's are listed in the Member's Area. If you do not want the link shown in the Member's area, check this box.
+
#'''Access Permissions''' - Click on "Please select an item..." drop down menu to assign a membership product, or category, to the video.
+
#'''Save''' - Always finsh by clicking on the "Save" button
+
  
 +
<br>
  
[[File:Protect_video_2.png]]
+
#After clicking on the "Please select an item..." drop down menu, the menu will open up to display all previously defined membership products and categories.  
 
+
 
+
#After clicking on the "Please select an item..." drop down menu, the menu will open up to display all previously defined membership products and categories.
+
 
#Choose from the listed products or categories. After you make a choice, you can reopen the drop down menu and make additional choices.
 
#Choose from the listed products or categories. After you make a choice, you can reopen the drop down menu and make additional choices.
  
 +
:[[Image:Protect video 3.png]]
  
[[File:Protect_video_3.png]]
+
<br>
  
 +
After a product, or category is picked, it will be displayed as shown in the image below.
  
After a product, or category is picked, it will be displayed as shown in the image below.
+
#You can delete a membership product, or category, by clicking on the "X".
 
+
#By default, access to the video will start as defined in the Product setup configuration.  
#You can delete a membership product, or category, by clicking on the "X"
+
#By default, access to the video will expire as defined in the Product setup configuration.  
#By default, access to the video will start as defined in the Product setup configuration.
+
#By default, access to the video will expire as defined in the Product setup configuration.
+
 
#Always click on "Save" after making any changes on this page.
 
#Always click on "Save" after making any changes on this page.
  
Note that the "start" and "expiration" days can be configured to provide video access in an incremental fashion. For more information on setting up incremental content delivery, [[Incremental_Content_Delivery|see this page]].
+
Note that the "start" and "expiration" days can be configured to provide video access in an incremental fashion. For more information on setting up incremental content delivery, [[Incremental Content Delivery|see this page]].  
  
 +
:[[Image:Protect video 4.png]]
  
[[File:Protect_video_4.png]]
+
<br>
  
 +
After the video configuration page is saved. The video will be shown on the Video List Page as shown in the image below.
  
After the video configuration page is saved. The video will be shown on the Video List Page as shown in the image below.
+
#'''Click to Expand''' - Click on this link to access JavaScript code that can be used to embed the video into a webpage.  
 
+
#'''Link''' - This is the link to use for the protected video. Hover over the link and click the right mouse button. From the contextual menu choose "Copy link address".
#'''Click to Expand''' - Click on this link to access JavaScript code that can be used to embed the video into a webpage.
+
#'''Edit''' - Click on this icon to edit the settings for the protected video.  
#'''Link''' - This is the link to use for the protected video. Hover over the link and click the right mouse button. From the contectual menu choose "Copy link address"  
+
#'''Edit''' - Click on this icon to edit the settings for the protected video.
+
 
#'''Delete''' - Click on this icon to delete the video from the protected area.
 
#'''Delete''' - Click on this icon to delete the video from the protected area.
  
 +
:[[Image:Protect video 5.png]]
  
[[File:Protect_video_5.png]]
+
<br>
  
 +
To use the embed code, follow these steps:
  
To use the embed code, follow these steps:
+
#Click on the JavaScript Code link.
 
+
#A box will open up and provide embed code for the video.
#Click on the JavaScript Code link
+
#The width can be defined here.  
#A box will open up and provide embed code for the video
+
#The height can be defined here. Note that you do not need to define height since the player will establish the height based on the width and the video's aspect ratio.  
#The width can be defined here.
+
#Highlight all the text, right click the mouse and copy all the code to your computer's clipboard.  
#The height can be defined here. Note that you do not need to define height since the player will establish the height based on the width and the video's aspect ratio.
+
#Highlight all the text, right click the mouse and copy all the code to your computer's clipboard.
+
 
#Pate the embed code into a webpage.
 
#Pate the embed code into a webpage.
  
 
+
:[[Image:Protect video 6.png]]
[[File:Protect_video_6.png]]
+

Revision as of 01:03, 18 September 2012

The current aMember video protection feature is based on the video files being uploaded to the site's server. If the videos that need protected are large, and you expect a large bandwidth requirement to serve up the files, a content distribution network (CDN) solution such as Amazon's S3 should be considered. Note that Amazon S3 integration is on aMember's Road Map for the next major release (4.2).

Installing Flowplayer

The aMember video protection solution requires the installation of Flowplayer on your server. Go to the Flowplayer download page - http://flowplayer.org/download/index.html - and download either the free or paid version.

Extract the downloaded .zip file and look for the following files. They must be renamed and placed on your server as described below. The following examples have the version number of Flowplayer represented by -#.#.#, which is removed in the file renaming steps below.

  1. Rename the file "flowplayer.controls-#.#.#.swf" to simply "flowplayer.controls.swf" and place it on your server as shown: http://yoursite.com/amember/application/default/views/public/js/flowplayer/flowplayer.controls.swf
  2. Rename the file "flowplayer-#.#.#.swf" to "flowplayer.swf" and place it on your server as shown: http://yoursite.com/amember/application/default/views/public/js/flowplayer/flowplayer.swf
  3. Rename the file "flowplayer-#.#.#.min.js" to "flowplayer.js" and place it on your server as shown: http://yoursite.com/amember/application/default/views/public/js/flowplayer/flowplayer.js


To upload a video file to the site's server and add protection to it follow these steps:

  1. Click on the "Products" bar in the left menu
  2. Click on the "Product Content" menu button
  3. Click on the "Video" button in the top menu bar
  4. Click on the "New Record" button as show in the image below
Protect video 1.png


A form like the one shown below will then open up.

To add a file with protection follow these steps:

  1. Video File - Upload a video from your local computer by using the file upload feature -or-
  2. Video File - Browse to a video that already exists on the server using the file browser feature.
  3. Title - Add a title/name to the video.
  4. Description - Enter a short description of the video here.
  5. Hide - By default, links to protected video's are listed in the Member's Area. If you do not want the link shown in the Member's area, check this box.
  6. Access Permissions - Click on "Please select an item..." drop down menu to assign a membership product or category to the video.
  7. Save - Always finish by clicking on the "Save" button.
Protect video 2.png


  1. After clicking on the "Please select an item..." drop down menu, the menu will open up to display all previously defined membership products and categories.
  2. Choose from the listed products or categories. After you make a choice, you can reopen the drop down menu and make additional choices.
Protect video 3.png


After a product, or category is picked, it will be displayed as shown in the image below.

  1. You can delete a membership product, or category, by clicking on the "X".
  2. By default, access to the video will start as defined in the Product setup configuration.
  3. By default, access to the video will expire as defined in the Product setup configuration.
  4. Always click on "Save" after making any changes on this page.

Note that the "start" and "expiration" days can be configured to provide video access in an incremental fashion. For more information on setting up incremental content delivery, see this page.

Protect video 4.png


After the video configuration page is saved. The video will be shown on the Video List Page as shown in the image below.

  1. Click to Expand - Click on this link to access JavaScript code that can be used to embed the video into a webpage.
  2. Link - This is the link to use for the protected video. Hover over the link and click the right mouse button. From the contextual menu choose "Copy link address".
  3. Edit - Click on this icon to edit the settings for the protected video.
  4. Delete - Click on this icon to delete the video from the protected area.
Protect video 5.png


To use the embed code, follow these steps:

  1. Click on the JavaScript Code link.
  2. A box will open up and provide embed code for the video.
  3. The width can be defined here.
  4. The height can be defined here. Note that you do not need to define height since the player will establish the height based on the width and the video's aspect ratio.
  5. Highlight all the text, right click the mouse and copy all the code to your computer's clipboard.
  6. Pate the embed code into a webpage.
Protect video 6.png