Advertisement
Other

How to Play Video Using an Open Source Player

by

Today, I will teach you how to display video on the web using an open source flash player. We will cover all steps, including converting a video into the flv file format, and embedding a customized player using SWFObject. The best part is that the retail Adobe Flash is not required.

Step 1 - Converting the Movie File Using Macromedia Flash

The first step of embedding a video is encoding a video in .flv format. Almost all online web players use .flv as the standard for playing files.
For this tutorial you can download the sample video I've used called Trusted Computing at archive.org( Directed by: Benjamin Stephan and Lutz Vogel.)

If you don't have Macromedia Flash then skip to 1b.

Open Macromedia Flash Video Encoder and add the video to the queue File > Add. Then click Start queue at File > Start Queue and you are finished encoding the file into .flv format.
Note: The customization on this step is minimal. For more control of video size and compression skip to step 1b, or 1c.

Step 1b - Converting the Movie File Using Riva FLV Encoder for Microsoft Windows

There are many options when encoding into FLV. The Windows option for this tutorial is the Riva FLV Encoder because it is free and customizable.

Download and install the Riva FLV Encoder from Riva's website.

Once opened, add the video to the input video box by using the browse button. The program will automatically output the video into the same directory.
Next, we will adjust the preferences on the right section. For this simple video we will use the video size of 320x240 and keep all other settings as default. To start the encoding, click FLV Encode at the bottom of the program.
Note: Try and keep the file size lower by adjusting the settings and keeping the resolution down. The larger the video, the longer it takes to load.

Step 1c - Converting the Movie File using Riva FLV Encoder for Mac OSX

The choice for Mac in this tutorial is ffmpegX.

Download and install the ffmpegX encoder from their website.

Once opened, add the video to the input video box by using the open button. The program will save the output the video into the same directory, but you will have to update the file name to TrustedComputing_LAFKON_LOW.flv.
Next change the target format to FLV and click encode. To make any changes to the video size and compression, click on the different tabs.
Note: Try and keep the file size lower by adjusting the settings and keeping the resolution down. The larger the video, the longer time it takes to load.

Step 2 - Download the Player

In this tutorial we will be using the open source MPW Player for playing our flash files.
The main reasons are because the MPW player is open source and offers both easy customization and more in depth customizing.
To download the player, visit the MPW Player website. The website is in spanish but just click the blue download button.

The necessary files are mpw_player.swf and the includes folder. Note: Place the encoded flv file, TrustedComputing_LAFKON_LOW.flv, in the same folder as the player and html file.

Step 3 - Embed the Flash Player Using SWFObject

Create a blank html document and add script tags for swfobject in the head of the document. The swfobject.js file is located in the includes folder in the download from mpw player.

<script src="includes/swfobject.js" type="text/javascript"></script>

Next, we will insert the actual flash player and edit one line. Place the name of the video file, TrustedComputing_LAFKON_LOW.flv, under the variable flv.

<div id="flvplayer">This div is replaced by the javascript using swfobject</div>
<script type="text/javascript">
	var so = new SWFObject("mpw_player.swf", "swfplayer", "400", "327", "9", "#000000"); // Player loading
	so.addVariable("flv", "TrustedComputing_LAFKON_LOW.flv"); // File Name
	so.addParam("allowFullScreen","true"); // Allow fullscreen, disable with false
	so.write("flvplayer"); // This needs to be the name of the div id
</script>

Now we have a functioning player with the default look.

Step 4 - Customize the Look of the Player

Customizing the player is very important and is the reason why we are using the MPW Player. To make updates to the player all we need to do is add variables in the JavaScript.

The first customization to the player will be adding a preview photo for the video. To add a photo, add the variable jpg and then the location of the photo. The photo used in the tutorial is named trusted.jpg - a screenshot from the video. Note: Don't forget the script tags in the head of the document.

<div id="flvplayer">This div is replaced by the javascript using swfobject</div>
<script type="text/javascript">
	var so = new SWFObject("mpw_player.swf", "swfplayer", "400", "327", "9", "#000000"); // Player loading
	so.addVariable("flv", "TrustedComputing_LAFKON_LOW.flv"); // File Name
	so.addVariable("jpg","trusted.jpg"); // Preview photo
	so.addParam("allowFullScreen","true"); // Allow fullscreen, disable with false
	so.write("flvplayer"); // This needs to be the name of the div id
</script>

In order to make further changes, add more variables. Here is a sample of all default variables added with comments explaining each purpose.

<div id="flvplayer">This div is replaced by the javascript using swfobject</div>
<script type="text/javascript">
	var so = new SWFObject("mpw_player.swf", "swfplayer", "400", "327", "9", "#000000"); // Player loading
	so.addVariable("flv", "TrustedComputing_LAFKON_LOW.flv"); // File Name
	so.addVariable("jpg","trusted.jpg"); // Preview photo
	so.addVariable("autoplay","false"); // Autoplay, make true to autoplay
	so.addParam("allowFullScreen","true"); // Allow fullscreen, disable with false
	so.addVariable("backcolor","000000"); // Background color of controls in html color code
	so.addVariable("frontcolor","ffffff"); // Foreground color of controls in html color code
	so.write("flvplayer"); // This needs to be the name of the div id
</script>

Step 5 - Support Users Without Flash and JavaScript

Embedding the player with SWFObject allows us to use a placeholder image or text in case the user doesn't have flash or javascript. A big reason for this is many computers or devices like the iPhone don't have Flash or JavaScript enabled.

In this example we will use a simple image, however any code will work. SWFObject replaces all content inside of a referenced div. When a user is missing JavaScript or Flash, the browser simply displays the div's content. In this case, the content displayed is just the same jpg file, trusted.jpg, that we used for a preview.

<div id="flvplayer"><img src="trusted.jpg"></div>
<script type="text/javascript">
	var so = new SWFObject("mpw_player.swf", "swfplayer", "400", "327", "9", "#000000"); // Player loading
	so.addVariable("flv", "TrustedComputing_LAFKON_LOW.flv"); // File Name
	so.addVariable("jpg","trusted.jpg"); // Preview photo
	so.addVariable("autoplay","false"); // Autoplay, make true to autoplay
	so.addParam("allowFullScreen","true"); // Allow fullscreen, disable with false
	so.addVariable("backcolor","000000"); // Background color of controls in html color code
	so.addVariable("frontcolor","ffffff"); // Foreground color of controls in html color code
	so.write("flvplayer"); // This needs to be the name of the div id
</script>

Step 6 - Adding Multiple Players on a Single Page

In order to put more than one player on a single page, just make sure each referenced div has a unique name. Then update the JavaScript reference to match the div id.

<div id="flvplayer2"><img src="trusted.jpg"></div>
<script type="text/javascript">
	var so = new SWFObject("mpw_player.swf", "swfplayer", "400", "327", "9", "#000000"); // Player loading
	so.addVariable("flv", "TrustedComputing_LAFKON_LOW.flv"); // File Name
	so.addVariable("jpg","trusted.jpg"); // Preview photo
	so.addVariable("autoplay","false"); // Autoplay, make true to autoplay
	so.addParam("allowFullScreen","true"); // Allow fullscreen, disable with false
	so.addVariable("backcolor","000000"); // Background color of controls in html color code
	so.addVariable("frontcolor","ffffff"); // Foreground color of controls in html color code
	so.write("flvplayer2"); // This needs to be the name of the div id
</script>

Step 7 - Using the Audio Player

The MPW player can also be used as an audio player. All we need to do is add the variable mp3 instead of flv.

<div id="audioplayer"><img src="trusted.jpg"></div>
<script type="text/javascript">
	var so = new SWFObject("mpw_player.swf", "swfplayer", "400", "327", "9", "#000000"); // Player loading
	so.addVariable("mp3", "audio.mp3"); // File Name
	so.addVariable("jpg","trusted.jpg"); // Preview photo
	so.addVariable("autoplay","false"); // Autoplay, make true to autoplay
	so.addParam("allowFullScreen","true"); // Allow fullscreen, disable with false
	so.addVariable("backcolor","b54645"); // Background color of controls in html color code
	so.addVariable("frontcolor","ffffff"); // Foreground color of controls in html color code
	so.write("audioplayer"); // This needs to be the name of the div id
</script>

Step 8 - Further Customization

MPW Player is open source, which means that anybody can download and make changes to the player. In order to download the source code for the player visit this webpage and download "MPW Player SRC".

Alternative Players

MPW Player is not perfect for every web video. Try out these other free players as they might work better for you.

  • FLV Flash Fullscreen Video Player - No volume controls as of yet is a downside, but it is easy to use and open source.
  • OS FLV - This open source player is updated very often and has some specific development for Joomla.
  • Flow Player - The player has lots of perks, but you have to pay an upgrade license to remove branding
  • JW FLV Media Player - This player is free to use and customizable. Works great for personal use but needs a license to be used commercially.

Conclusion

This tutorial showed you how to encode a video in flv and customize an open source flash player in order to display video and audio on the web.


Related Posts
  • Web Design
    HTML & CSS
    Build a Dribbble Portfolio Grid With Flexboxgrid and JribbbleFlexboxgrid dribbble
    Flexboxgrid is a new framework which allows you to combine the predictability and common language structure of a grid system with the flexibility and simplicity of flexbox. Today, we will walk through the basics of using Flexboxgrid, and use it to build a simple Dribbble feed. Let's get started!Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: The Footer FileCreating wordpress theme from html 400
    In this series, you've been learning how to create a WordPress theme form static HTML. Up to this point, you have: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu added widget areas to the header and sidebar. Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    PHP
    Creating a Photo Tag Wall With Twilio Picture Messaging & PHPProcedural to oop php retina preview
    Twilio's recently announced Picture Messaging has vastly opened up what we can do with text messaging, now we can attach photos to our text messages and have them get used in different ways. In our case, we are going to build a Photo Tag Wall, which will contain photos linked to tags that will be displayed on a website.Read More…
  • Code
    HTML & CSS
    Intro to Shadow DOMShadow dom retina preview
    Take any modern web page and you will notice that it invariably contains content stitched together from a variety of different sources; it may include the social sharing widgets from Twitter or Facebook or a Youtube video playing widget, it may serve a personalized advertisement from some ad-server or it may include some utility scripts or styles from a third party library hosted over CDN and so on. And if everything is HTML based (as is preferred these days) there is a high probability of collisions between the markup, scripts or styles served from various sources. Generally, namespaces are employed to prevent these collisions which solve the problem to some extent, but they don't offer Encapsulation.Read More…
  • Code
    PhoneGap
    PhoneGap: Build a Feed Reader - ConfigurationAudero reader preview2@2x
    This is the third and final part of the series about Audero Feed Reader. In this article, you'll learn how to create the configuration file and complete the project we started in a prior lesson.Read More…