How To Embed Livestreamed Video On Your Site

How to use HTML to play a variety of streaming video files, including .flv files if you need to.

Join the DZone community and get the full member experience.

How To Embed Livestreamed Video On Your Site

Installing live streaming video feeds on your website is easy with and eLine security camera There are many applications for having live video on a web page. Cities, resorts, tourism businesses, and vacation homes can have a weather cam. Day cares and schools can have live video available to parents. Pet boarding services and pet owners can have a doggie-cam. Navigate to the video you want to embed. You need to be on the YouTube page to do this, you cannot be watching the video on another website. 2 Drag the video to where you want the video to start (Optional).

Join For Free


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:

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

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.

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.

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

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

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

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

  7. 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

How to embed livestreamed video on your site without

How To Embed Livestreamed Video On Your Site Url

There are a couple of options to implementing FlowPlayer and this is where if you are not careful you can run into some issues. 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:
  2. 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



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

  4. In the body of your web page, you need to set-up the player with the src file.
  5. 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.

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


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.

html5,video embed

Opinions expressed by DZone contributors are their own.

This tutorial will show you how to add live video from SecuritySpy to your own web page. This does involve editing the HTML of your web page, but it’s relatively simple. Our favourite tool for this is TextMate.

Firstly, you must set up SecuritySpy for remote monitoring, so that it can be accessed over the internet. Next, create a special user account in SecuritySpy that has permission only to view the camera that you want to use. Finally, determine the camera number for the camera in question – this is shown in the Camera Info window (highlighted in red below). If you don’t see this column, click the header bar where you see the column names, and a menu will pop up that allows you to add it.

Three methods for embedding the video feed into a web page are outlined below. In the examples shown, the address of the SecuritySpy system is “”, the port is 8000, and the camera number is 1.

Authentication is supplied via an auth parameter, which is the the Base64 representation of the string user:pass (i.e. the username and password, separated by a colon). Use an online Base64 encoder to generate this value: simply enter your user:pass string, click the Encode button, and copy and paste the result.


If you want to specify a particular size for the image, add width and height parameters, for example the URL in Method 1 would become something like this:

How To Embed Livestreamed Video On Your Site Video

Method 1: MJPEG

How To Embed Livestreamed Video On Your Site Without

This method works in iOS and all Mac web browsers. On a Windows PC, this works in Chrome, Safari and FireFox but unfortunately not in Internet Explorer. It is very simple to implement, using just an img tag within the body block of the HTML page:

Method 2: JavaScript JPEG

This has the best compatibility of all these methods, working on virtually all web clients. It does require the insertion of some JavaScript code to the head section of the HTML page in addition to the img tag within the body section. Also make sure to add the onLoad event to the body tag, in order to initially load the image when the page loads:

How To Embed Livestreamed Video On Your Site Free

Method 3: HTTP Live Streaming

This method uses H.264 video encoding, and is therefore much lower bandwidth than the above JPEG methods. It also includes audio. The main drawbacks are that it does not have universal support in web browsers (it works best in Safari on either macOS or iOS), and there is an inevitable 10-second latency.