This quick overview of the moving parts that need to come together for web video to play help you better understand the video workflow.

While you will have seen video on hosting services such as YouTube, Vimeo, Brightcove and others, Sell to Camera focuses on videos embedded in your website or blog. So, this post gives you a high level overview of how video embedding works.

It is therefore important for you to have a clear understanding of the concepts behind video embedding. You will need to understand how the different parts of the software stack work together to display your video.

I will not go into low level technical details here, just cover the core issues you need to know. So, let’s get started and what better than with a video from Pink Floyd.

Let’s start with Pink Floyd

I have embedded a YouTube video of Pink Floyd playing Comfortably Numb, one of their most well-known tracks. This video is from October 1994, recorded at Earls Court in London during the Division Bell tour.

The video appears as you have seen on countless web pages. But what is really going on here? How is the video being displayed? Where is that big play button coming from? Who decides which static image to show before the video starts?

As the following diagram shows, a number of components come together on the page to present the embedded Pink Floyd video you see above.

Let’s have a look at the main two components that you need to know about: the Adobe Flash player and the custom video player.

The Adobe Flash player

The HTML page you are looking at (unless, of course, you are reading this in your RSS feed reader) is being displayed by your browser. Within the page body is an HTML code to tell the browser to embed the Adobe Flash Player.

You installed the Flash Player as a plugin in your browser; what started life as a specialist tool for displaying multimedia animations has now grown into a fully fledged programming environment with a virtual machine and object-oriented language called ActionScript.

Flash Player is the runtime environment for ActionScript programs. On its own the runtime does not do anything; it must load and run some content. In our case it is the custom video player that provides the user interface you see and interact with.

The custom video player

The custom video player is a small ActionScript program that creates the user interface you interact with to start and stop your video. In our example the Flash Player loaded the custom video player from YouTube’s servers when your browser loaded this HTML page.

The custom video player checks some parameters and displays the user interface you see. It displays and controls the play button, slider, volume control and the other user interface elements.

Once loaded, the custom video player checks its parameters to get the URL of the video it should display, then asks the Flash Player runtime to download and prepare to play that video.

This is the normal case. It is also possible to tell the custom video player to automatically start playing the video.

When you click play

When you click the play button the custom video player passes a message to the Flash Player telling it to start playing the video.

It is important to understand that the custom video player is only a small program responsible for the user interface. It is the Flash Player that does the real work of decoding and displaying the video.

This clear separation between the custom video player and the Flash Player is important; the reason is customization.

Customizing your video player

While YouTube and other video hosting services give you a certain level of control over their custom video players, you will want more control when you start to host your own videos for your website or blog.

What you really need is your own custom video player that meets your specific needs.

Why do I need my own custom video player?

At this point you might be wondering exactly why you might need a custom video player for your own website?

Well, to give you an idea, here are just a few of the many things you can do once you have your own custom video player:

• Brand your videos by overlaying your logo on top of the videos. This is easier that including your logo as a watermark in every separate video. You will see such branding marks on a lot of web video.
• Take the user to a landing page when the video ends. This is useful if you want your viewer to take a specific action having watched your video. Rather than asking them to click on a link, you can do it for them. This will increase your response rate.
• Dynamically overlay links on the video while it is playing. You can use this to give the user information on special offers, current events etc. By you don’t need to include such link text in the video; you can change them quickly and easily. (You might want to do this when running split tests on your website.)
• Disable specific video controls. You will see some internet marketing videos which hide the position slider so you cannot fast forward. (I find this very annoying and do not recommend you do this in your videos.)
• Show pre-roll and post-roll video before and after your main video, for advertisements, titles or credits etc. You can share and reuse these segments; you don’t need to include the same content into every video. You can change these standard segments without touching your real video content, which saves a lot of time.
• Control your poster frame. When you upload a video to YouTube it is not always clear which frame YouTube will choose for the thumbnail or poster frame (the frame shown when the video has not yet started to play). With your own custom video player you get complete control of the poster frame, which is vital for grabbing visitor’s attention. If you pay attention to this you will see that most videos have boring and/or inappropriate poster frames.

Getting your own custom video player

This does not mean you need to learn how to code in ActionScript! There are many free and commercial custom video players available. JC Player is a leading free player, while Web Anatomy is a well-known commercial product.

These products all allow you to specify the look and feel you want for your custom video player. Select from a few options and they immediately generate an ActionScript program just for you.

The next step is to host your custom video player on your website and make sure your HTML page tells the Flash Player to load your specific custom video player to play your video. That’s all there is to it; you are now ready to embed your video.

At first glance this whole video embedding processes might sound complicated. Rest assured, however, in practice it is not that complex and I will be going into this process in detail in future posts on Sell to Camera.

Pay attention to the players

Take a few moments when watching video to look at the controls and other features provided by the custom video player. You will soon see different families of video players. You will also start to see the sort of custom video player you might want to use for your videos

The main takeaway is that it is the custom video player that is responsible for the user interface you see when interacting with the video. It will be such a video player you will need to play for your own videos. I will be going into this in future posts here on Sell to Camera.

Tags

ActionScript, Adobe, Advert, Brand, Brightcove, Credit, Custom, Custom Player, Embed, Flash, JC Player, Overlay, Post-Roll, Poster Frame, Pre-Roll, Split-Testing, Technology, Title, Video, Vimeo, web Anatomy, YouTube

My new blog for technical presenters

Our success as technical presenters depends on our ability to get audiences to take action. After all, without action it’s just entertainment!

I’ve given hundreds of technical presentations at all levels in the software industry and have learned that although creating action’s hard, it’s not impossible. I share my experience by curating the best tips and tricks, examples and resources from the web at Tech Presenting. Please join me.