Design a Web Page to Update Live Based on Video Playback Counter.

  • Status: Closed
  • Prize: $190
  • Entries Received: 2
  • Winner: kayecandy

Contest Brief

Below I’ll describe a preliminary design for an educational web site that shows an updating commentary as a video plays. The initial job is as follows: review & comment on the design and outline a technical approach and selection of technologies to implement it. A simple initial proof of concept version of site functionality is described in the ‘basic functionality’ section that will be implemented once an approach is agreed upon.

Implementation Guidelines:

The site should run on all popular browsers including mobile versions and comply with core web standards to ensure longevity and reduce maintenance. Recent browser versions may be assumed. It is preferred that it be implemented entirely in stock clients so no server customization, code, or browser plugins are needed. The preferred video system is YouTube. These requirements will be reconsidered if shown to be too restrictive.

Basic Functionality:

The web page is divide into three sections; at the top is an embedded video window with standard navigation/scrubbing tools including a full-screen option. Below that is a region that shows a window into a scrollable html document containing a commentary that will be updated as the video plays, i.e. as various timecodes become current. Below that is another region that shows an external web site in a window that is also updated as the video plays.

A basic usage scenario is as follows: The video starts, and shows a picture of the planet Mars 10 seconds from the beginning. When the counter reads 00:00:10 this triggers the middle section to update to load a comment that says “This is Mars, this image came from the following NASA web page:” and the bottom section is updated to show a page from www.nasa.gov (this url having been read from a hidden tag in the comment file.)

The user then scrolls the middle comment window down until they come across a comment titled ‘Venus.’ If the user clicks on the word ‘Venus’, the video is scrubbed to a timecode indicated in an xml tag in that comment. The lower section is then updated as before, this time to show a page from another site, e.g. www.esa.int or www.wikipedia.org.

For a few more details see the attached PDF

Recommended Skills

Winner
Featured Contest
Post a Contest Like This

Employer Feedback

“Candice was great to work with. She is both knowledgable and helpful.”

Profile image adrianmw, United States.

Top entries from this contest

View More Entries

Public Clarification Board

  • adrianmw
    Contest Holder
    • 6 years ago

    I have updated the Project Overview PDF to add detail to following sections: 'Major Design Decisions' and the final 'Commentary Combinations and File Generation' section.

    • 6 years ago
  • kayecandy
    kayecandy
    • 6 years ago

    Using iframes would be a problem since alot of major sites would disable their content from being loaded in an iframe. I'm just assuming the bottom section is for further information on the video? Does it need to be interactive? Maybe an image (or screenshot of the page) instead?

    • 6 years ago
    1. adrianmw
      Contest Holder
      • 6 years ago

      Hi, yes this is a problem. nasa.gov is one of the key sites I wish to reference and they do block iframes. But others are fine (wikipedia for example.) We could do a screenshot but people will want to click on the links. So another possible solution is to open all the web pages in a pop-up window rather than the lower region. We’d would need to keep control of that window even when people navigate (within nasa.gov for example) to prevent lots of pop-ups being created. I am not sure if this can be done reliably. There may be other solutions.

      • 6 years ago
    2. adrianmw
      Contest Holder
      • 6 years ago

      Thank you for your help demonstrating the pop-up idea can work. Unfortunately, as it requires people to disable pop-ups I'd like to continue looking for other solutions.

      • 6 years ago
  • adrianmw
    Contest Holder
    • 6 years ago

    To clarify: this competition/fee is just for the initial research and a proposal on how you'd implement the functionality I describe. Once that's decided the actual implementation will be for an additional fee.

    • 6 years ago
  • adrianmw
    Contest Holder
    • 6 years ago

    A very rough mockup (using obsolete frames) can be seen here: http://www.theplanetsonline.com.

    • 6 years ago
    1. frire
      frire
      • 6 years ago

      hi, please see my rough demonstration #1

      • 6 years ago
    2. adrianmw
      Contest Holder
      • 6 years ago

      Thank you Upmaka, that's great to see some of the functionality actually working! For this competition I'm hoping to receive a document that describes how you would implement the other functionality I describe too. May I suggest adding notes to my PDF document? There will be some challenges, for example I have learned that nasa.gov does not permit its pages to be shown in iframes. I would like to know if there is a reasonable way to still show nasa.gov in the lower region.

      • 6 years ago
  • adrianmw
    Contest Holder
    • 6 years ago

    My guess is it will be in html5 and javascript using the YouTube embedded player.

    • 6 years ago
  • adrianmw
    Contest Holder
    • 6 years ago

    Hi, this first task is just a detailed technical proposal for how to implement the functionality I describe. Graphic design will come later. Thanks.

    • 6 years ago

Show more comments

How to get started with contests

  • Post your contest

    Post Your Contest Quick and easy

  • Get tons of entries

    Get Tons of Entries From around the world

  • Award the best entry

    Award the best entry Download the files - Easy!

Post a Contest Now or Join us Today!