Subscriptions, credit card processing, streaming video from Amazon's S3, VPS hosting - this website to support a TV show had the lot!
Wrestla-girl is an entertainment concept that has been around for several years now, with it recently being picked up and shown on Foxtel.
Our client had an existing website, using it to promote the show and sell videos via Paypal, but struggled with managing content. Some of the key requirements were:
- The new site needed to be made mobile responsive, being able to be used on mobiles and tablets - users on today's web regularly consume such media on these kinds of devices
- The videos needed to be provided in streaming video format, as opposed to simply downloading videos. Costs of streaming and hosting the videos needed to be minimised and the videos themselves also needed to be protected from unauthorised downloading.
- Memberships/logins, with users able to buy subscription access to either all videos, a subset or individual videos.
- A shopping cart experience, with visitors able to buy more than one video subscription at a time (as opposed to the existing 'Paypal button' solution)
- Wrestla-girls on the site needed to be associated with their videos
- A high performance server, one that could handle the peaks of traffic after each airing of the television show.
To meet these requirements we used the CMS concrete5, its add-on 'eCommerce' and built custom components where required. Read on for details on how we tackled specific requirements.
Responsive, multi-platform video
We aimed to make the videos available across as many browsers and platforms as possible, but we also wanted to not have to encode the large videos more than once for the web.
Working with our client, we reviewed the current state of browser support for HTML5 video, embed-able players and tested out different bitrates.
Ultimately we settled on the following:
- Videos were encoded once to h.264 format, from their high definition source. This meant that desktop browser would either natively support the video (IE9+, Safari) or be able to utilise a Flash player to play it, with mobile devices such iPhones, iPads and Androids being able to support the video natively.
- We utilised http://mediaelementjs.com, as the video player scripting
- We hosted the videos on Amazon's S3. S3 also allowed the creation of one-time access tokens, preventing unauthorised downloads.
To manage the above, we developed a custom concrete5 block, wrapping mediaelementjs and automatically generating the one-time access tokens. This meant that our client could upload new videos to an S3 bucket and simply enter in the filename of the video into the concrete5 block, with the block handling the rest of the configuration. We may release this block publicly in the future.
The custom video block we developed for the project
Memberships/subscriptions using eCommerce and advanced permissions
Concrete5 has the feature of 'user groups', which are used in conjunction with page and block permissions. We needed a way to allow customers to purchase a particular product and be put into one or more groups, giving them access to the videos they have purchased. Fortunately, eCommerce has the ability to add a user/customer to one or more user groups on the purchase of a product - combining this with advanced permissions we were only left with needing to make minor customisation. The process was as follows:
- Advanced permissions were turned on
- A 'Premium Membership' user group was created, plus a user group for each individual video. Each user group was set to expire after 6 months.
- A video page was created for each video (the page where the video is actually viewed), with the permissions set to only allow access to the Premium user group and the group specific to that video
- A video product was created for each video, configured so that on purchase it would add the user to the specific user group.
- A Premium Membership product was also created
- The product list block was slightly customised to determined for each video whether the logged in user had access to the video or not - if so, they would be presented with a 'Watch Video' button instead of a 'Buy' button.
By using user groups to control permissions, we ended up with a very fine grained control over how purchases could make videos available, being able to do large packs or videos, smaller bundles or sell them individually.
One small concrete5 bug we came across was that on some occasions it would require the customer to log out and log back in to see their new purchases (i.e. for them to be in the new user groups). This may not be a problem with the latest versions of concrete5, but nevertheless we solved this problem by placing in our header.php file (something that gets run on every page load):
<?php $u = new User(); $u->refreshUserGroups(); ?>
Displaying time left in subscription
One desired feature of this project was to be able to display to the customer how much time they had left in their Premium Membership. Although concrete5 didn't have something like this 'out of the box', it was possible to create a basic block to display this.
We created a block that allowed you to pick a user group and it would show how much time was left in the group. If you have the need for such a block, here it is!
(it's a custom block, not a package, so drop it into your top level blocks folder and install via the Block Types section in the dashboard)
Managing Video products and associating them with the Wrestla-Girls
We also had the requirements of being able to have a Wrestla-Girl profile page (which we handled with the composer). To achieve this we use:
- Created a product 'set' in eCommerce, for each Wrestla-Girl, allowing video products to be filtered by Wrestla-Girl
- We installed the (free) 'Page Selector Attribute' from the concrete5 marketplace. Then for each video page, we added this custom attribute, one for each Wrestla-Girl. This allows each video to point at two Wrestla-Girl profile pages, withour page type automatically pulling in the link and profile image.
Credit Card payments using Pin Payments
To provide an additional payment option, we developed payment add-on for a new payment gateway on the Australia market, Pin Payments. We also decided to release the add-on on the concrete5 marketplace.
Setting up a high performance webserver to handle the high loads
As this website is in conjuction with a television show, we anticipated high levels of traffic after each airing. We set up a Virtual Private Server (VPS) and set up Ubuntu running the Apache web server. This ensured we could handle heavier loads as well as install APC for caching (which many shared servers do not have). We'll write up a separate, more generic blog post about how we have been setting up Ubuntu and Apache based servers in the near future.
Since going live, the site has handled many hundreds of memberships and video purchases.
Visit the Wrestla-Girl website and check it out!