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

  • Estado: Closed
  • Premio: $190
  • Propuestas recibidas: 2
  • Ganador: kayecandy

Resumen del concurso

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

Habilidades recomendadas

Comentarios del empleador

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

Imagen del perfil adrianmw, United States.

Principales propuestas de este concurso

Ver más participaciones

Tablero de aclaración pública

  • adrianmw
    Organizador del concurso
    • 5 años atrás

    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.

    • 5 años atrás
  • kayecandy
    kayecandy
    • 5 años atrás

    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?

    • 5 años atrás
    1. adrianmw
      Organizador del concurso
      • 5 años atrás

      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.

      • 5 años atrás
    2. adrianmw
      Organizador del concurso
      • 5 años atrás

      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.

      • 5 años atrás
  • adrianmw
    Organizador del concurso
    • 5 años atrás

    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.

    • 5 años atrás
  • adrianmw
    Organizador del concurso
    • 5 años atrás

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

    • 5 años atrás
    1. frire
      frire
      • 5 años atrás

      hi, please see my rough demonstration #1

      • 5 años atrás
    2. adrianmw
      Organizador del concurso
      • 5 años atrás

      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.

      • 5 años atrás
  • adrianmw
    Organizador del concurso
    • 5 años atrás

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

    • 5 años atrás
  • adrianmw
    Organizador del concurso
    • 5 años atrás

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

    • 5 años atrás

Mostrar más comentarios

Cómo comenzar con los concursos

  • Publica tu concurso

    Publica tu concurso Fácil y rápido

  • Recibe montones de propuestas

    Consigue toneladas de propuestas De todo el mundo

  • Elige la mejor propuesta

    Elige la mejor propuesta ¡Descarga fácilmente los archivos!

Publica un concurso ahora o únete a nosotros hoy