Play Flv in HTML

Playing a locally stored FLV file in HTML

Looks like this question was answered here:
How to Play FLV Video in HTML Video tags?

You can use http://videojs.com/ to achieve your goal.

Once you get this you can use the video tag like this:

<video id="example_video_1" class="video-js vjs-default-skin"
 controls preload="auto" width="640" height="480"
 poster="http://video-js.zencoder.com/oceans-clip.png"
 data-setup='{"example_option":true}'>
<source src="rtmp://localhost/live/test" type="rtmp/flv">
</video>

playing flv in website

In order to deliver flash video one needs to encode the audio and video in one of the following containers

• Adobe Flash Video (FLV)
• Adobe Flash Video 2.0 (F4V) [H.264 codec with Flash Player 9.0.r115 and later]

Implementing

Yes you need some some of wrapping FLV Player to play back the file.
If you have Dreamweaver CS3/CS4 there is an option that allows a playback to a FlvPlayer.swf (The type of player depends on how you want it to be downloaded). Select Insert->Media->Flash Video for this option.
[Make sure to Deselect the Prompt Users to Download Flash Player If Necessary option].

If you do not have software, there are many open source solutions with the most popular being Flowplayer (uses RTMP or HTTP Streaming) which is an Open Source (GPL 3) video player. It is free but the Flowplayer trademark appears on the player needing a commercial license to be removed.

The pros for this in your case are
The video file can be in any format (mpg,avi,wmv,mov) and the web setup will take care of conversion.

In terms of flash plugins, downloads and compatablity, Mark Pilgrim (Dive into HTML5) has talked about the following video workflow to ensure maximum compatablity across browsers

1. Make one version that uses Theora
   video and Vorbis audio in an Ogg
   container.
2. Make another version that uses WebM
   (VP8 + Vorbis).
3. Make another version that uses H.264
   baseline video and AAC “low
   complexity” audio in an MP4
   container.
4. Link to all three video files from a
   single element, and fall
   back to a Flash-based video player.

<video id="movie" width="320" height="240" preload controls>
<source src="mymovie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="mymovie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="mymovie.ogv" type='video/ogg; codecs="theora, vorbis"' />
  <object width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf"> 
    <param name="movie" value="flowplayer-3.2.1.swf" /> 
    <param name="allowfullscreen" value="true" /> 
    <param name="flashvars" value='config={"clip": {"url": "http://wearehugh.com/dih5/good/bbb_480p.mp4", "autoPlay":false, "autoBuffering":true}}' /> 
    <p>Download video as <a href="mymovie.mp4">MP4</a>, <a href="mymovie.webm">WebM</a>, or <a href="mymovie.ogv">Ogg</a>.</p> 
  </object>
</video>

You will need to check Mark's site for encoding commands and as well placing AddType handlers to your config files for the ogg formats and so forth.

The following talks about if you are going to deploy the video yourself or customize it in Flash CS3.

Downloading

This depends on what delivery format you want to use whether it be progressive or streaming.

Progressive download means the video will be download to the hard drive. It is possible to start playing the video even before it finishes to download.

Streaming means that buffering occurs such that there are small amounts of data downloaded at a time. To use this option a Flash Video Streaming Service is needed.

Good luck with your goals.

Related Topics