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.
Streaming HTML5 video. HTML5 is the first version which is providing a standard method to embed video by using the video tag. As it can be embedded in the browser directly, so now there is no need of third party plug-in, such as Silverlight and Flash. HTML5 video has created unique and new ways for creating interactivity between the video, the user.
Join For Free

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:

A few things to note about this:

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

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

  • The source can be a variable element.

  • You need to include the file extension in the source file

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

    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.

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


      4. Doctoring the yellow wallpaper pdf. She is finally convinced that he only 'pretended to be loving and kind.'
    4. Now, that you have told swfObject to run you have to actually set it up in the HTML.


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


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

      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

      flowplayer-controls-3.2.15.swf

      Happy party train mp3. MC - 1. Shoujo Ijou no Koi ga Shitai ( 少女以上の恋がしたい, Shoujo Ijou no Koi ga Shitai) by Aqours.

      flowplayer-3.2.16.swf

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


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

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

    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.

    Like This Article? Read More From DZone

    html5 ,video embed
    Opinions expressed by DZone contributors are their own.
    Html5

    Description

    HTML5 <audio>Â the element enable native audio playback within the browser. It supports all browsers i.e. Firefox, Chrome, Safari, IE and Opera.
    WordPress Short Code for Radio Player
    [radioforge id=”1234″]
    There is a difference between versions of shoutcast. 1.9.9 doesn’t support HTML5 Audio where 1.9.8 is compatible with HTML5 Audio
    Please check our FAQ Section for more help…
    Shoutcast Stream is not working?
    If you have any problem in latest Firefox to play HTML5 Radio Player, please download javascript file from here https://www.svnlabs.com/html5radio-php/audio.js and copy to “/wp-content/plugins/shoutcast-icecast-html5-radio-player/html5/audiojs/”
    HTML5 MP3 Radio FM Stream Player Paid version don’t have Advertisements in player 🙂 You need to completely remove free version to use paid version for HTML5 MP3 Radio FM Stream Player. In Paid version you can manage background image, size or dimensions and many more….
    icy-metaint not setNote: Please make sure with Radio Hosting Support … if icy-metaint is present in your Radio Stream

    HTTP Live Streaming: HTML5 Radio FM Player supports only HTTP Live (download) Streams.
    Song’s Current Time & Duration will depend on MP3 Radio Stream for Live Radio. it’s always 0:00 / 0:00
    Note: It uses native <audio> where available and an invisible flash player to emulate <audio> for other browsers. It provides a consistent html player UI to all browsers which can be styled used standard css.
    HTML5 MP3 Radio FM Stream Player only support MP3 codec Radio Streams
    Browser & format support
    With Flash as a fallback, it should work pretty much anywhere.
    It has been verified to work across:
    – Mobile Safari (iOS 3+)
    – Android (2.2+, w/Flash), Android (4.0+)
    – Safari (4+)
    – Chrome (7+)
    – Firefox (3+, w/ Flash)
    – Opera (10+, w/ Flash)
    – IE (6, 7, 8, w/ Flash)
    Plugin Features:
    1. Can play MP3 Radio MP3 Stream from Icecast / Shoutcast Server.
    2. Self Hosted Plugin Files
    3. HTML5 MP3 Radio player is CSS based
    4. Customize Radio Player Background, Size & Artwork
    5. Shortcode for WordPress
    6. Live Radio
    7. Social Twitter, Facebook & Google+
    8. Compatible with iOS, Android, Firefox, Chrome, Safari, IE and Opera.
    HTML5 MP3 Radio FM MP3 Stream Player can grab “Now Playing Song Information” on player as StreamTitle for Shoutcast and Icecast Streams.
    Note: You must have CURL enabled with PHP on your server to get current playing Shoutcast Song Information…
    Take this sample file from here https://www.svnlabs.com/html5/info.phps
    – Change Shoutcast Address with Port
    – Upload this to your server after renaming to “info.php”
    – Review if you can successfully run this sample code 😉
    Connection Timed Out (110)
    Note: Please make sure shoutcast / icecast server port is open on your server firewall as outgoing port to read shoutcast / icecast current playing song information…
    How to fix … Call to undefined function parse_ini_string() in html5/icecast.php