If the standard video player doesn't bend exactly to your needs, you can re-build it to do so in Adobe Flex. The approach is quite simple: If you upload a file named v.swf in the theme builder, that file is used to play video instead of the standard player. Obviously, the uploaded SWF file needs to be able to accept the same attributes and parameters as the standard player to get the full functionality (detailed here).
The easiest way to approach this problem is to start with the code from the standard player. The code is provided as-is and can be used for any legal purpose. 23 doesn't support the code in any way, although you're always free to ask...
At a glance
If you're already comfortable with Flex Builder, git and 23 video, here's the short check-list for customizing the video player. The rest of this document goes into details for every item on the list:
- Code: Check out the source code by running git clone git://github.com/23/videoplayer.git VideoPlayer in your Flex Builder source folder.
Read more - Import: Import the project folder through File → Import → Flex Project.
Read more - Run: Open up VideoPlayer.mxml and click the Play icon in Flex Builder to verify the player starts correctly.
Read more - Branch: Create a new git branch for your modifications by running git branch MyPlayer; git checkout MyPlayer in the VideoPlayer folder. (This will allow you to get player modification automatically by running git merge master in the future.)
Read more - Be creative: Write some code − and remember to commit changes to your git branch as you go along.
Read more - Build: When you're done, create a release version of your customized player through File → Export → Release Build. This will get a single SWF file, which is everything you need.
Read more - Deploy: Deploy your new player to 23 Video through Design → Players → Create new player. Here you name your custom player and upload VideoPlayer.swf from your bin-release.
Read more
1. Preparations and getting the code
The code for 23 Video's player is open source and is built in Adobe Flex. This means that as a minimum you need to have The Flex Framework installed to use the code − however, we recommend using Flex Builder, and this guide assumes that you have Builder installed along with git for version control.
The player code is available from http://github.com/23/videoplayer, and to check the code out open a terminal and browse to the Flex home folder:
$ cd ~/Documents/Flex\ Builder\ 3/ $ git clone git://github.com/23/videoplayer.git VideoPlayer Initialized empty Git repository in /Users/steffentchr/Desktop/VideoPlayer/.git/ remote: Counting objects: 715, done. remote: Compressing objects: 100% (693/693), done. remote: Total 715 (delta 422), reused 0 (delta 0) Receiving objects: 100% (715/715), 385.04 KiB | 288 KiB/s, done. Resolving deltas: 100% (422/422), done.
Now you'll find a newly created folder named VideoPlayer with all the necessary source code.
2. Importing the code into Flex Builder
Next, we need to import the new project folder into Flex Builder. Open up Flex and select File → Import → Flex Project.
Here you select option Project folder and locate the newly created folder. Then click the Finish button.
3. Running the video player for the first time
After the import is done, you'll see a new tree called VideoPlayer in the Flex navigator pane. Locate and double-click the file called VideoPlayer.mxml in the src folder to get your first view of the main application in 23's VideoPlayer.
Now, click the Play button on the toolbar to start up the player − you should see Flex opening up a browser with a fully functional version of the demonic player.
4. Creating a git branch for your modifications
Before we continue with an overview of Flex, we will take some time to look at the code we downloaded using git. git is a wonderful version control system, which allows developers to work on the same code alongside each other without needing to spend all their time coordinating changes.
In this case we're using git both because it's a great tool for documenting changes as a project develops, but also because it allows you to get merge in new features in the VideoPlayer even if you've modified it with your own design.
To make the most of the possibilities offered by git, create a new branch for your modified player:
$ cd ~/Documents/Flex\ Builder\ 3/VideoPlayer/ $ git branch MyPlayer $ git checkout MyPlayer Switched to branch "MyPlayer" $ git branch * MyPlayer master
Here you're creating a new branch called MyPlayer, then you're actually switching to it using the git checkout command. Using the git branch statement you can always check which branch you're currently on.
Now, we'll try to make changes to the Flex code and handle them in git...
Go to git and locate the line setting the variable defaultDomain in VideoPlayer.mxml. When you test your code, it's very helpful to set defaultDomain (and possibly defaultPhotoId) to your own 23 Video domain. This will allow you to test and debug using your own video and your own channels simply by hitting the debug button in Flex Builder. Update the code and save it in Flex Builder.
Now, when you return to your terminal, git will notice the changes:
$ git status # On branch MyPlayer # Changed but not updated: # (use "git add ..." to update what will be committed) # # modified: src/VideoPlayer.mxml # no changes added to commit (use "git add" and/or "git commit -a") $ git diff src/VideoPlayer.mxml diff --git a/src/VideoPlayer.mxml b/src/VideoPlayer.mxml index cef6d6b..f3bef7e 100755 --- a/src/VideoPlayer.mxml +++ b/src/VideoPlayer.mxml @@ -40,9 +40,9 @@ import com.adobe.serialization.json.JSONParseError; // Default domain (used when testing from localhost) - private var defaultDomain:String = 'reference.dev.visualtube.net'; + private var defaultDomain:String = 'v.23video.com'; // Default photo_id (used to if you want a specific photo/video to be shown, otherwise empty) - private var defaultPhotoId:String = ''; + private var defaultPhotoId:String = '1234'; private var defaultAlbumId:String = ''; private var context:Object = {}; $ git add src/VideoPlayer.mxml $ git commit -m "Changed the values of defaultDomain and defaultPhotoId" Created commit 182d3e5: Changed the values of defaultDomain and defaultPhotoId 1 files changed, 2 insertions(+), 2 deletions(-)
Here, we're having git list the changes and once we've verified that they're correct, we're committing them to version control.
The trick to using version control in this case is mergability: When changes are made to the standard video player in 23 Video, you can merge those changes into your own customized player as well:
$ git fetch origin $ git merge master Already up-to-date.
These two lines of code perform the magic: Comparing the different versions of the source code and merging them together is a meaningful way.
You can learn a lot more about using git on GitHub's help pages, and you find out how to Get a different 23 Video player as a branch.
5. Overview of the source code
Unfortunately, it is out of the scope of this document to do a line-by-line walk-through of the code -- and hopefully, the coding style and comments should make your feel at home quite easily. To get to that point, it's helpful to know a little about the anatomy of the application:
- VideoPlayer.mxml:
The main application file, which includes most of the MXML markup and controls the flow of the player. This is where you include next elements and modify the positioning of the UI elements. - AppProperties.as:
This is where all the application-wide properties are handled. Here we set up defaults, read from the embed parameters and import settings from 23 Video. - ActiveElement.as:
Which video clip is currently active within the player. The activeElement hash collection allows easy access to all the meta data about this clip and the file includes method to switch to different elements on the playlist. - Identity.as:
Method for initiating, displaying and destroying elements from post- and prerolls. - Fullscreen.as:
Method to switch to and from full screen. - Utility.as:
Various utility functions used across different parts of the application. - com/PlayerButton.mxml:
A custom component used to display the UI buttons during playback. If you need to skin the player, start by updating the PlayerButton component to your needs. - com/ActionButton.mxml:
ActionButton is a custom component and a different button used on the Identity and Embed panels. This is usually a more conventional button with a corresponding icon. Note that the button is created with action-button.png as the default background; the button is scaled using a grid-9 scaling method not easily available for SWF resources. If you change the button background, make sure it's a PNG file. - com/PlayerProgress.mxml:
A custom compont for the player's progress bar. - com/PlayList.mxml:
A custom component displaying the items on the player's playlist. (This playlist is also available through the recommendations variable after load.) - com/TextPanel.mxml:
A final custom component used as a parent for both the Embed and the Identity panel. - preload/*:
Files for the preloader. As a general rule, you can change the preloader by replacing preloader.gif. - assets/*:
Includes all the graphical elements used in the player. Whenever possible, the graphics are included as SWF files.
6. Building a release version of the player
When you're satisfied with your player customizations, you need to have Flex build an SWF file for your including all the player's bits and pieces.
First, select File → Export → Release Build.
Then confirm the defaults settings by clicking Finish. You're likely to get a few warnings when building the release; just ignore those.
After completing these steps, you'll find a file called VideoPlayer.swf in the bin-release subdirectory. The is the file we'll be deploying to 23 Video in the next and final step.
7. Deploying your player to 23 Video
To use your newly customized player on 23 Video, fire up your site's administration section and click Design → Players → Create new player:
Here, you give your player a name, then choose Custom player and select the VideoPlayer.swf file from your bin-release folder. Finally, click the Create the player button to complete the procedure. That's it!.
