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

  • Durum: Closed
  • Ödül: $190
  • Alınan Girdiler: 2
  • Kazanan: kayecandy

Yarışma Özeti

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

Aranan Beceriler

Winner
Özellikli Yarışma
Benzer Yarışma İlan Et

İşveren Geribildirimi

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

Profil Görüntüsü adrianmw, United States.

Bu yarışmadan başlıca girdiler

Daha Fazla Girdi Görüntüleyin

Genel Açıklama Panosu

  • adrianmw
    Yarışma Sahibi
    • 6 yıl önce

    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 yıl önce
  • kayecandy
    kayecandy
    • 6 yıl önce

    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 yıl önce
    1. adrianmw
      Yarışma Sahibi
      • 6 yıl önce

      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 yıl önce
    2. adrianmw
      Yarışma Sahibi
      • 6 yıl önce

      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 yıl önce
  • adrianmw
    Yarışma Sahibi
    • 6 yıl önce

    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 yıl önce
  • adrianmw
    Yarışma Sahibi
    • 6 yıl önce

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

    • 6 yıl önce
    1. frire
      frire
      • 6 yıl önce

      hi, please see my rough demonstration #1

      • 6 yıl önce
    2. adrianmw
      Yarışma Sahibi
      • 6 yıl önce

      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 yıl önce
  • adrianmw
    Yarışma Sahibi
    • 6 yıl önce

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

    • 6 yıl önce
  • adrianmw
    Yarışma Sahibi
    • 6 yıl önce

    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 yıl önce

Daha fazla yorum göster

Yarışmalara nasıl başlanır

  • Projenizi ilan edin

    Yarışmanızı İlan Edin Hızlı ve kolay

  • Tonlarca girdi alın

    Tonlarca Girdi Alın Bütün dünyadan

  • En iyi girdiyi seçin

    En iyi girdiyi seçin Dosyaları indirin - Kolay!

Şimdi bir Yarışma İlan Et ya da Bugün Bize Katılın!