none
How to put video on website? RRS feed

  • Question

  • I need to create a page that plays video demos for a production company. To give you an idea of what we're replacing, here's the way the old page looks:

    http://www.ballmediainnovations.com/new%20version%20single%20page%20graphics/demos%20one%20page.htm

    It needs to be MUCH more modernized, and we'd prefer to have one skin that will play all the videos, allowing the reader to choose the clips they want to see. We'd like a photo and brief description of each clip where the reader can click and choose, and the video will load into the skin. Currently the video files are wmv files.

    Can this be done within expression web? Or do is there something out there that I can use within EW?

     

    Wednesday, September 8, 2010 8:11 PM

All replies

  • Yes, it can be done with EW. EW has the capability to embed any of several types of players, or you can use a third-party solution to provide the player. Whichever you choose, you may have to use a video converter (a dime a dozen, and many are free) to ensure that the video is in a format suited to the player chosen.

    The rest of it is just HTML and CSS layout and design, as well as some scripting to load the user's choice in the player. Inexpensive third-party solutions also exist which will also handle that, such as Coffeecup Video Player (http://www.coffeecup.com/video-player/) which can automate much of that part of the process.

    There are plenty of options, but yes, you can do what you want to do in EW. It will not be a drag 'n' drop proposition, however.  ;-)

    cheers,
    scott


    C'mon, folks. This isn't rocket science, nor neurosurgery. It's "Expression" (singular) "Web" (singular), in that order, followed by a version numeral if you wish to be specific. It is often abbreviated "EW." It is not "Web Expression," "Expressions Web," "Web Expressions," or plain "Expression" or "Expressions." Not using the correct name indicates either ignorance or laziness. Most folks would rather avoid the appearance of either.
    Wednesday, September 8, 2010 8:43 PM
  • Hi Paladyn,

    I've been checking out coffeecup and it doesn't really allow me to do what we're hoping to do. We want to have a list with a photo and description of each video.

    I do need to a vender supplied solution like coffeecup, but would you know of one that offers more customization?

    Thanks!

    Saturday, September 11, 2010 3:36 PM
  • I've seen a few that I thought looked good. Let me dig around my Evernote and Palm files to see where I've got them referenced. I gave the Coffeecup solution as an example because I happened to have used it. For many purposes it's fine, but you're correct, it is limited in its customizability.

    [EDIT: Well, that didn't take long. Entering "video player" into Evernote's search field came up with the first three hits being FlowPlayer. Should have thought of that first thing, but there you are. Anyway, go here http://flowplayer.org/ to check it out.

    Note the player-in-container demo here: http://flowplayer.org/demos/skinning/container-background.html, which might be something like what you're after. The container can be any size you want and you can use that space on the left for a series of divs or paras with your description and thumbnail, for example. If not, check out the other demos as well (click the Demos selection in the menu bar).

    You can do pretty much anything you want to do with this player. You might need some not-too-advanced scripting to select the video for the player depending upon the thumbnail clicked, but there are plenty of examples of use at the site to learn from.]

    cheers,
    scott


    C'mon, folks. This isn't rocket science, nor neurosurgery. It's "Expression" (singular) "Web" (singular), in that order, followed by a version numeral if you wish to be specific. It is often abbreviated "EW." It is not "Web Expression," "Expressions Web," "Web Expressions," or plain "Expression" or "Expressions." Not using the correct name indicates either ignorance or laziness. Most folks would rather avoid the appearance of either.
    Saturday, September 11, 2010 4:04 PM
  • Paladyn,

    Thanks for the suggestion. I had tried to use flowplayer, and found it so incredibly difficult. Their directions were way beyond my abilities. I went on their forum for support and found that I wasn't the only one having difficulties. Others were experiencing bugs and issues and there's just no support from flowplayer - no way to have questions answered. One thing I'll say for coffeecup is that they have fantastic service, good directions and excellent response time.

    Would you happen to know of any other company that has the options we need but also supports their users? Thanks!

    Saturday, September 11, 2010 11:22 PM
  • Sorry, I'm afraid not. I am reasonably comfortable with javascript and jQuery, so I tend to gravitate toward the many free and powerful solutions available using those technologies.

    For quick and easy applications for which it is suited, I like the Coffeecup app, while for anything for which I want to deploy custom functionality that goes beyond what their player offers, I google for plugins that I can configure to accomplish my ends.

    It should be noted that with scripting what you want to do is not that difficult to accomplish. The thumbnail and description part is simple HTML and CSS, as mentioned earlier. All that is left is to feed a parameter identifying the video selected (by clicking the button in the description pane) to the player and activating it. How this is done depends upon the particular player, but even basic swfobject-based players can be driven this way.

    I'm not sure, but something along the lines of SlideShow Pro or another commercial app may be your way to go. But, frankly, however you go, you're going to have to have a way to feed the selected video parameter to the player, and I don't know of anything available that will do your whole application as described with no scripting needed. Do let us know if you find something.

    cheers,
    scott


    C'mon, folks. This isn't rocket science, nor neurosurgery. It's "Expression" (singular) "Web" (singular), in that order, followed by a version numeral if you wish to be specific. It is often abbreviated "EW." It is not "Web Expression," "Expressions Web," "Web Expressions," or plain "Expression" or "Expressions." Not using the correct name indicates either ignorance or laziness. Most folks would rather avoid the appearance of either.
    Sunday, September 12, 2010 12:10 AM
  • OK, I have to admit that the comment about how FlowPlayer is so incredibly difficult got to me, so I went back and perused their demos again. Doing what you want to do with FlowPlayer is simplicity itself. Here is a demo that shows just how simple it is http://flowplayer.org/demos/scripting/anchors.html.

    Note the HTML part, here:

    <div id="clips">
     <a href="KimAronson-TwentySeconds70930.flv">Eating sushi</a>
     <a href="KimAronson-TwentySeconds64268.flv">Hotel room with brown carpet</a>
     <a href="KimAronson-TwentySeconds63617.flv">Small lake and a bicycle</a>
    </div>

    That is straightforward HTML, and any HTML can go in that div with id "clips" (which is the key). For example, let's add a little something,

    <div id="clips">
     <div class="thumbs">
      <img src="myFirstThumbnail.jpg" alt="The artist's name1" />
      <p class="description">Here's a bunch of text description...</p>
     </div>
       <a href="KimAronson-TwentySeconds70930.flv">Eating sushi</a>
    <div class="thumbs">
      <img src="mySecondThumbnail.jpg" alt="The artist's name2" />
      <p class="description">Here's a bunch of text description...</p>
     </div>
      <a href="KimAronson-TwentySeconds64268.flv">Hotel room with brown carpet</a> 
     <div class="thumbs">
      <img src="myThirdThumbnail.jpg" alt="The artist's name3" />
      <p class="description">Here's a bunch of text description...</p>
     </div>
      <a href="KimAronson-TwentySeconds63617.flv">Small lake and a bicycle</a>
    </div>
    ... and so on for as many videos as you have...

    You don't need to even touch the scripting on that page. Copy it whole cloth, exactly as it is. It will automatically walk the "clips" div assigning the onclick event of the links below each of the divs to play the appropriate video (which it gets by fetching this parameter from each link ==> this.getAttribute("href", 2)).

    You can even change the link text to a button by using a button image as the link below each div. You can use class "thumbs" to style your container divs any way you want them to look. In short, you can make the thing look like anything you want, and when the button associated with a thumb div is clicked, the correct video will play in the player.

    And that, I believe, was what you were after, n'est-ce pas?

    cheers,
    scott


    C'mon, folks. This isn't rocket science, nor neurosurgery. It's "Expression" (singular) "Web" (singular), in that order, followed by a version numeral if you wish to be specific. It is often abbreviated "EW." It is not "Web Expression," "Expressions Web," "Web Expressions," or plain "Expression" or "Expressions." Not using the correct name indicates either ignorance or laziness. Most folks would rather avoid the appearance of either.
    Sunday, September 12, 2010 12:53 AM
  • Hi Scott,

    Thanks for the info. I'm going to take another look at using flowplayer. I've learned quite a bit since I tried it a few weeks ago, so who knows. Maybe I'll get it. I'll let you know!

    Sunday, September 12, 2010 6:53 PM