www.webdeveloper.com
Results 1 to 7 of 7

Thread: Make a thumbnail open a video (WITHIN THE SAME HTML PAGE)

  1. #1
    Join Date
    Jul 2007
    Posts
    19

    Make a thumbnail open a video (WITHIN THE SAME HTML PAGE)

    All/ I am creating a web page and I want to list like 4 thumbnail images, and have all of them open a different .mov or .avi file. That thing is, I want all of this activity on the same html page. I don't want to have to create different pages.

    To get an idea, the page in design currently is http://www.nobegging.com/wellness2.html (I want each thumb to start a different video (where the current 320x240 video currently resides.)

    Thanks for any help! C/ (This post is in under the HTML category as well).

  2. #2
    Join Date
    Aug 2007
    Location
    London
    Posts
    57
    Hi,

    You can do this by using iframe. This may not be the best way but I an not sure how else you can do this. Bacially an iframe can be placed on your website page and refreshed without having to reload the whole page, this iframe contains another webpage which has the video file embedded. using your thumbnails you can change the page within the iframe which will result in the video clip changing as well.

    iframe - http://www.w3schools.com/tags/tag_iframe.asp

    regards

  3. #3
    Join Date
    Jul 2007
    Posts
    19
    Thanks for the reply. Actually, this is the method that I ran across to use by another forum guru Ron. I have since tried to implement on another page (http://www.apocalyptomedia.com/PROJE...14/videos.html)

    There are 4 vids on the page (under THE PERFORMANCE header). The red TV serves as the placeholder. The issue is that the video after selecting one, the vids ALL display when only one is selected. Example

    1. Select Comedy
    2. the result is all vids display vertically connected
    3. If you select Gospel, then, Neo Soul, etc. then the vids disappear and begin to play as they should.

    There are two things I'd like to resolve here
    1. The obvious would be the multiple display of the vids after selecting one to initially play.
    2. To make the links (Comedy, Gospel, Neo Soul, and Jazz) links typical links that change the mouse to a 'Hand' to denote a link selection. *Currently this isn't the case. I had to take out the href link in the <a> tag for the iFrame because it was causing a jump, meaning upon clicking, the page would refresh and be at the top so the suer would have to scroll down again to the video display. The original look like <a href="#">. Below is the HTML and CSS.

    *****HTML******

    <a onclick="playMovie(1)">Comedy</a> |
    <a onclick="playMovie(2)">Gospel</a> |
    <a onclick="playMovie(3)">Neo Soul</a> |
    <a onclick="playMovie(4)">Jazz</a><br />

    <!-- <div class="video">
    <br />


    <iframe class="framesize" id="frame1" src="iframe1.html"></iframe>
    <iframe class="framesize" id="frame2" src="iframe2.html"></iframe>
    <iframe class="framesize" id="frame3" src="iframe3.html"></iframe>
    <iframe class="framesize" id="frame4" src="iframe4.html"></iframe> -->

    <div class="video">
    <div id="stage">

    <iframe class="framesize" id="frame1" src="iframe1.html"></iframe>
    <iframe class="framesize" id="frame2" src="iframe2.html"></iframe>
    <iframe class="framesize" id="frame3" src="iframe3.html"></iframe>
    <iframe class="framesize" id="frame4" src="iframe4.html"></iframe>

    </div>
    </div>

    *********** END OF HTML*************
    *************BEGINNING OF CSS**********

    #colOne .video {
    top: 450px;
    width: 285px;
    height: 260px;
    padding: 1em 1em 3em 1em;
    background: url(images/videobg.jpg) no-repeat;
    }

    /*----------------------------Start Payneless----------------------------------*/

    .framesize {
    width: 240px; /*240px; */
    height: 190px; /*190px;*/
    }

    #stage {
    position: absolute;
    /* background: url(images/videobg.jpg) no-repeat; */
    right: 650px; /*594px;*/
    display: none;
    width: 240px; /*240px;*/
    height: 205px; /*205px;*/
    }

    .iframe {
    border: 0px;
    display: none;
    /* background-color: transparent; */
    padding: 0px;

    }

    ************* END OF CSS ***********

    Thanks for your input....C/

  4. #4
    Join Date
    Jul 2007
    Posts
    19
    And also, in addition, I'm looking for a command or script that will display a "Loading....please wait" animated gif.....or something to entertain while these 15-20MB files load! This likely will be a new thread in the graphics forum...FYI.

  5. #5
    Join Date
    Aug 2007
    Location
    London
    Posts
    57
    Hi,

    You can stream your videos in many different formats, windows media, quicktime, flash video. The past projects I have used http://www.rivavx.com/?encoder

    This is a free flash video encoder, hope it helps.

    This is a link to a free flash video player : http://www.jeroenwijering.com/?item=Flash_video_Player

    regards

  6. #6
    Join Date
    Aug 2007
    Location
    London
    Posts
    57
    Hi,

    This is how I would approach the development you require:

    1. Create HTML page and insert 1 iframe, give iframe and ID
    2. Create for seperate html files containing one video in each file
    3. use href to reload content in iframe

    This is the only method I would know how to impliment, sorry if this does not help.

    One other way - I create a video section for one of my clients - see http://www.stephanie-benson.co.uk/ - On this website I used a pop window and avoided iframe.

    regards

  7. #7
    Join Date
    Jul 2007
    Posts
    19
    This was very good information...as I'm ALL about the freeware and online tools. I will keep this thread updated with my progress whichever route I decide to take. Also, I like your work (I saw the sample artist link) and your home page. I might have to direct you tot my new thread about music players!!! Coming Soon!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles