The Video Player
The video player build into 23 Visual Platform is quite powerful: Its look and feel can be customized extensively, and it can host both video and photo slideshows when it is embedded into 3rd-party sites. If your project has very specific needs you'll even be able to re-program the player in Adobe Flash or Adobe Flex.
In addition, the source code to the video player is freely available so you'll be able to easily extend the standard player with your own functionality.
This guide provides information on how to customize the display of your videos...
Embedding the video player into other sites
The video player can be included in a variety of different contexts and can include multiple videos and photos, depending on how it is used.
Embed one video
Embedding just one video clip is easy. You'll find the needed code available directly within Visualblog (or other Visual Platform products). Navigate to the video player page and copy the HTML embed code into your own page. The code will look similar to this:
<embed width="580" height="435" src="http://your.visualtube.net/v.swf" allowfullscreen="true" allowscriptaccess="always" flashvars="photo_id=12345"/>
The width and height attributes specify the size of the video player window, and the video clip is automatically scaled to match the size. The flashvars attribute specifies which video to load.
Embedding multiple videos or photos at once
Oftentimes, you'll want to include a number of video clips into one page and let visitors browse through the clips. This can be done by organizing the videos (or photos) into an album or by tagging them.
When you've organized your selection of content, it can be included using the album_id and tag parameters in the flashvars attribute.
For albums:
<embed width="400" height="300" src="http://your.visualtube.net/v.swf" allowfullscreen="true" allowscriptaccess="always" flashvars="album_id=9753"/>
... and for tags:
<embed width="400" height="300" src="http://your.visualtube.net/v.swf" allowfullscreen="true" allowscriptaccess="always" flashvars="tag=summer"/>
Customizing the player
The look and feel of the video player can be changed under Presentation in your Visual Platform product. Changing the video player settings with change the display both on your Visual Platform site and when embedding the player elsewhere.
Change the player's looks when embedding
If you need to change the look of the player in a specific context, this can be achieved by altering the embed code. This piece of HTML, for example, will play all videos tagged "summer" on a white background with no tray and no logo:
<embed width="400" height="300" src="http://your.visualtube.net/v.swf" allowfullscreen="true" allowscriptaccess="always" flashvars="tag=summer&backgroundColor=white&showLogo=0&showTray=0"/>
Another example plays one specific video − but shows descriptions in a large, black Georgia font on a white tray:
<embed width="400" height="300" src="http://your.visualtube.net/v.swf" allowfullscreen="true" allowscriptaccess="always" flashvars="photo_id=12345&trayBackgroundColor=white&trayTextColor=black&trayFont=Georgia&trayTitleFontSize=16"/>
Parameters allowed in flashvars are:
| Parameter | Allowed values |
|---|---|
| photo_id | Integer |
| album_id | Integer |
| video_p | Integer (0 or 1) |
| video_encoded_p | Integer (0 or 1) |
| tag | String |
| backgroundColor | Color |
| trayBackgroundColor | Color |
| trayTextColor | Color |
| trayFont | Font family list |
| trayTitleFontSize | Integer |
| trayTitleFontWeight | normal, bold |
| trayContentFontSize | Integer |
| trayContentFontWeight | normal, bold |
| trayAlpha | Float between 0 and 1 |
| showTray | 0 or 1 |
| showDescriptions | 0 or 1 |
| autoPlay | 0 or 1 |
| loop | 0 or 1 |
| playHD | 0 or 1 |
| logoSource | Url |
| showLogo | 0 or 1 |
| logoPosition | 'top left', 'top right', 'bottom right', 'bottom left' |
| logoAlpha | Float between 0 and 1 |
| logoWidth | Integer |
| logoHeight | Integer |
| showShare | 0 or 1 |
| browseMode | 0 or 1 |
Example: Run video clips on a loop on a big screen
The standard video player is ideal for blowing up onto a big screen to display video clips from your site running on a loop. Using the parameters loop and playHD this is easily achievable.
<embed width="400" height="300" src="http://your.visualtube.net/v.swf" allowfullscreen="true" allowscriptaccess="always" flashvars="loop=1&playHD=1"/>
In this example, all videos on the site is played in HD quality and repeated on a loop. Every time the loop starts over, the playlist is reloaded so you can upload new clips and have them displayed in the player without needing to manually reload anything.
Building you own video player
If the standard video player doesn't bend exactly to your needs, you can re-build it to do so in Adobe Flex or Adobe Flash. 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 (detailed above).
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...
Distributing a custom player based upon the supplied code is done through the following steps...
- Download the Visual Platform Video Player code for Adobe Flex
- Open the code using Flex Builder 3 or something similar (if you're having trouble importing the project, there are instructions)
- (Modify the code to your own needs...)
- Compile the code into an SWF file.
- Rename the file to v.swf
- Go to your Visual Platform theme builder and upload the SWF file
- See you video player in action
- Profit
A helpful hint: When you test your code, set defaultDomain and possibly defaultPhotoId in the beginnig of VideoPlayer.mxml. This will allow you to test and debug simply by hitting the debug button in Flex Builder. No need to upload again and again.