Skip navigation
Currently Being Moderated

Creating a pop-up .flv viewer in Dreamweaver

Jun 22, 2012 3:13 PM

Tags: #cs5 #flash #dreamweaver

I'm revising my site. In the past I created separate pages for .flv video tutorials....hundreds of indiduals pages. What I'm trying to do is to create hyper links on the contents page linking to each .flv file so the user can click on the link and a .flv video viewer pops up atop the contents page. I've searched Google and find that many people have the same question, but so far I've found not a single solution to this problem. I know it's posible because the lynda.com site use this method of viewing in a very neat and orderly fashion. This is the look and feel that I'm aiming for. Does anyone know the answer to this, or could lead me to a tutorial explaining this operation indepth? Thanks in advance.

 
Replies
  • Currently Being Moderated
    Jun 22, 2012 3:30 PM   in reply to Rick Lell

    You could put your players inside a modal window like FancyBox (jQuery).

    http://fancybox.net/

     

    That said, Flash video doesn't work in all devices.  If you're rebuilding the site anyway, you might want to convert to MP4 and use a single player that supports playlists and multiple devices.

    http://www.pickleplayer.com/

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 22, 2012 3:34 PM   in reply to Rick Lell

    You can use any javascript popup window method you want to accomplish this. There is nothing special about the fact that the content may contain .flv video.

    For example:

    http://www.worldbarefootcenter.com/tutorials/wbc_tuts_link.html

    uses a simple:

    <h2><span class="style1">Use this link to access on-line video tutorials </span><a onclick="Javascript:window.open('http://www.cidigitalmedia.com/tutorials/wbc_tuts.html','_blank','heigh t=700, width=1000,resizable=no,location=no');return false;" href="wbc_tuts.html">CLICK HERE TO WATCH</a></h2>

    View the source code for exact code used here.

    Lots of tutorials to explain .js popup windows like:

    http://www.javascript-coder.com/window-popup/javascript-window-open.ph tml

    and

    http://www.javascript-coder.com/window-popup/javascript-popup-window.p html

    Again, nothing special just because the content is video.

    Best wishes,

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 22, 2012 9:41 PM   in reply to Rick Lell

    The problem with both responses you recieved is that comple comprehension of your desire was not understood.

     

    As you clearly mentioned in your original post, you want to avoid the daunting task of having to manually create several individual pages and/or links to each video that you have.

     

    In order to avoid creating multiple pages for each and every video you have so that you can link to each video it is recommened that you create ONE dynamic video landing page for your popup that determines which video file is being displayed based on a dynamic parameter that is sent to the video landing page. You can accomplish this very ealisy by naming your videos in sequential numerical order (i.e. video1-100.flv). Then on the page that you have the video popup links on create a loop to display each link dynamically according to the range of numerical parameters that were determined by the total number of videos you have available. The specifics of this method varies according to your server side scripting language and coding skills. PHP is the most used method and there are many tutorials to show how to display a range of numbers using php like this: http://bit.ly/MJkwuh

     

    You'll want your links in the loop to pass a URL parameter to the video that you want to play in the popup. This will let the dynamic pop-up determine which video you would want to play. A dynamic link with a URL parameter will look something like this: http://example.com/?video=1

     

    Using the PHP method described earlier to show a range of numbers you would want to create a loop of numbers that show your links with URL parameters like this:

     

    http://example.com/?video=1

    http://example.com/?video=2

    http://example.com/?video=3

    ...

    http://example.com/?video=100

     

    Then you would only need to create ONE video popup page that will display your video in the popup. You would use a code in php (or your chosen server side scripting language) to determine what video will be displayed based on the URL parameter for the video that was passed from the video's link that opened the popup player. In php it's pretty easy to grab the value of the URL parameter. Here's a quick example of the embed code that would be included in the popup:

     

    <embed tag>whatever_embed_code_you're_using_here="parameter_value" other_parameter="parameter_values" video="<?php echo $_GET['video']; ?>.flv" width="some_width" height="some_height"</embed tag>

     

    Based on the example embed code provided, whatever link the user clicked on from the loop of links will determine what video is displayed based on the "video" URL parameter that was passed to the popup page. So if a user clicked on http://example.com/?video=1 then the popup page would render the following code: <embed tag>whatever_embed_code_you're_using_here="parameter_value" other_parameter="parameter_values" video="1.flv" width="some_width" height="some_height"</embed tag> and if the user clicked on http://example.com/?video=2 then the popup page would render the following code: <embed tag>whatever_embed_code_you're_using_here="parameter_value" other_parameter="parameter_values" video="2.flv" width="some_width" height="some_height"</embed tag> and so on...

     

    best,

    Shocker

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points