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

  • Status: Closed
  • Hadiah: $190
  • Penyertaan diterima: 2
  • Pemenang: kayecandy

Ringkasan Peraduan

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 [login to view URL] (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. [login to view URL] or www.wikipedia.org.

For a few more details see the attached PDF

Kemahiran Disyorkan

Maklum balas Majikan

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

Gambar Profil adrianmw, United States.

Penyertaan teratas dari peraduan ini

Lihat Lagi Entri

Papan Penjelasan Umum

  • adrianmw
    Penganjur Peraduan
    • 2 bulan yang lalu

    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.

    • 2 bulan yang lalu
  • kayecandy
    kayecandy
    • 3 bulan yang lalu

    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?

    • 3 bulan yang lalu
    1. adrianmw
      Penganjur Peraduan
      • 3 bulan yang lalu

      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.

      • 3 bulan yang lalu
    2. adrianmw
      Penganjur Peraduan
      • 2 bulan yang lalu

      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.

      • 2 bulan yang lalu
  • adrianmw
    Penganjur Peraduan
    • 3 bulan yang lalu

    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.

    • 3 bulan yang lalu
  • adrianmw
    Penganjur Peraduan
    • 3 bulan yang lalu

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

    • 3 bulan yang lalu
    1. frire
      frire
      • 3 bulan yang lalu

      hi, please see my rough demonstration #1

      • 3 bulan yang lalu
    2. adrianmw
      Penganjur Peraduan
      • 3 bulan yang lalu

      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.

      • 3 bulan yang lalu
  • adrianmw
    Penganjur Peraduan
    • 3 bulan yang lalu

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

    • 3 bulan yang lalu
  • adrianmw
    Penganjur Peraduan
    • 3 bulan yang lalu

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

    • 3 bulan yang lalu

Tunjukkan lebih banyak komen

Bagaimana mula dengan peraduan

  • Paparkan peraduan anda

    Paparkan Peraduan Anda Cepat dan mudah

  • Dapatkan berjuta penyertaan

    Dapatkan Bertan-tan Penyertaan Dari serata dunia

  • Anugerahkan penyertaan terbaik

    Anugerahkan penyertaan terbaik Muat turun fail-fail - Mudah!

Paparkan Peraduan Sekarang atau Sertai kami Hari Ini!