How Play Streaming Video With HTML

Introduction

My name is John Epstein and I am a twenty year veteran of the IT industry. In that time I have worked on projects from low-level programming to high-level architecture theory. 

The purpose of this article is to explain and give a "how-to" get video streaming online for your website. I was recently contracted out to enable video streaming online for a client of mine. My suggestion was to implement native HTML5 video streaming on his site for mp4 video formats and a flash player for his .flv files.

The Basics

The first thing anybody who endeavors to implement video streaming on their site is to have a very basic understanding of video formats and what can and cannot be played. There are many video formats: .flv, .mp4, .swf and others. What are they and why should you care? Basically, these are the pretty common video formats that most people will be able to produce and play: .flv and .swf are adobe flash file formats. These are proprietary formats and cannot be played via HTML5 without a dedicated flash player. MP4 can be played via HTML5 without a dedicated player. In this article, I will explain how to implement these file formats to get video enabled on your website. 

One Warning

There are many articles and "how-to" about video streaming .swf files and .flv files. Please note that a .swf player will not play a .flv file. Although they are both flash they have different requirements. The net is filled with confusing information about this topic. You can spend a bit of time getting an .swf file working thinking it can run a .flv file only to find out that isn't the case. This may seem like something that shouldn't happen, but when you look up "Playing a .flv file on HTML" you tend to get .swf information since they are both flash and owned by adobe.

Therefore, this article is first going to start with implementing an HTML5 video streaming player using the mp4 video format. This is pretty standardized now and there are a few tweaks that you should be aware of. The other is getting .flv and .swf files playing on your website.

How to Implement .mp4 Video Streaming in HTML5:

<video id="player" width="100%" height="auto" autoplay="autoplay" controls>
  <source src="Name of your file" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2">
</video>

A few things to note about this:

1. You need to give the video tag an id. 

2. If you need to allow the users a control bar then you need to put that in the tag. 

3. The source can be a variable element.

4. You need to include the file extension in the source file

5. You need to put the full URL of the file into the source tag. Such as http://www.mysite.com/video/myvideo.mp4

One thing to note about HTML5 is that it will play audio, video, and combinations. You just need to specify the type of file. 

Now, there is an interesting note to talk about when it comes to full-screen video playback. By default, most browsers disable this feature but you can add it by inserting the following javascript before your video tag.

<script type='text/javascript'>  
  var elem = document.getElementById('player');
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
} ;
</script>

Of course, you can always have hiccups and things that don't go right. But HTML5 has made it pretty straight forward with implementation. If your site videos don't work sometimes, it's due to you either not having permissions on the server to get the file, bad filename, not complete source URL or simply Apache (if you are using it), doesn't recognize the extension type or mime type.

Apache Web Server Configuration

You need to add the mime types for the extensions in either the regular apache.conf file or the mime.conf file. After you change the configuration restart your server!

That's it. You should be able to stream videos from your website. But remember there are restrictions to what formats HTML5 currently plays and this is where things tend to get more complicated is when you want to play a proprietary formatted video file such as flash format. These two come in either .swf or shockwave flash or .flv which is just simple flash. 

How to Implement Video Streaming With Flash Format

Just a brief note: Although, this really should be a straight-forward development task it tends to get a bit sticky if you have not done it before. Typically, you search the internet for "playing flash videos on HTML". This leads to all sorts of information, but most of it is for implementing the playing of .swf or the Shockwave flash format using something like SWFObject. So, in brief, SWFObject is a javascript library that will allow you to play .swf file formats only. It does not do anything else. and this is where the confusion sometimes occurs. None of the articles I read (and I didn't read them all and could have easily missed something) as this sometimes happens when you are trying to make a deadline. One would think that it would play .flv files - wrong. You need to get what is called a player for that. The player creates a video streaming for the .flv files. 

So if you need to implement .swf files:

1. Download SWFObject from Git or somewhere else off the net.
2. Move it into HTML page by calling it. 

<script type="text/javascript" src="../swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myFlashContent", "9.0.0", "expressInstall.swf");
</script>




This part should be done in the head of the file.

3. You can implement it using either the <Object tag> or embed it such as:

   <script type="text/javascript">
    swfobject.embedSWF("YourContentLocation.swf", "myContent", "300", "120", "9.0.0");
   </script>




4. Now, that you have told swfObject to run you have to actually set it up in the HTML.

<body>
    <div id="myContent">
      <p>Alternative content</p>
    </div>
  </body>




5. This will run an .swf file in your page. You can manage many parameters by implementing code such as:

   var params = {
        allowScriptAccess: "sameDomain", 
        allowFullScreen: "true",
        wmode: "opaque",
        quality: "high",
        menu: "false"
    };




There are many resources available online that can help you with sorting out the correct parameters and implementation of the swfobject in your code. 

Implementing FlowPlayer

If you have a solution where using HTML5 is just not an immediate option. (i.e. you have many videos that were done/are done using flash and they produce a .flv file format, then you need to implement a flash video player. There are many video players and services that are available for different prices. I have chosen to go with FlowPlayer. FlowPlayer arguably has been around for awhile and has a large community following. It is true, like most video players, there is a licensing cost associated with it. Since it is a commercial grade product, they do charge for commercial applications, but allow for personal usage and development. I would suggest you check out their site for more information.

Getting Started

There are a couple of options to implementing FlowPlayer and this is where if you are not careful you can run into some issues. FlowPlayer.org has two implementations: The first, being a flash player called Flowplayer flash and the other being an HTML5 implementation. The HTML5 implementation has the free option for developers, whereas the flash requires a licensing fee. It is easy to get them confused because Flowplayer is Flowplayer right? Wrong!

Flash Flowplayer has the necessary files to play .flv files whereas the HTML5 player plays the standard HTML5 file formats (mp4). So, why would you chose the HTML5 version, well it does offer quite a few things to make your player do things that you may otherwise have to program yourself. It all depends on your needs.

Now that we have clarified a place to make a very stupid mistake, and yes I am guilty of that one I admit it and downloaded the wrong thing we can discuss implementations. Some implementations embed the video player in their site while hosting the videos somewhere else. We are going to embed the video player in our site and host the files locally (a popular option). 

What Do You Need to Get Going

1. Make sure that you have the following files downloaded:

flowerplayer-3.2.x.min.js ->there are later versions, so you will need to get the latest if that doesn't work fall back to either .12/.13

flowplayer-controls-3.2.15.swf

flowplayer-3.2.16.swf

2. You will implement in the head tag of your HTML page.

<script type='text/javascript' src='../yourdirectory/flowplayer-3.2.12.min.js'></script> 
<script type='text/javascript' src='.../yourdirectory/flowpayer.control-3.2.16.swf'></script>




3. In the body of your web page, you need to set-up the player with the src file.

<a href="<?php echo $FinalName; ?>"
   style="display:block;width:525px;height:425px;"
   id="player">
</a>

In this example, I have used a variable based on the selection made by the user on a previous web page. 

Please make sure that you use the full URL of the location of the file.

http://yourwebsite.com/yourfilelocation/nameofyourfile.flv

Not that you have set up the file and the id we need to set-up the code that actually runs the file.

<script language="JavaScript">
  flowplayer("player", "../private/flowplayer-3.2.16.swf");
</script>

Summary

On the surface and after reading this article you should have a good understanding of the key elements needed to get mp4's and .flv files running properly on your website. Of course, you can always manage parameters and do other things with your site, but the purpose of this article was to give you, the reader, an understanding of the pieces that go into play when setting up a streaming site.