Blog

How to add Flash Video (.flv) with controller to the Text/HTML Module in DNN

Flash Video IconThis tutorial describes one of the many ways to add a Flash Video (.flv file) with video controller to the Text/HTML Module in DNN.

We will use 5 files for this tutorial.

  1. FLVPlayer_Progressive.swf
    This is an Adobe created Flash file that will load our flash video and the video controller.
  2. Corona_Skin_2.swf
    This is the video controller Flash file that will overlay our video to allow users to Play/Pause, Seek, and Mute the Flash video
  3. expressInstall.swf
    This is another Adobe created Flash file that will communicate with the Adobe servers to install a Flash plugin if missing from the user’s browser.
  4. swfobject.js
    This is a JavaScript file that will write the code necessary for the object include. Developed by Geoff Stearns, Michael Williams, and Bobby van der Sluis. http://code.google.com/p/swfobject/
  5. OurVideo.flv
    This is our Flash video. We used Adobe Media Encoder to convert from Quicktime (.mov) to Flash Video (.flv) but there are many applications that can do this video conversion

Prerequisite:
If you are using a brand new install if IIS, you will need to enable the .flv mime type. If your site is hosted by a 3rd party this step may not be necessary as they have most likely added the mime type for Flash video to your web server already.

Adding .flv MIME type in IIS

  1. Select the site to configure in IIS, right click and select “Properties”
  2. Under HTTP Headers Tab, select “File Types” under the MIME Map section and select “New Type”
  3. Type “.flv” as the associated extension and “video/x-flv” as the content type.
  4. Select “OK” and you’re ready to fly!

STEP 1:
We need to upload the 5 files to our DNN server. By default DNN does not allow the upload of .flv and .js files using the DNN File Manager. You can add these extensions to the “File Upload Extensions” list at Host > Host Settings > Advanced Settings > Other Settings > File Upload Extensions, or you can FTP these files to your server.

  1. We will create a new folder DNNROOT\Portals\0\includes and upload swfobject.js into it.
  2. We will create a new folder DNNROOT\Portals\0\videos and upload FLVPlayer_Progressive.swf, Corona_Skin_2.swf, expressInstall.swf, and OurVideo.flv into it.

STEP 2:
We will add the HTML code to the HTML/Text Module to play the Flash Video

  1. Create a new HTML/Text module on a DNN Page
  2. Click “Edit Text” link
  3. Click the “Source” button on the Editor. Located in the upper left-hand corner
  4. Cut and Paste the following code into the Editor
<script src="/Portals/0/includes/swfobject.js" type="text/javascript"></script>
<object width="400" height="350" id="FLVPlayer" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
  <param name="movie" value="/Portals/0/videos/FLVPlayer_Progressive.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="opaque" />
  <param name="scale" value="noscale" />
  <param name="salign" value="lt" />
  <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=/Portals/0/videos/Corona_Skin_2&amp;streamName=/Portals/0/videos/OurVideo&amp;autoPlay=false&amp;autoRewind=false" />
  <param name="swfversion" value="8,0,0,0" />
  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
  <param name="expressinstall" value="/Portals/0/videos/expressInstall.swf" />
  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
  <!--[if !IE]>-->
  <object width="400" height="350" type="application/x-shockwave-flash" data="/Portals/0/videos/FLVPlayer_Progressive.swf">
    <!--<![endif]-->
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="scale" value="noscale" />
    <param name="salign" value="lt" />
    <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=/Portals/0/videos/Corona_Skin_2&amp;streamName=/Portals/0/videos/OurVideo&amp;autoPlay=false&amp;autoRewind=false" />
    <param name="swfversion" value="8,0,0,0" />
    <param name="expressinstall" value="/Portals/0/videos/expressInstall.swf" />
    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    <div>
      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
      <p><a href="http://www.adobe.com/go/getflashplayer"><img alt="Get Adobe Flash player" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" /></a></p>
    </div>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
<script type="text/javascript">
<!--
swfobject.registerObject("FLVPlayer");
//-->
</script>
  1. Click “Update” link

That should be all you need. You should now see the Flash video with controller on your DNN page. The code should be fairly easy to modify if you need to change the location or your files or text that is displayed if the user does not have Flash installed.

Please leave a comment if you have any additional questions.

UPDATE:
Hosting the .swf and .flv files on another server

Below are instruction to host your flash video on another server but behave like it’s hosted on your server.

Example:
www.OurServer.com (our DNN server)
www.RemoteServer.com (some other server such as Amazon S3)

In this example we created a directory on www.RemoteServer.com named /videos and upload FLVPlayer_Progressive.swf, Corona_Skin_2.swf, expressInstall.swf, and OurVideo.flv

We kept the swfobject.js file on www.OurServer.com.

The update code will now look like this:

<script src="/Portals/0/includes/swfobject.js" type="text/javascript"></script>
<object width="400" height="350" id="FLVPlayer" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
  <param name="movie" value="http://www.RemoteServer.com/videos/FLVPlayer_Progressive.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="opaque" />
  <param name="scale" value="noscale" />
  <param name="salign" value="lt" />
  <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=http://www.RemoteServer.com/videos/Corona_Skin_2&amp;streamName=http://www.RemoteServer.com/videos/OurVideo&amp;autoPlay=false&amp;autoRewind=false" />
  <param name="swfversion" value="8,0,0,0" />
  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
  <param name="expressinstall" value="http://www.RemoteServer.com/videos/expressInstall.swf" />
  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
  <!--[if !IE]>-->
  <object width="400" height="350" type="application/x-shockwave-flash" data="http://www.RemoteServer.com/videos/FLVPlayer_Progressive.swf">
    <!--<![endif]-->
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="scale" value="noscale" />
    <param name="salign" value="lt" />
    <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=http://www.RemoteServer.com/videos/Corona_Skin_2&amp;streamName=http://www.RemoteServer.com/videos/OurVideo&amp;autoPlay=false&amp;autoRewind=false" />
    <param name="swfversion" value="8,0,0,0" />
    <param name="expressinstall" value="http://www.RemoteServer.com/videos/expressInstall.swf" />
    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    <div>
      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
      <p><a href="http://www.adobe.com/go/getflashplayer"><img alt="Get Adobe Flash player" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" /></a></p>
    </div>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
<script type="text/javascript">
<!--
swfobject.registerObject("FLVPlayer");
//-->
</script>

Notice we have fully qualified the URI for the .swf and .flv files.

This should be all you need to host your Flash video on another server and have it look as though it is hosted on your server.

Note: On some servers (due to their configuration), you may need to add a crossdomain.xml file to the root of the remote server to allow cross-domain access to your flash content.

  1. September 3rd, 2009 at 15:45 | #1

    Thanks for the info!!

    I was able to make this work as described by placing the FLV on my server as suggested in the /portals/0/videos folder. However this causes the video to stream from my server which is a bandwidth nightmare. I want to place the FLV elsewhere (Amazon S3) but when I change the FLV location from
    /portals/0/videos/2minsales
    to
    //vanu-health.s3.amazonaws.com/videos/2minsales
    it stops working. As you can see from the urls provided, the s3 URL does resolve correctly to the FLV file. Why wouldn’t this work?

    • September 3rd, 2009 at 16:22 | #2

      @Rip Rowan Great question!

      You’re almost there, you’re just missing http: in the streamName attribute.

      Using your example the following code segment:

      streamName=//vanu-health.s3.amazonaws.com/videos/2minsales

      Would become:

      streamName=http://vanu-health.s3.amazonaws.com/videos/2minsales

      Notice all I did was add http: to the streamName attribute.

      This change will allow you to place your .flv file on any server and play like it’s on your server.

      Let me know if that works for you.

  2. September 3rd, 2009 at 16:36 | #3

    @adam – nope, this doesn’t work. I’ve tried all conceivable permutations of that URL (with and without http:, with and without .flv extension).

    The FLV is out there – you have the URL. Can you play that stream on your server? How?

    Seems so simple. I just don’t understand why it wouldn’t work. Baffling.

    • September 3rd, 2009 at 17:21 | #4

      @Rip Rowan – Gotcha. This is most likely an issue with “Cross-Domain” security. Oversimplified it behaves like this: Only videos from your domain can play on your domain.

      Luckily, Amazon S3 has Virtual Hosting of Buckets. You need to do a little DNS and Amazon Bucket work to get it configured but it seems pretty straight forward.

      From Amazon:

      …Furthermore, by naming your bucket after your registered domain name and by making that name a DNS alias for Amazon S3, you can completely customize the URL of your Amazon S3 resources, for example: http://videos.mydomain.com/

      Once you have your CNAME (alias) created and pointing to your S3 bucket, your videos should play as expected.

      Working with Amazon S3 Buckets
      Amazon S3 Virtual Hosting

      Give it a shot and let me know how it works out for you.

  3. September 3rd, 2009 at 18:15 | #5

    Of course! Adam you are a genius. Great catch!

    It was not as easy as proposed, however. I was able to get it working with a little advice from this page:
    http://developer.amazonwebservices.com/connect/entry.jspa?externalID=2011

    Thanks for pointing me in the right direction – and thanks for the great article!!

  4. Sébastien
    October 29th, 2009 at 08:52 | #6

    Thanks for this tutorial,
    but it don’t works for me.
    I’ve got my DNN website, I respect the steps 1 and 2.
    The result for me, is a blank page into my Text/HTML Module.
    When I do a right click over this zone, I see “Animation not loaded” and “About Flash Player”.
    That’s all I can see.
    I try to change all possible path without success.
    My DNN server is in version 04.09.05.
    Any ideas or help would be appreciated

  5. October 29th, 2009 at 09:23 | #7

    @Sébastien

    This tutorial is for Flash video files (.flv). Make sure you’re not trying to load a .swf file.

    1) Double check the code in your Text/HTML module to make sure you don’t have any typos.

    2) Download all the files again to make sure they were not corrupted.

    3) Make sure you have permission and access to each file you downloaded. In the example above I would check my .flv file by typing http://MYDNNSERVER.COM/Portals/0/videos/OurVideo.flv in the browser’s address bar. Do this with each file making sure to use the same file location that is in your code.

    Give that a shot and let me know how it goes.

  6. Sébastien
    October 29th, 2009 at 10:45 | #8

    @ Adam Humphrey
    I’m loading a .flv file.
    I check your 3 points with success but this is not better for my problem.
    However, I ‘ve got success with http path to access the files (like :
    http://www.mydnnwebsite.com/web/portals/0/includes/swfobject.js)
    I also add to configure the web server IIS to accept .flv type MIME.
    IIS won’t serve up .flv files.
    I had to go into the IIS settings and add a MIME type entry for flv files (Enter extension .flv, MIME type video/x-flv).

    It will keep the http solution to load .flv into DNN.
    I suppose I’ve got a security problem with path like “/Portals/0/includes/swfobject.js”.
    Best regards

  7. November 1st, 2009 at 20:49 | #9

    Excellent tutorial! It worked perfectly for the first flash file but I can’t seem to get more than one file on a page. Should some of the code be left out of a 2nd, or subsequent, instance of the module?

    Cheers,
    Jay

    • November 1st, 2009 at 21:12 | #10

      @Jay
      Yes, you will need to make a couple changes if you wish to embed more than one video in a single page and/or container.

      1) You need to change the id of each object. You must have a unique id for each video you wish to embed.

      For example, this would be the change to the code for the second video on the page:
      <object width="400" height="350" id="FLVPlayer2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">

      Notice the id has been changed from “FLVPlayer” to “FLVPlayer2

      2) You need to update the JavaScript code to reference the object you just renamed.

      swfobject.registerObject("FLVPlayer2");

      That should be all you need.

      P.S. You only need to reference the swfobject.js file once per page. Make sure it’s included before the code for the first video on the page.

  8. November 1st, 2009 at 21:52 | #11

    @ Adam Humphrey
    Yes, that did it. I was so caught up in making sure the paths were right that I looked right past the id’s. Thank you!

  9. November 2nd, 2009 at 15:30 | #12

    Adam,

    I am trying to do as everyone else and I am having issues also :(. Can you possibly help.

  10. November 2nd, 2009 at 15:51 | #13

    @Patrick Brown-Hayes
    Did you follow the debugging steps in Comment #7?

    There may be an issue with .flv files using the default settings of IIS (not sure which version). I haven’t had time to try to duplicate this issue as it works correctly on my development server running Win 2003/IIS 7.

  11. Barry
    December 10th, 2009 at 09:44 | #14

    This is great, could you tell me what I need to change to play .f4v videos?

    Many thanks

    Barry

    • December 10th, 2009 at 17:50 | #15

      @ Barry,
      Last I checked (many months ago so don’t hold me to this), the f4v format had a mime type of “video/mp4” (Video for Adobe Flash Player). The .f4v format will not work with the embed method described above. A link to a .f4v file on your web server will launch an external Adobe Flash Player or Adobe Media player.

      However, my knowledge may be out of date and there may be a method to embed .f4v videos in HTML. If anyone reading this knows of a way to get this done, please post a comment and enlighten us.

      Further reading: http://www.adobe.com/devnet/video/

  12. Tina
    June 4th, 2010 at 08:29 | #16

    How do you get the scrubber bar to NOT appear by default?

    I want the scrubber bar not to show up when the video first starts playing: it should only appear when the user mouses over it. Is this possible using the default Flash video player skins? I would think I’d just need to pass some sort of parameter, like “scrubber=0” or something.

  13. Henrik Nielsen
    March 9th, 2012 at 12:40 | #17

    Thank You for the tutorial.
    But how do You play a flv file in an endless loop.
    I have tried the loop parameter, but it won’t work.
    Can You help
    Regards Henrik

  14. Rija
    October 31st, 2012 at 18:01 | #18

    Hi,
    I would like to ask that if I do this, anybody can read the url from the page source?
    Do you have some way to keep secret the video url?
    Sorry for my bad English.
    Thank You!

  15. July 13th, 2013 at 05:57 | #19

    Hmm it seems like your blog ate my first comment (it was super long) so I guess I’ll just sum it up what I wrote and say, I’m thoroughly enjoying your blog. I as well am an aspiring blog writer but I’m still new to the whole thing. Do you have any points for beginner blog writers? I’d definitely appreciate it.

  16. August 15th, 2013 at 11:04 | #20

    Your style is unique compared to other folks I’ve read stuff from. Many thanks for posting when you’ve got the opportunity, Guess I will just book mark this blog.

  1. No trackbacks yet.
Subscribe to comments feed
Secured